Develop Reference

How to prevent page refresh upon form.trigger('submit')?

I have the following code which works well when triggered by the user clicking on the form's submit button:
// load dashboards when filter form is submitted
$('div.active form.filter-form').submit(function (e) {
// get submitted values
submittedData = $(this).serializeArray();
getDashboardURL();
e.preventDefault();
});
However whenever I try to trigger the form submission in the snippet below, it results in the page refreshing:
// trigger reload of dashboard
$('select.filter').change(function () {
$('select#'+this.id).val($(this).val());
$('div.active form.filter-form').trigger('submit');
});
How can I prevent the form submission (triggered by the select change event) from refreshing the page?

You can simply put return false on your markup of form.
<form onsubmit="function(); return false;">
Otherwise changing the button type to "button" instead of "submit" also should work.

Why isn't the submit button included in the post when submitting a form with jquery

When a form is submitted with a button click or by pressing enter, the submit button is included in the posted fields. However if the form is submitted with jquery($('#some_form').submit();), the submit button isn't included. If a click event is triggered on the button, it's included in the posted fields.
Is this behavior normal? Is there a way to include the button in the submitted fields by using the submit method?
**EDIT: ** As #Pointy stated in the comments:
An "Enter" from an input field can cause a submit; the rules for that are somewhat complicated. Usually it has to do with how many input fields there are (like, just one, or more than one).
So apparently not every time when enter is pressed the form is submitted, but I couldn't find any info about it. Could someone post a link, or explain these rules about what triggers the form submission and which form fields are included?

You could do something like this: https://jsfiddle.net/6smh74s9/2/
Javascript
$('form').on('submit', function(e) {
e.preventDefault();
var data = [];
$(this).find(':input').each(function () {
if (this.name) {
data.push({ name: this.name, value: this.value });
}
});
$('div').html($.param(data));
});

Catch submit event, validate and if o.k. continue to submit the form

It seems like something what supposedly looks very easy to implement is not possible.
I want to catch the submit event from a form and do some validation first. If the validation is done, I want to continue to submit the form.
$('#myform').submit(function(e){
e.preventDefault();
var valid = true;
//- do some validation magic
if(valid){
$(this).submit();
// $('#myform').submit(); // does not work as well
}else{
//- give feedback
$('#error').fadeIn();
}
})
That last part seems to be the issue; while triggering the submit event on the form when valid brings the script in an infinite loop.
Off course I can wrap everything in an AJAX call, but I prefer to just 'plain-simple' submit the form.

So only prevent the submission when it fails, there is no need to resubmit.
$('#myform').submit( function (e) {
var valid = true;
//- do some validation magic
if (!valid) {
$('#error').fadeIn();
e.preventDefault();
}
});

HTML5 Form required field with normal button (not Submit)

I have some form fields and a Save button (not Submit type). I want to implement the HTML5 required validation
using
However it seems to work only with Submit button and not with normal button.
I cannot use Submit button, since I have custom code on my Save button
$("#saveForm").click(function(){
saveFormData();
showView('detailsView','editView');
setFormFieldValues();
})
How can I achieve the same with normal button ?

I think you can use submit button. just add return false at the end like this :
$("#saveForm").click(function(){
saveFormData();
showView('detailsView','editView');
setFormFieldValues();
return false; //stops the form being submitted
})

It's better to add your custom code to the submit event of the form:
$("form").on("submit",function(event){
saveFormData();
showView('detailsView','editView');
setFormFieldValues();
});

You could use form submit event and prevent the default behavior (posting to server) using e.preventDefault();
$("form").on("submit",function(e){
e.preventDefault();
saveFormData();
showView('detailsView','editView');
setFormFieldValues();
});

How is this?
$("#saveForm").click(function(event){
var emptyFields = $('input').filter('[required][value=""]');
if (emptyFields.length === 0) {
/* valid code here */
} else {
/* invalid code here */
event.preventDefault(); // this stops the click event;
}
}
You can loop through the empty fields using emptyFields.each()

On submitting a form, check for a value that, if present, opos up a modal window for more info

I have a form that uses jQuery Validate. You click the Submit button, form gets validated and submitted via ajax. I want to add a step to this process.
I want to check for the presence of a value, say x. If x is NOT in the form I want to go ahead and submit it as I already do. If it IS in the form I want to open a modal window that requests further info THEN submits the form with that extra info added into the request.
Currently I can get the modal to trigger but then the form just continues with the submission. How do I get the form submission to pause while the modal is dealt with by the user?
jQuery Validate has a "success" option that is called after successful validation (which is when I want to check for triggering the modal) but that still doesn't pause execution.
In a nutshell: How do I validate a submitted form, check if the value x is present, if it is not present submit the form but if it is present pause the submission, pop up a modal window, let the user fill in some more data (and presumably click a "done" or "cancel" button of some sort), add that to the collected form data and then submit the lot? The pausing submission part has me stumped.

Use submit() on the first form...
$('#form1').submit(function() {
// The below validation goes in here
});
Validate it...
$("#form1").validate({
// Whatever rules you want to validate by
});
Check if the form is valid...
if($('#form1').valid()) {
// Branching on x, example below, will go in here
} else {
// It's not valid, stop the submission
return false;
}
Branch on x. If present, open the modal, if not return true to submit the form as is
if (x !== undefined) {
// Here is where you also need to pass the other form data to the modal
// append hidden text fields to the form and populate with the values
// Open your modal window, then stop the default submit process
$('#themodalwindow').openModal();
return false;
} else {
// No x so submit the form as is
return true;
}
Now you have to submit the form in the modal...
$('#form2').submit(function() {
return true;
});
If you appended the data collected in form1 to form2 then submitting the form will include everything you need. BTW, you can cache some stuff in that but this is the gist of it.

You can't pause a form submit, but you can cancel it if you return false on the form's onsubmit event. After you get your additional data from the modal window, simply add the data to the form and resubmit it via javascript.

Hook onto the form's submit function:
$('form').submit(function() {
if (x !== undefined) {
$('#dialog').show();
return false;
}
});