We Keep Coding

how to get return value after form submit

I want to get the return value for hid and show div after form submit success
<form id='form1' action='api.php' method='post'><input ></input></form>
<div id='layer1'></div>
I tried:
Js
$('#form1').submit(function(e){
e.preventdefault();
$('#layer1').show();
});
It doesn't work. Is there anythings that I should return in the api.php?
As I am using php5.2 I cannot using something like formdata to upload image when doing form submit.
Can anyone help?

Instead of using origin form submit, add a listener on event 'submit'(or just as you did, invoke .submit(), no difference), then prevent default behavior, do it using AJAX. See jQuery API

jquery form - two buttons - one to use ajax, one not

I have a form that I want to use jquery for validation of the form before I submit. If I click on one of the buttons, I have it save the data via an ajax call. For the other button I want to submit the form, but not have it go through ajax, just do a submit the old fashioned way and go to that page.
I had the submitHandler in my validate() function, which works great for doing the ajax stuff, but what about for the other button where I don't want to use ajax? Do I remove the submitHandler portion from the validate() function? If so, then how should I set up for using ajax? Do I put it in the event handler for the click on that button? If so, how should I set it up?

Can't you just create 2 different functions or just one parameterized with a boolean to indicate whether to send ajax request or just submit the form? the latter may be done using the JQuery submit function.

I think the best way is to bind a personal event
$('form').on('submitajax submit', function(e){
if(e.type === 'submitajax'){
//ajaxstuff
}
else{
//classic stuff
}
})
And your ajax button will trigger the submitajax event

Your validation function can be like this:
function bar( ajax )
{
var valid = true, fooForm = $('#fooForm');
// do validation stuff
if( !valid ) return;
if( ajax ){
$.post(fooForm.attr('action'), fooForm.serialize());
}else{
fooForm.submit();
}
}
And your buttons:
<input type="button" value="With Ajax" onclick="bar( true )" />
<input type="button" value="Old Fashion" onclick="bar( false )" />

You need check JavaScript events on submitting form.
Just consider form:
<form class="js-form">
<a class="js-save">Save</a>
<input type="submit" value="Submit"/>
</form>
$('.js-from').on('click', function(event){
if (event.target === event.currentTarget){
# Triggers on click submit input that triggers as part of form and target same
# Call ajax stuff
} else {
# Triggers on click link witch is fired as click as not a part of form
# Call other ajax or link stuff
}
});
One function for cheching if form submit on submit button or link that can do any thing other

I figured it out. In my ajax button click event handlers, I needed to add
event.preventDefault();
Then I could add the $.ajax() call to the one where I wanted to call ajax, and to the other one just did the submit normally.
Thank you for all of your responses, it was an interesting exercise and I learned a bit more about the intricacies of this type of coding.

Why is my form doing other things than what I told it to do on submit?

I've ripped some code from a website and I want to change the action of one of their input elements (since it was causing a Server Error). So what I did is change the action to "" and add onsubmit="myFunction()". What I have is like
<form method="get" name="formname" action="" onsubmit="myFunction()"> .... </form>
and
function myFunction()
{
alert("good, my function was called");
}
I've confirmed that when I click enter in the input, the alert function is called. However, the Sever Error that the form was causing is still happening after I click ok on the alert.
Any ideas on why this might be? Basically, I'm trying to make myFunction be the only thing that happens when the form is submitted.

Either you need to do preventDefault() or return false in submit function call, else it will do execute default behavior i.e. submit form.
Either do it like this.
function myFunction()
{
alert("good, my function was called");
return false;
}
And in calling function use return myFunction().
or use preventDefault

You are currently executing the default action. You can prevent that by returning false at the end of your function.

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();
}
})

Why does my form reload the page?

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.