I have the following code on my login page for Submit.
$("form").submit(function()
{setTimeout(function(){
alert("Thank you for requesting an account. Once your request is reviewed by an administrator, you will receive an email with your login credentials."); location.reload();
submit = true;}, 3000);
});
The issue is I have another Submit button, and this message pops up on clicking that button as well. How can i fix this?
I want one submit to show this popup and the other submit button to login to the application without showing this popup.
Instead of doing the alert on the submit of the form do it on the click of buttons and then call submit.
$( "#firstButton" ).click(function() {
alert('whatever');
$( "#form_id" ).submit();
});
$( "#secondButton" ).click(function() {
$( "#form_id" ).submit();
});
Also, to prevent the buttons within your form from automatically submitting change their types from type="submit" to type="button". This way they will not trigger the submit automatically. Instead you will only trigger the submit explicitly inside your click functions.
use separate button IDs and call a function to submit the from. also provide unique ID for the form because using the form tag will trigger the submit function of all form elements
$('#buttonid').click(function(e){
e.preventDefault();
submitFunction(); }); // the function to submit the from with id #formID
function submitFunction(){
$("#formID").submit(function()
{setTimeout(function(){
alert("Thank you for requesting an account. Once your request is reviewed by an administrator, you will receive an email with your login credentials."); location.reload();
submit = true;}, 3000);
});
}
You must not use $("form") because it will match all form elements.
You should assign an ID or class attribute to your forms so that you would match only those specific elements.
$("#form-id").submit(function() ...
^^^^^^^^
And your HTML form:
<form id="form-id">
Related
Using jquery validatye plugin, I am validating and submitting the form to the server which stores form data in data base. The issue is when user double clicks on the form, multiple requests are going in and its submitting twice to the server and its resulting in multiple recors with same data in data base. I want to avoid this scenario. I want the form to be submitted only once even though the user clicks twice on the submit button.
Code:
var validator = jQuery("#form")
.validate(
{
errorClass : "invalid",
validClass : "valid",
submitHandler : function() {
//function to submit form to client
submitFormtoClient();
},
When the user clicks on submit the form is validated and then submit handler function is called. I want this to be called only once even though the submit button has been clicked twice
The submitHandler is only fired after the form is valid AND the submit button is clicked. If you disable the submit button immediately after it's first clicked, it would be impossible to have a double-click situation.
submitHandler: function(form) { // form is valid
// disable submit button since it was already clicked and submit is happening next
$('#your-submit-button').prop('disabled', true);
// function to submit form to client
submitFormtoClient();
}
Whenever you determine that the form is valid and should be submitted, in on "submit", before you return true, you can set the form's submit button to be disabled, and it should never submit twice.
If you determine it shouldn't submit, you'd return false.
$('.foo-form').on("submit", function(event){
$(this).children('button[type=submit]').prop('disabled', true);
return true;
}
In this case, I used button[type=submit] but you can use input[type=submit] as well.
I noticed one pecular thing. When there are several submit buttons in your HTML form like so:
<button type="submit" name="submit_button", value="b1"></button>
<button type="submit" name="submit_button", value="b2"></button>
<button type="submit" name="submit_button", value="b2"></button>
..and you do this:
var $form = $('#my_html_form');
$form.submit(function() {
if (!checkPassed && !hasRequiredValue) {
bootbox.confirm('Are you sure that you don\'t need <strong>{requiredValue}</strong> parameter?', function(result) {
if (result) {
checkPassed = true;
$form.submit();
}
});
return false;
}
});
the field submit_button does not get submitted at all, it's just not present in the request data.
Would there be a way to force JS to submit data together with the value of the submit button clicked?
I will only add that if the form is submited with PHP and not JS, the submit_button field is present and has the value of b1, b2, or b3 - depending on which button was clicked.
P.S. I just thought that the source of the problem might be that I'm using <button> instead of <input>. However, as I said, it's all good with PHP.
Only a successful submit button will be included in the form data.
A successful submit button is one that is used to submit the form.
Your JavaScript runs on the submit event and:
Always cancels the submission of the form
Sometimes submits the form with JS
Since you are submitting the form with JS instead of the submit button, none of the submit buttons are successful.
Change your JS so that it:
Sometimes cancels the submission of the form
Such:
$form.submit(function() {
// Add a NOT condition here
if (!<someCondition>) {
return false;
}
return true;
});
Regarding the update:
OK, so you are always canceling the submission, and using a DOM based widget to ask for confirmation.
In that case, you need to capture the value of the submit button separately.
The information isn't exposed to the submit event so you need to do it on the click event of the submit button.
Add a hidden input to your form:
<input type="hidden" name="submit_button">
Then add another event handler:
$form.on("click", '[name="submit_button"]', function (event) {
$form.find('[type="hidden"][name="submit_button"]').val(
$(this).val()
);
});
Yes you can get the value of the button
$('button').click(function(event) {
var button = $(this).data('clicked', $(event.target));
var value = button.val();
});
Here you go.
$("button[name=submit_button]").click(function() {
alert($(this).val());
});
Fiddle: http://jsfiddle.net/tw698hvs/
I have a js-code:
$(document).on('click', '#form #submitForm', function(e){
$('#form').submit();
return false;
});
$(document).on('submit', '#form', function(e){
// ajax request on submit form
return false;
});
where #form is the id of form, #submitForm is the id of submit-button inside this form.
I use .on() because of fact that my form is dynamically generated by ajax requests on submit.
Some people with Google Chrome on Win7 complaints about this isn't working and by pressing #submitForm just redirect to "form action"-url occurs.
I have Google Chrome on Win7 and it's working perfectly.
Want do I missing or did wrong?
When you submit a form, this will redirect to the url action. If you dont want to redirect, you have to create an ajax that "submit " the form
What you need is to stop the default behaviour of form when submit button is pressed.
Change your code to this:
$(document).on('submit', '#form', function(e){
// ajax request on submit form
e.preventDefault();
e.stopPropogation();
return false;
});
I did a jQuery form (form1) which bring another form(form2) in that page through ajax.
Now I want to submit the form2 data through ajax.
But whenever I click the button, it submit the whole page. I mean the whole page reloads.
$(document).ready(function() {
$("#form2").submit(function() {
$(this).ajaxSubmit({
beforeSubmit: function(before) {
$('.loading_result').html('Loading...');
},
success: function(dd) {
$('.loading_result').html(dd);
}
});
return false;
});
});
All the JavaScript codes in the parent page. I don't have any JavaScript codes in ajax pages
//
page.php
* There is a form (form1) in this page.
* All the jQuery functions are inside the page.php
When the form1 is submitted, it brings data from page2.php // It works good.
** page2.php gives form2.
Now when i submit the from2 (which is also in page.php after the ajax request) it does not trigger the jquery function inside page.php
Instead of binding the form submit on $(document).ready, I usually just include an "onclick" event to the form's button:
<button type='submit' onclick='MyAjaxFunction();return false;'>Submit</button>
The return false; portion of the onclick will prevent the form from submitting.
This is because the form is being submitted in the traditional sense. This is the default action of the submit event. You need to suppress this:
$("#form2").submit(function(evt) {
evt.preventDefault(); //<-- prevent the event's default action
//code here...
I am using a jQuery validation engine by position absolute. The function gets triggered on submit and the function is called when dom is ready.
Position Absolute Function trigger
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#formID").validationEngine();
});
The above function is a basic initialization of the function. When the dom is ready, the function is triggered and when the form with FormID is submitted it will validate the form.
But i want to make it validate the fields by clicking a button instead of a submit button.
<input type="button" value="validate" id="next" name="next">
The reason why i want to do is because am using validation in a wizard, the submit button will be in the last step of the form. but there will be next buttons in every field to go to the next page of the form wizard. I want to validate the fields in the first page when the next button in the first page is clicked.
Please tell me how can i do it ?
Position Absolute validation engine
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
Would do it this way:
function ValidateForm()
{
return $('#formID').validationEngine({ returnIsValid: true });
}
and then add the following in the click event for button:
if (ValidateForm()==false) return false;
Try this:
jQuery( '#next' ).click(function(){
return $( '#formID' ).validationEngine( 'validate' );
});