We Keep Coding

jQuery submit form by clicking link issue

I'm trying to submit a form by clicking on a link. I disabled the redirection, but for some reason .submit() is not working...
Here is what I have tried:
Effect: redirection stops, no form submission, no error message, stuck on the form page:
$('.jsubmit').click( function(e) {
e.preventDefault();
$('form#fadmin').submit();
});
Effect: URL redirection, form not submitted, no error message
$('.jsubmit').click( function(e) {
$('form#fadmin').submit();
});
Effect: redirection stops, no form submission, no error message, stuck on form page:
$('.jsubmit').click( function(e) {
$('form#fadmin').submit();
return false;
});
The form:
<form action="" method="post" name="fadmin" class="inputform" id="fadmin">...</form>
And a bunch of other combination including trigger(), reversing the preventDefault() with unbind(). The only way I was able to submit the form was to trigger a click on the submit button but that is not really a solution in my case, because I need to use this on multiple pages and adding the button then hiding it is not something I would like to do on every page...
I have tried to run them in Firefox and IE with the same result.
Some other JS, jQ codes being used are: default bootstrap and respond provided by ZendFramework2 and ZFTables.
Any help would be much appreciated!
EDIT:
The form had the following submit button:
<input id="mysubmit" type="submit" value="Register" name="submit" />
After removing this my first example above worked perfectly.
Strange because there was no other forms or submit buttons on the page and nothing with the same name, id, type...

The issue is probably that you are trying to call submit() on a jQuery object, not the form DOM element.
Try this as your second line of code:
$('form#fadmin')[0].submit();

Bootstrap form input: prevent submit, but allow for input checking

I've got the following problem:
I use bootstrap form to take input from users, and I use jQuery preventDefault() to disable the submit button from sending the form (I use AJAX instead). However, that function also prevents input checking that is done by bootstrap. For example, if someone enters an e-mail without '#' into
<input type="email" class="form-control">
bootstrap would, upon clicking submit, check that input and return a popup with an error.
My question is: how to prevent the request being sent while keeping the bootstrap form checking mechanism intact?
What I have tried: using preventDefault() and writing my own checking script, however this seems like reinventing the wheel and having extra code when it's not needed.
Thank you!

I believe you are talking about the native HTML5 form validation and not validation by bootstrap its self, I have never come across bootstrap validation before. (i may be wrong though).
Most new browsers will validate <input type='email'/> as an email address and <input type='text' required='required'/> as required on form submission.
If for example you are using e.preventDefault(); on the click event on the submit button the form will never attempt to submit and hence the native validation will never happen.
If you want to keep the validation you need to use e.preventDefault(); on the submit event of the form not the click event on the button.
The html...
<form action='' method='post'>
<input type='email' name='email' required='required' placeholder='email'/>
<button type='submit'>Submit</button>
</form>
The jQuery...
//this will stop the click on the button and will not trigger validation as the submit event will never be triggered
$("button").on('click',function(e){
e.preventDefault();
//ajax code here
});
//this will stop the submit of the form but allow the native HTML5 validation (which is what i believe you are after)
$("form").on('submit',function(e){
e.preventDefault();
//ajax code here
});
Anyway hope this helps. If I have misunderstood in any way let me know and ill try to assist further.

I had the same issue, I came to use "stopPropagation" as the way to stop the form submission. But after a little reading on jQuery 3, I realized that "preventDefault" was enough to what I wanted.
This caused the form validation to happen and the submit event didn't proceed.
(This example is of an attempt i had on my own).
$('form').on("submit",function( event ) {
if ( $('#id_inputBox_username').val().length == 0 &&
$('#id_inputBox_password').val().length == 0 ) {
event.preventDefault();
$('#id_inputBox_username').tooltip('show');
$('#id_inputBox_password').tooltip('show');
} else if ( $('#id_inputBox_username').val().length == 0 ) {
event.stopPropagation();
$('#id_inputBox_username').tooltip('show');
} else if ( $('#id_inputBox_password').val().length == 0 ) {
event.stopPropagation();
$('#id_inputBox_password').tooltip('show');
}
});

I had the same problem and I find this solution:
$('#formulario').on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
e.preventDefault(); //prevent submit
$(".imprimir").show();
$(".informacao").fadeOut();
carregardados();
}
})

jQuery - Change html of a submit button on submit event

What I want to do is pretty simple.
I've a form, with a submit button
<form accept-charset="UTF-8" action="/some_url" id="some-form" method="post">
...
<button class="btn" id="remove-selected" type="submit">Send</button>`
</form>
I want to change the html of the button with jQuery when the form is submitted but can't achieve that, seems like the form submission occurs before I can change it.
My code right now, dead simple:
$("#some-form").on("submit", function(e) {
$("#remove-selected").html("Sending...");
});
Thanks for advises!

Your stuff seems working for me, just submit the form via JS to have more control about the sequence and error cases.
$("#some-form").on("click", function(e) {
e.preventDefault();
$("#remove-selected").html("Sending...");
$(this).submit();
});
http://jsfiddle.net/GDAhe/1/

$("#remove-selected").click(function(){
$(this).html("Sending...");
});

You code is correct, you may have forgotten to embed it inside a $(document).ready() method.

jquery post works only after alert

I have function that submitted two forms at once. And last (the second) post method does not take effect without alert().
Could you please show me my mistake.
function formFunction() {
...
$.post($("#form1").attr("action"), $("#form1").serialize() );
$.post($("#form2").attr("action"), $("#form2").serialize() );
//alert('done');
}
UPD
this is how function is calling
<form id="form0" name="form0" onsubmit="formFunction()">
<input id="mainFormValue" type="text">

The reason why it is failing is you are not cancelling the original form submission. That means the page is posting back to the server when you click the button. What you need to do is prevent that origial form submission from completing.
If you are adding the event handler with jQuery, you can use preventDefault() to cancel the form submission.
function formFunction(e) {
e.preventDefault();
$.post($("#form1").attr("action"), $("#form1").serialize() );
$.post($("#form2").attr("action"), $("#form2").serialize() );
}
Change the form submission to unobtrusive JavaScript to get the correct event object set by jQuery.
$("#form0").submit(formFunction);
The other solutions is add a return false to the submisison. Just ignore the preventDefault line I suggested above. [bad idea, but will work]
<form id="form0" name="form0" onsubmit="formFunction(); return false">

2 jQuery events on same action seem to cancel each other

**Update: I have pasted working code in order to erase any ambiguity about what is going on. I have also tried to remove the preventDefault on both handlers, does not help*
I have a form where upon the button click, a JS event needs to happen, and the form needs to submit.
As per the code below, what I thought would happen is: alert(button), then alert(form), or vice versa. I do not care about sequence.
If i run it however, the alert(button) will show up, but the alert(form) will not.
If i comment out the code for the button, the form alert comes up.
Do i have some fundamental misunderstanding of how this is supposed to work?
jQuery(document).ready(function(){
$("form.example").submit(function(event){
event.preventDefault();
alert("form submitted");
});
$("form.example button").click(function(event){
event.preventDefault();
alert("button clicked");
});
)};
<form class="example" action="/v4test">
<button type="submit">Meow!</button>
</form>

After edit of OP
You do not need to preventDefault of the click.... only the submit... here is you working code:
jsFiddle example
jQuery(document).ready(function(){
$('form.example').submit(function(event){
event.preventDefault();
alert("form submitted");
// stop submission so we don't leave this page
});
$('form.example button').click(function() {
alert("button clicked");
});
});​
old answer
You can simply put your .click() and .submit() handlers in series, and they should not cancel out. You have some syntax errors in your pseudo code.... maybe those are causing problems?
Another potential problem is that $("form button") targets the HTML <button> tags. If you use <input type="button" /> you should use $("form:button") and note that <input type="submit" /> is not a button. Anyway, I'll assume you are in fact using the <button> tags.
Usually return false is used inside .submit(function() { ... });. This stops the form from being submited through HTML. s**[topPropagation][6]** is very different. It deals with stopping events "bubbling up" to the parents of elements....... But I don't see how this would effect your case.
If you are doing a true HTML submission, make sure to put your .click() handler first, since a true HTML submission will cause you to leave the page.
If you use return false inside .submit(), the form will not be submitted through the HTML, and you'll have to handle the submission with jQuery / Javascript / AJAX.
Anyway, here is a demonstration of both the .click() and .submit() events firing in series... the code is below:
jsFiddle Example
$(function() {
$('form button').click(function() {
// Do click button stuff here.
});
$('form').submit(function(){
// Do for submission stuff here
// ...
// stop submission so we don't leave this page
// Leave this line out, if you do want to leave
// the page and submit the form, but then the results of your
// click event will probably be hard for the user to see.
return false;
});
});​
The above will trigger both handlers with the following HTML:
<button type="submit">Submit</button>
As a note, I suppose you were using pseudo code, but even then, it's much easier to read, and one is sure you're not writing syntax errors, if you use:
$('form').submit(function() { /*submits form*/ });
$('form button').click(function() { /*does some action*/ });

If you put a return false on the click, it should cancel the default behavior. If you want to execute one then the other, call $('form').submit() within the click function. e.g.
$('form').submit { //submits form}
$('form button').click {
// does some action
$('form').submit();
}

There seems to be a bit of confusion about propagation here. Event propagation (which can be disabled by stopPropagation) means that events "bubble up" to parent elements; in this case, the click event would register on the form, because it is a parent of the submit button. But of course the submit handler on the form will not catch the click event.
What you are interested in is the default action, which in the case of clicking a submit button is to submit the form. The default action can be prevented by either calling preventDefault or returning false. You are probably doing the latter.
Note that in Javascript functions which do not end with an explicit return do still return a value, which is the result of the last command in the function. You should end your click handler with return; or return true;. I have no idea where I got that from. Javascript functions actually return undefined when there is no explicit return statement.

Does clicking the button submit the form? If so:
// Disable the submit action
$("form").submit(function(){
return false;
});
$("form button").click(function(){
// Do some action here
$("form").unbind("submit").submit();
});
If you don't unbind the submit event when you click the button, the submit will just do nothing.