i have ajax validation function and when ajax validation is true then i use:
$("#test_form").submit();
it is work fine but any time i can click Enter and submit a form when form is not validated (skip validation process and pass wrong data).
i try put
$("#test_form").submit(function(){event.preventDefault();});
then still can submit with enter when data is wrong
or
$("#sample_form").submit(function(){false});
then i cant submit any time.
How to submit only when ajax is true?
The first part of your answer is said in the comment section :
Use $("#test_form").submit(function(event){event.preventDefault();}); notice function(event)
– Satpal
Then you'll notice an other problem, your form will never submit after the AJAX call. That is because you use $("#test_form").submit(); to submit, which is the jQuery triggering the event. When jQuery trigger the event, it will always be prevented by the preventDefault.
What you need to do is to use the native JavaScript event :
$("#test_form")[0].submit();
When you are using the native handler, the event you have been added with jQuery will not trigger. It will instead directly send the form.
In Submit button, Use onclick with return then On press enter it will check first javascript validation.
Related
I have created a form using html5 form validation for my website. However, validation part works only if I dont add onclick=somefunction() in submit button. If I add onclick event, it skips the validation part and directly executes the onclick() event. Here is the code for submit button..How to ensure both validation part, as well as onclick event, executes?
<button type="submit" class="signupbtn" onclick="clickAlert()">Request for
Registration</button>
function clickAlert() {
alert("You will get a call to verify your Registration soon!");
}
This has nothing to do with the onclick event. It is caused by the alert.
You are pulling the focus away from the form which causes the browser generated error message to be removed at the instant it would normally be displayed.
Don't use alert(). Instead, modify the DOM of the page to display the message there.
This question already has answers here:
How can I get the button that caused the submit from the form submit event?
(22 answers)
Closed 7 years ago.
Basically my question is very similar to:
Click a specific submit button with JQuery
However, I am not wanting to trigger my event on the button's click, I am wanting to trigger the event on the submit, of the form - but only of a specific button (as I have multiple submit buttons).
How can this be achieved?
Basically I've got this:
$("#btnCompleteOrder").click(function(event) {
//Do stuff here
}
And it works properly - however I want that event to trigger after form validation - so on submit (on click happens before form validation). However I don't think I can do .submit() on a button.
Edit: Yes this is also similar to How can I get the button that caused the submit from the form submit event?
However none of these options worked for me and I was looking for a more elegant solution to fix the problem.
I think I understand the problem now. See if this works for you.
Add an submit button to your form if you don't have one, this is necessary for the HTML5 validation to occur.
<input id="invisibleSubmit" type="submit" class="submit" style="display:none">
Then for your button handler use this:
$('#btnCompleteOrder').click(function(e) {
//don't submit the form
e.preventDefault();
//click the submit button so the html5 validtion occurrs
$("#invisibleSubmit").click();
//do some other stuff
//really submit the form
$(this).unbind('submit').submit()
});
You can use the submit method to bind a handler to a form's submit event.
For example:
$('form').submit(function () {
// Do stuff here.
});
Substitute form for the selector matching the form element.
This approach is better than simply listening for click, as you're probably aware, because a form can be submitted in more ways than just mouse click. A form can also be submitted by hitting enter in a text field or by tabbing to a submit button and hitting the space key. Because of this, you want to bind the event handler on the form itself, not any one UI element like the submit button.
I am submitting a form using JQuery and an event listener bound to a div (not an input field) and I am trying to prevent multiple submits, so the customer does not get overcharged. I am trying to accomplish this by removing the submit-button class of the clicked div, so the next time the user clicks it, JQuery won't listen to the event that is associated with the submit-button preventing multiple submits.
Using the implementation below however, for some reason, does not prevent multiple submits, as intended.
HTML
<div class="submit-button button-style">Submit</div>
JQuery
$(".submit-button").click(function(){
$(this).removeClass("submit-button");
//**submit form**
});
NOTE: I must stick to a solution that uses the html above, so solutions using an input element of type submit, will not be useful.
I appreciate any suggestions on how to make this work. Many thanks in advance!
You can make use of .one() to prevent it from firing multiple times -
$(".submit-button").one('click',function(){
//**submit form**
});
http://api.jquery.com/one/
Edit :
In case of error :
function submitForm(){
//**submit form**
$.post('submit.php').error(function(){
// rebind event on error
$(".submit-button").one('click',submitForm);
});
}
$(".submit-button").one('click',submitForm);
You could use something like:
$('something').one('click', function(){
// submit code
});
Which will only fire once.
A significant portion of users don't bother clicking the submit button to submit a form - there's other more convenient ways, like hitting the enter key when the cursor focus is on a form field.
A more robust approach is to block the form via the forms submit event, and maintain a variable to keep track of the form submission state.
var submitted = false;
$("form#myForm").submit(function(evt){
if (submitted) {
evt.preventDefault();//stops form submission
return;
}
submitted = true;
});
I omitted form validation for this example.
I have a form which uses GET as the method. I want to do some js validation on the form. I bind the event using
document.forms[0].onsubmit = function(){return myObj.myFrm.isFormValid();}.
In Firefox it works the first time I click on submit but after a while if I click it again the form submits even though I've not changed and data.
Any ideas?
Simply adding an event handler doesn't stop it from submitting.
You need to add in preventDefault();
(Documentation)
When one uses AJAX commands with Jquery, is it necessary to disable form action parameter in the HTML? The load URL and the action point to the same place, so is it necessary to have the action parameter?
You should use the event object's preventDefault() method, which will disable any default behavior associated with the element type. This is very important for links and form submit buttons.
For example:
<!-- you have this link -->
<a id="clickme" href="test.html">Click me</a>
You can disable the loading of test.html by using preventDefault()
$('#clickme').click(function(event) {
event.preventDefault();
// ...
});
You can also return false in your click function for the same effect.
In this case I think is useful only for clarity of code. When you put your code to make the AJAX call you can get the url from the form's action but that depends on you.
Try to be clear and consistent it's my advice.
If you are submitting the form via Ajax, then you just need to make sure there is not a way for the form to be submitted traditionally. You can either remove the form tags themselves, remove the actions, or remove any submit buttons. You can also capture the submit event of the form and just return false to prevent the form from doing a postback submit.