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.
Related
I have tried window.confirm on a submit button saying "Are you sure" but even if I click on no it submits itself? Is this the wrong way of using it?
<button type="submit" class="btn btn-primary" onclick="window.confirm('Are you sure you want to transfer to user?')">
Transfer
</button>
use this
<form onsubmit="return confirm('Are you sure you want to transfer to user?')">
</form>
confirm returns a boolean. To make it work you will need to add return in the front:
return confirm(...);
http://jsfiddle.net/fu5LuLmx/
Instead of attaching to the click event, you might also want to consider attaching it to the submit event of the form, such that this piece of code would execute whenever the form is being submitted, not only when clicking this button.
You have to prevent from submitting so remove the onclick event, and add a onsubmit event on the form
<form name="form" id="myForm" onsubmit="return ask();">
<script>
function ask() {
if (window.confirm('Are you sure you want to transfer to user?')) {
return true;
} else {
return false;
}
}
</script>
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.
My form currently has two submit buttons. One for Search and the other for a Mark Complete function. I need to show a confirm dialog box ONLY when the "Mark Complete" button is clicked to submit the form with that validation is passed. Is it possible to identify this? I currently have the below confirmComplete function:
function confirmComplete() {
alert("confirmComplete");
var answer=confirm("Are you sure you want to continue");
if (answer==true)
{
return true;
}
else
{
return false;
}
}
Any help would be appreciated!
Set the onclick attribute of the "Mark Complete" button to this
onclick="return confirm('Are you sure you want to continue')"
and remove the confirmComplete function from the form
You can. You can put your buttons like this
<input type="submit" value="Search" />
<input type="submit" value="Mark Complete" onclick="{return confirmComplete();}" />
When Mark Complete button is clicked then the confirmComplete function will be called and when user says OK in the confirm dialog then only the form will be submitted.
You need to do the event from the click on the button and not the form submission. There is no crossbrowser way to know what submitted the form.
So here is a bypass solution:
<form id="frm" action="page.php" method="post" onsubmit="return onSubmit();">
<input />
<input type="submit" value="sub1" onclick="sub1();" />
<input type="submit" value="sub2" onclick="sub1();" />
</form>
<script type="text/javascript">
<!--
var frm = document.getElementById('frm');
function onSubmit(){
return false;
}
function sub1(){
alert('s1');
frm.submit();
}
function sub2(){
alert('s2');
}
//-->
</script>
when you call "confirm()" javascript pop up function , like onclick="return confirm('Are you sure to proceed?')" ,confirm box get appear with message 'Are you sure to proceed?' with two options 'ok' and 'cancel'.when you click ok it return true and proceed further execution of web page or if you click cancel it will return false and stop further execution of web page.
I don't know for an input tag, but it didn't worked for me with the click event directly on a button. In my case, the form was posted right away.
Here's a possible solution for a form with many buttons (for which only one of them must display the confirmation message)
In the view:
<FORM name="F_DESTINATION_DB" id="F_DESTINATION_DB" method="POST" onsubmit="return popConfirmationBox('<?php echo LanguageControler::getGeneralTranslation("DELETE_CONFIRMATION_MESSAGE", "Deleting is an irreversible action. Are you sure that you want to proceed to the deleting?");?> ','DELETE_DB_BUTTON')">
Javascript (in external file for code reuse):
/**
* Display a confirmation message box to validate if we must post the page or not.
*
* #param message String to display
* #param tagId String id of the tag that must display the message.
*
* #return Boolean (confirmation)
*/
function popConfirmationBox(message, tagId){
var confirmation = true;
if (typeof tagId === 'string' && document.activeElement.id.toUpperCase() === tagId.toUpperCase()) {
if (typeof message === 'string' && message.length > 0) {
confirmation = window.confirm(message);
}
}
return confirmation;
}
I had quite a hard time to achieve this (needed lot of research and testing), but the resulting code is pretty simple.
By default, I assume that the confirmation is yes (in case the clicked button is not the one meant to display the message or if the user doesn't supply a valid message string).
Additional note: Of course, this code won't do the trick if the user browser block client side code.
I hope it will help someone,
Jonathan Parent-Lévesque from Montreal
i've got a webpage with a form that has a dropdown selection and a submit button. the page also has a auto refresh function (every 10 secs) to retrieve and display the latest information from the server. when the submit button is clicked, a confirm alert popups with a yes/no option. user then select yes to submit the information to the server. the submission to server works
if the submit is clicked at the same time as the refresh occurred, the confirm dialog box popup but the form information is not submitted. is the confirm box still tied to the form?
here is my code. it may not be exactly the same because im my codes are offline but the geess is
<html>
<head>
<script type="text/javascript">
function confirmSubmit(message)
{
var ans = confirm(message);
if (ans == true)
{
return true;
}
else
{
return false
}
} //end of function
</script>
</head>
<body>
<form name="myForm" method="GET" action="GET">
<input type="submit" name="btnSubmit" value="submit" onclick="javascript:confirmSubmit()" />
</form>
</body>
</html>
The best thing would be to get rid of the auto refreshing so you don't have to worry about the form not being submitted. use AJAX instead to get new information that needs to be updated, this way the page doesn't need to refresh.
If for whatever reason you don't want to remove the auto-refreshing, what I would do is:
where ever you do the auto refreshing, check if the dropdown/form is being shown, and if it is, don't auto refresh.
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.