We Keep Coding

Dialog box when "Place Order" clicked

I want to display a dialog box when my customer click "Place Order" on checkout page for last confirmation.
I added following code
footer.php
<script type="text/javascript">
function lastConfirm() {
var r = confirm("Are you sure?");
if( r == true){
return true;
} else {
return false;
}
}
</script>
and I added onsubmit="lastConfirm()" inside form tag like below
form-checkout.php
<form name="checkout" method="post" class="checkout woocommerce-checkout" enctype="multipart/form-data" onsubmit="return lastConfirm()">
The dialog box pops up when I click "Place Order", but the order will be processed anyway whether I choose "OK" or "Cancel".
I want the order processed only when I click "OK".
How could I accomplish this?
EDIT - The working answer form me is:
<form method="post" onsubmit="return lastConfirm()">
I just needed to remove some (well...most) attributes.

remove the elements from Form Tag and place only the javascript function in onsubmit
<form onsubmit="return lastConfirm()">
basically the code showing in your question works any way to show the js function
but you should prevent the form from proceed to its method or any other parameter that will effect on the page to refresh sense you want to do every thing with js function

call your function inside the condition was true.

Stop double-clicking of submit button with Javascript

Here's my situation. I have a submit button. When clicked, some backend/database validation takes place and if everything's good, submit the form and disable the button so the form can't be submitted twice. If it does not pass validation, submittal cannot take place and the button stays active, so the user can resubmit the form. It sounds simple but I can't make it work. This is a C# web application.
I have tried to add the code to the button on page load. When the submit button is clicked and if validation fails, remove the code that disables the button. But here is my problem. Since the "disable" code is removed and the user fixes any error and resubmit, the button can be clicked more than one as the code is no longer there.
I do not want to use Ajax for this because the backend check is very complicated. Is there another way to do it? I've tried to add the "disable" code on "load" but it does not work on post back when the validation fails.
if (window.addEventListener)
window.addEventListener("load", lockSubmit, false);
else if (window.attachEvent)
window.attachEvent("onload", lockSubmit);
else window.onload = lockSubmit;
Any help is appreciated.

Try the snippet below
window.onload = function(){
// Insert the following function somewhere in your .js file / section
(function prevent_over_submitting(){
var form = document.forms.theform;
if(form || form.nodeName == 'FORM'){
form.onsubmit = function(){
form.submit.value = 'Proccesing...';
form.submit.disabled = true;
};
}
})();
};
While your form should look something like this one
<form id="theform" method="post" action="">
<input type="text" name="firsname" value="" />
<input type="text" name="lastname" value="" />
<input type="submit" name="submit" value="submit" />
</form>
Here is a working jsBin so you can play around.
Update:
The logic behind the snippet above
// server-side code (rather in pseudo-code this time)
if(form_has_been_submitted){ // check if the form has been submitted
errors[] = validate_data(post_data); // call the method to validate data
if(errors_array_is_empty){ // if everything is fine
submit_data(); // submit data
redirect_or_do_something; // (maybe) do other things
} // otherwise don't do anything
}
// validation method
validate_data(post){ // the only argument here represents all your form data
error = array;
if(post['firstname'] == wrong){ // check for error
error['firstname'] = 'Check your firsname'; // if you found one, push it to the error array
}
if(post['lastname'] == wrong){ // the same as in previous case
error['lastname'] = 'Check your lastname'; // the same as in previous case
}
return error; // return that array, it might be full or empty
}
// client-side code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyApplication</title>
<script type="text/javascript">
// the JavaScript snippet from above
</script>
</head>
<body>
<form id="theform" method="post" action="">
<input type="text" name="firsname" value="" />
<!-- show the error if you found one, otherwise show an empty string -->
<span><% (error['firstname'] ? error['firstname'] : "") %></span>
<input type="text" name="lastname" value="" />
<!-- same as in the previous case -->
<span><% (error['lastname'] ? error['lastname'] : "") %></span>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
As you can see, the JavaScript snippet above only disables the submit button onclick to prevent over-submitting; it will be enabled once the page is loaded again. This isn't my favorite way of validation but I followed your logic.

you can add this code in the onclick function:
First, add a global javascript variable, say var click = false;
and add this condition before validation occurs:
if(click){
return false
} else {
your normal validation code
}
if your page reloads each time you submit, then there is no need to add anything further, but if doesn't then add setInterval method which will reset the click variable for next use if validation fails.
The state of the click variable will remain true after first click and will further stop multiple clicks, unless page reloads or we reset the variable manually through code.

After clicking submit button the details entered by user has to be shown in another registration form

I created a HTML Registration page using HTML5 and Javascript its worked but after clicking submit button i have to show the details entered by the user in the another registration form (which is hidden on the same page before clicking submit button). once u have clicked submit button then that registration form has to be shown and the details which we entered also has to be shown.

If you have in first page fields with name "field1", "field2", "field3" etc
like -
<form action='page2.html'>
<input type='text' name='field1'>
<input type=submit>
</form>
In page2.html, get the parameters of GET request by javascript.
You can print the form values by using the function get(parameter) like - get("field1");
<script>
function get(name){
if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
return decodeURIComponent(name[1]);
}
</script>
In page1, you entered
<script>
document.write(get("field1"));
</script>
You can see it working here
But it is always better to use server side programing like php jsp asp etc. if you want to keep record for the fields and use it

Form fields value get reset without page load

Following is my code in which i am trying to accomplish, when user clicks on the submit button then my javascript function sets all the value to null in the textfields of the form whose id='contact_form' without loading the page . Kindly let me know how can i modify the following code to accomplish the functionality i've been trying to do.
Thanks!!
<script type='text/javascript'>
$(document).ready(function(){
$('#love').click(function(e) {
document.contact_form.name.value = '';
alert('aloha!!');
//stop the form from being submitted (not working fine)
e.preventDefault();
}
}
</script>
<form name='abc' action='' id='abc' >
<input type="submit" id='love' />
</form>
I have also tried the following function it worked fine but its not preventing from the page load
<script type='text/javascript'>
function js(){
document.contact_form.name.value = '';
//stop the form from being submitted (NOT WORKING!!)
preventDefault();
}
}
</script>

If you try onsubmit="return false;" in the form tag your form will not be submitted. Unfortunately it will NEVER be submit. Unless you are not planning to submit it via AJAX you have to modify your onsubmit event like this:
<form onsubmit="return callFunction()">
function callFunction() {
if(condition)
return true;
else
return false;
}

$("#abc").submit( function() {
// do everything you want.
return false; //will prevent the reload.
});

To have a function execute when the form submits you have to do something like this;
<form onsubmit="return validate();">
your form here
</form>
Then you can have your check in a function called 'validate()' (or whatever you want to call it)
Make sure the validate() function returns true is the form is allowed to submit, or returns false if the page is not allowed to submit.
Also put id's and names on your input elements, that way you can access them much easier.

Assuming you have an HTML like this :
<form>
<input type="text" id="text" />
<input type="submit" id='submit' value="clear above field without reloading" />
</form>
And you want the text field value to clear when a user submits without reloading using jQuery, then following script will be your remedy :
$(function(){
$('#submit').click(function(){
$('#text').value('');
})
});

A form can be submitted in many ways, not only by clicking on a submit buttons. You should really watch for submit events, and cancel them with preventDefault (instead of click events that might trigger the submit). See #user1359163's answer.
But you problem seem to be document.contact_form.name.value. There is no property contact_form on the document object, so this will raise an error. The preventDefault is not executed, your form gets submitted and you never see the error. Set your debugger to "Stop on errors"!
You might want something like document.forms["contact"], but I don't know your HTML. An id selector for the input element would be the better choice.

Open a popup window on submit button

I have one form in JSP. I have some input fields in that page, when user types his values then he clicks submit so that values will be inserted into the database.
But my purpose is that when user clicks submit button then one new popup window will be generated and this new popup window will carry those values at the time of inserted values in parent window. Ex: first page: Insert.jsp and popup window: Verifyinsert.jsp. In Insert.jsp page 3 input fields are present such as roll number, student name, address. User will enter these 3 fields first on Insert.jsp page and then user will click submit on Insert.jsp page, then one new popup window(Verifyinsert.jsp) will be generated carrying values when user just has typed in Insert.jsp and in that Verifyinsert.jsp page, submit button is present and if user clicks submit then records will be inserted into database and if cancel button will be clicked on Verifyinsert.jsp then that popup window will be simply disappeared. How to do it?
Any help is much appreciated.

Use onSubmit event
<html>
<head>
<script type="text/javascript">
function greeting(){
alert("Welcome " + document.forms["frm1"]["fname"].value + "!")
}
</script>
</head>
<body>
What is your name?<br />
<form name="frm1" action="submit.htm" onsubmit="greeting()">
<input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

Are you asking how to show popup window? Should it be js popup, with no page reload, or separate browser tab? For former we use jqModal library, examples. When user clicks on Submit button you need to display that popoup. When user clicks on Send button on that popup you need to get all values and send them to the server. There are a couple of way to do that too :)

Open a popup window in the submit of your Insert.jsp using
window.open("../insert.jsp?param1=xx&&pram2=cc")
you can send the parameters as append to the url of new window like above.
In the submit of Verifyinsert.jsp , you can call a parent page java script usign
window.opener.saveValue()
which is a javscript function in your parent page to save values to database .
Close your popup after saving .