I'm using jQuery validator and jQuery 1.8.3. For some reason my form is submitted twice which causes errors. This is the code:
someNameSpace.myValidateFunction = function(){
$('#myForm').validate({
submitHandler: function(){
mySubmitCallBackFunction();
},
});
return false;
};
someNameSpace.myValidateFunction();
$(document).on('click', '#myFormSubmitButton', function(){
$('#myForm').submit();
});
Any idea why the form is submitting twice? The form button is not an input submit but a <button> element (needed in this case).
Your form is submitted twice because :
you call $('#myForm').submit()
you click on the submit button which also triggers the form event. Note : the , if it is in a form, will also trigger the form event on click
So I think you have to add a return false in your on click method to prevent the form to be submitted when you click on the submit button. Now, only $('#myForm').submit(); will submit the form :
someNameSpace.myValidateFunction = function(){
$('#myForm').validate({
submitHandler: function(){
mySubmitCallBackFunction();
},
});
return false;
};
someNameSpace.myValidateFunction();
$(document).on('click', '#myFormSubmitButton', function(){
$('#myForm').submit();
return false;
});
I think you also don't need to add this :
$(document).on('click', '#myFormSubmitButton', function(){
$('#myForm').submit();
return false;
});
The validate method will be automatically called when the form is submited.
You don't need to add following code
$(document).on('click', '#myFormSubmitButton', function(){
$('#myForm').submit();
});
submitHandler code will automatically handles form submit.
I had the same issue:
my goal: validate many forms with the same class:
my php:
form class="js-validate-itemForm" method="post" action="">
...
form class="js-validate-itemForm" method="post" action="">
my js:
$('.js-validate-itemForm').each(function () {
$(this).validate({
submitHandler: function (form, event) {
doActionOnItemform(form, event);
return false;
}
});
});
I figure out the reason why this code would submit twice from:
someNameSpace.myValidateFunction = function(){
$('#myForm').validate({
submitHandler: function(){
mySubmitCallBackFunction();
},
});
return false;
};
someNameSpace.myValidateFunction();
$(document).on('click', '#myFormSubmitButton', function(){
$('#myForm').submit();
});
At first, when u click button in the form, u will call $('#myForm').submit(), and this call event will submit one form; then form event submitHandler:will call ajaxsubmit to submit another form; so u will submit twice forms.
Secondly, to be honest, this code has errors -^_^- and dont understand the jQuery_validate_plugin;
If u know $('#myForm').validate will submit one form, u know the solution--u just delete the button call event and let $('#myForm').validate submit form; So that is the codeļ¼
someNameSpace.myValidateFunction = function(){
$('#myForm').validate({
submitHandler: function(){
mySubmitCallBackFunction();
},
});
};
Then done!
Related
I need to confirm delete before submit form using javascript, i tried this code but it didnt work :
Delete
You should confirm first before submitting the form. And you need to set a condition whether it returned true or false
Delete
Submit form only when user confirm it otherwise set return false. So your form will not be submitted.
function confirmdelete() {
if (confirm("Are you sure?")) {
// submit form
}
return false;
}
Please check the comments against the code.
$(function () {
//Attach click event to the link. In this case all links
//You might want to update this, make it more specific by using id or name or class of the a tag
$('a').on('click', function (event) {
//prevent the default action of the tag
event.preventDefault();
//confirm
var conf = confirm('Confirm Delete');
if (conf) {
//you action if true
}
else {
return;
}
});
});
Is there a way to get the Data of an Inputbox (Lets say Username) before the usrr even click the Submit button?
you can use jquery for achieve this
suppose your form is like
<form id="myForm" action="post">
then you can use
$(function(){
$("#myForm").submit(function(event){
event.preventDefault();
var username=$('#txtbox').val();
$("#myForm").submit();
}
});
jQuery('#txtbox').on('input', function() {
// code
});
OR
jQuery('#txtbox').on('input propertychange paste', function() {
// code
});
When I use this script
<form id="mktoForm_1740"></form>
<script>MktoForms2.loadForm("//app-e.example.com", "517-ITT-285", 1740);</script>
the form will load normally. But the below script didn't load form. I think problem related to javascript.
<script>MktoForms2.loadForm("//app-example.com", "517-ITT-285", 1740, function(form){
//Add an onSuccess handler
form.onSuccess(function(values, followUpUrl){
//get the form's jQuery element and hide it
form.getFormElem().hide();
document.getElementById('confirmform').style.visibility = 'visible';
//return false to prevent the submission handler from taking the lead to the follow up url.
return false;
});
});
</script>
<div id="confirmform" style="visibility:hidden;margin-top: 35px;"><p><strong>Thank you for registering. You will receive a confirmation by email in a minute.</strong></p></div>
How to fix this problem........
use $(document).ready(function(){});
try this
<script>
$(document).ready(function() {
MktoForms2.loadForm("//app-example.com", "517-ITT-285", 1740, function(form) {
//Add an onSuccess handler
form.onSuccess(function(values, followUpUrl) {
//get the form's jQuery element and hide it
form.getFormElem().hide();
document.getElementById('confirmform').style.visibility = 'visible';
//return false to prevent the submission handler from taking the lead to the follow up url.
return false;
});
});
});
</script>
<div id="confirmform" style="visibility:hidden;margin-top: 35px;">
<p><strong>Thank you for registering. You will receive a confirmation by email in a minute.</strong></p>
</div>
<form id="mktoForm_1740"></form>
<script>MktoForms2.loadForm("//app-example.com", "517-ITT-285", 1740, function(form){
form.onSuccess(function(values, followUpUrl){
form.getFormElem().hide();
document.getElementById('confirmform').style.visibility = 'visible';
return false;
});
});</script>
Use above code. this will work.
How can I get a reference to the submit button using the jQuery validation plugin?
function defSubmHendler(){
$myform.validate({
rules: rules,
messages: messages,
submitHandler: function() {
event.preventDefault();
if (~this form id == A){
condition1;
}
else if (~this form id == B){
condition2;
} else {}
...
$.ajax({
...
});
}
});
}
In this case this == $.validator. I need a reference to the submit button / form in submitHandler.
Consider giving an id to your submit button and referencing it like so:
submitHandler: function() {
//Your submit button referenced by its ID
$("#mySubmitButton").doStuff();
}
Or, use the form element from your submitHandler function and find the submit button contained on that form:
submitHandler: function(form) {
//Via the form argument passed to the submitHandler
var btnSubmit = form.find(":submit");
}
I have a Jquery form with a validation script on the URL, it correctly validates and invalidates the URL. However, when it invalidates the URL, it still allows the form button to be clicked, but not submitted.
This causes the hidden loading image to show even though the form is no being submitted.
Here is a fiddle with the loader and script
http://jsfiddle.net/mikeef74/gzSDH/16/
var submit_hit = false;
$(document).ready(function () {
$('#iframe1').on('load', function () {
$('#loader1').hide();
if (submit_hit) {
$('#form_container').hide();
$('#mydivhide1, #mydivhide2').show();
$('body').css("background-image", "url(images/previewbg7.jpg)");
$('body').css("overflow-y", "auto");
}
}
});
$("#form_710370").validate();
$('#form_710370').submit(function (e) {
$('#loader1').show();
submit_hit = true;
return true;
});
});
The submit event will trigger whenever you attempt to submit. You've defined a submit event handler tied to the form which is why the image is showing.
Seems you want to trigger the loader image on a conditional submit so you'll need to use the validation's submitHandler. Now the inner function will only trigger when the form is valid -- the loader image will display and the form will be explicitly submitted.
$("#form_710370").validate({
submitHandler: function(form) {
$("#loader1").show();
submit_hit = true;
form.submit();
}
});
// remove this
//$('#form_710370').submit(function (e) { ... }
http://jqueryvalidation.org/documentation/
This is way validate a form in jquery:
$(function() {
$("#form_710370").validate({
rules: {
//
},
messages: {
//
},
submitHandler: function(form) {
form.submit();
}
});
});