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;
});
Related
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">
I have a form with two submit buttons.
I want the user to be presented with a confirm window before deleting and if agreeing then submitting the form for deletion
<script>
$(document).ready(function(){
$("#delete").on('click', function (event){
var form = $('form');
event.preventDefault();
if(confirm("You cannot revert this action. Item will be deleted pemanently. Delete anyway?")){
form.submit() //which button will it assume it was used?
}
});
});
</script>
Rather that stopping form from submitting always, you can prevent form only after confirm alert.
<script>
$(document).ready(function(){
$("#delete").on('click', function (event){
var form = $('form');
if(!confirm("You cannot revert this action. Item will be deleted pemanently. Delete anyway?")){
event.preventDefault();
}
});
});
</script>
I prefer submitting form values with AJAX by hitting "Return" and all my setups, which I did before, are working, but today it stopped working. Here are the the steps, which I have been following for a quite a long time.
Include jQuery
Setup my form
Preventing it form submitting
$(document).ready(function(){
$(document).on('keyup', myFormSelector, function(event){
if ( event.keyCode === 13 ) {
event.preventDefault();
}
});
});
change the event to keydown and it will work.
try to disable the default behaviour from the submit event and add a SUBMIT-element (display:none).
If a form does have a submit-element, the return key does work like you want it.
Howto disable the submit event:
$('#myForm').submit(function(e) {
e.preventDefault(); // disabling default submit with reload.
// ajax code here
});
if this does not work, u may try this also:
<form id="myForm" onsubmit="return false"> ... </form>
Returning false does stop submitting too.
When using submit elements instead of keyup/keydown, you will be able to add multiple forms on your page with the desired behaviour.
I tried to implement a file upload process in my grid.
I chose to use the jquery.iframe-post-form plugin.
Most solutions post the data of the form and after the upload file.
In order to post all data of a form at once (Lastname, ...) + photo, I replaced the submit button of the form (sData) by mine.
$(formid).removeAttr('onsubmit');
$(formid).iframePostForm({ ... });
I attached code to this new button (click event). I changed the submit button id , so jqGrid will not attach its click event .
$('#sData').attr('id', 'mysubmit')
.click(function(e)
{
...
$(formid).submit();
})
Therefore I changed the behaviour of jqgrid: no beforeSubmit event, no afterSubmit event, no afterComplete event !
How to fire after all the afterSubmit event for getting back errors ?
How about just overriding the default behavior of the button?
Do your custom stuff the submit the form?
$(document).ready(function () {
$(":button").click(function (event) {
event.preventDefault();
//Do Stuff then submit the form
$('form').submit();
});
});
I am using validationEngine to validate a form that is also launching a please wait modal.
Here's the code I am using to do this:
$("#main_form").validationEngine({
onValidationComplete: function(form, status){
if(status) {
ShowProgressAnimation();
form.validationEngine('detach');
form.submit();
}
}
});
The issue I am having is I have a script that launches window.onbeforeunload.
$("form").submit(function(e){
window.onbeforeunload = UnPopIt;
});
Normally it would ignore form submissions, but in this case because of the form.submit it's not.
Is there a proper way to detect this and stop the window.onbeforeunload from loading if it detects the form.submit?
Thanks!
EDIT:
I also forgot to add I think this issue only exists in IE.
The given script does not launch window.onbeforeunload, it just assigns a function to it.
If you want to prevent form submission, you need to return false in the submit handler:
$("form").submit(function(e){
window.onbeforeunload = UnPopIt;
return false;
});