Develop Reference

click and mousedown events don't work on Ajax form

Simple Ajax popup with a form collecting 3 fields of data, and a submit button. I can't programatically trigger the submit button though.
jQuery('#FormSubmit').click()
doesn't work. Neither does
jQuery('#FormSubmit').mousedown()
nor
document.getElementById("FormSubmit").click();
A real mouse click on the button works, but programmatically triggering it doesn't. It either posts the form in a non-AJAX way (page reload with post data appended to the url) or does nothing.
Anyone know the reasons why?
Is there something specific to Ajax to prevent this?
Edit:
Just tested triggering the submit event on the form instead, and that also posts the form in a non-AJAX way.

You need to use submit, or if you want you can write something like this:
`$('#formSubmit').on('click', function (event) {
event.preventDefault();
var input1 = $('#someInput1').val().trim();
var input2 = $('#someInput2').val().trim();
$.ajax({
url: 'someUrl',
type: 'POST',
success: function (result) {
//do something with the result
}
})
})`

try to use trigger, like this
jQuery('#FormSubmit').trigger("click");

Aweber form not collecting leads because of simple jquery code [duplicate]

I have a form that uploads a file and targets an iframe on the page. When the user clicks submit, I want the file contents to "clear" out.
I tried this
$('#imageaddform').submit(function(){
$('#imagefile').val('');
});
But it clears the form before the submit, so nothing is ever uploaded.
Is how do I clear after submit?

If you have no other handlers bound, you could do something like this:
$('#imageaddform').submit(function(e) {
e.preventDefault(); // don't submit multiple times
this.submit(); // use the native submit method of the form element
$('#imagefile').val(''); // blank the input
});

Lonesomeday's solution worked for me but for Google Chrome I found it would still submit empty form data unless I added a timeout like this:
$('#imageaddform').submit(function(e) {
e.preventDefault(); // don't submit multiple times
this.submit(); // use the native submit method of the form element
setTimeout(function(){ // Delay for Chrome
$('#imagefile').val(''); // blank the input
}, 100);
});

You could do something like this:
$('#imageaddform').submit(function(){
setTimeout(function() {
$('#imagefile').val('');
},100);
});

How are u submitting the form? if this is normal form post then then page wont exist in that case i am wondering if u are looking to clear the form before the page refreshses so that when the user comes back he doesn't see the values populated.
If the form is submitted by ajax then you can
function(){
$('form1')[0].submit();
clearForm();
}
Did i miss the question?

Hiding And Submitting A Form Using jquery

How to Hide a form and submit that form using jquery?
Is this possible?

Yes, it is possible:
On your HTML page:
<form id="my-form">
</form>
Submit
Your script:
$(document).ready(function() {
$("a#submit").click(function() {
$("#my-form").hide();
$("#my-form").submit();
});
});
If your form contains a Submit button and you want the form to be hidden when the Submit button is pressed, instead you can listen to the submit event and handle it like this:
$("#my-form").submit(function() {
$(this).hide();
return true;
});

What are you trying to do? Some scam?
You can place the form in a hidden div and using $(document).ready event, you can autosubmit the form.

Do you mean a field within a form that already has data inserted, eg. hard-coded in by you, the developer?
If this is the case, just set an id to the input field, with the value hard-coded in. Then set it's display to 'none'. Use your Jquery to interpret the data as normal.
You could also just make a variable in your jquery script, and avoid all this.

Since you've added the jquery-ajax tag, I guess you want to submit the form through AJAX. In that case you are probably looking for something like this:
$("#your-form-id").submit(function(){
$.ajax({
type: "POST",
url: "some.php",
data: $(this).serialize(),
success: function(){
$("#your-form-id").hide();
}
});
return false;
});

Prevent submit while jQuery effect is running

I have this issue that when user clicks a button (in this case, a submit button) multiple times, jQuery will keep playing the animation effects until it has completed the count of clicks the user has imputed.
This can get quite overwhelming.
How can jQuery tell if it's currently executing an animation to a particular element, so I can prevent user from submitting while the elements effect is still in play?
Notes: the submit button is in a file. Form handling is relayed via AJAX this jQuery is inside the ajax called file.
Here is the main files code:
$('#login_form').submit(function(e) {
$.post(
"ajax.php",
{ user: $('[name="username"]').val(), pw: $('[name="password"]').val() },
function(resposeText) { $('#login_form_response').html(resposeText); },
"html"
);
e.preventDefault();
});
Here is the code (in ajax'ed' file):
$('#login_form_response').html('Username or Password is inaccurate!')
.slideDown()
.delay(3500)
.slideUp(1500);

You could unbind the event-handler just before starting the animation, and in the callback function of the animation, just bind the handler again.
$('#button').unbind('click');
$('#animated_element').animate({ animation, stuff}, 1000, function(){
$('#button').bind('click', handlerFunc);
});
Note:
This is a way to prevent submitting when you are using a customized button (div, or a link), which has an event handler binded to it. It does not work on pure html <input type="submit" /> - buttons, because after unbinding, the standard-submit is going to take effect.
I prefer to use customized buttons, mainly because of styling (especially for IE7 and such).
If you want to use a pure html-submit button, you'll have to disable the button (and disabling submit over "enter") or set a flag, that prevents submitting, as other users have already stated in their answers!

Disable the submit button until the animation finishes.
$('animatingElementSelector').animate({height: 200px;}, slow, function() { //ENABLE BUTTON HERE });

var isAnimationRunning;
jQuery('#myForm').bind('submit',function(e){
if(isAnimationRunning)
{
e.preventDefault();
}
});
Create a variable isAnimationRunning let it know, animation running or not. If running then ignore submit.
http://jsfiddle.net/praveen_prasad/cfvRf/
On demo click start animation and then try to submit!!
Edit 1
Some ppl have suggested unbinding click of submit button, that wont work. If a submit button is inside a form, clicking it will submit the form, you dont bind click event to submit form, its just pure html, so unbinding wont help in stopping submit event. check this demo
Edit 2
Some ppl have suggested disable the submit button during the animation. That wont always work either, consider a situation where user types something in text box and press enter key, form will be submitted(some browsers will) regardless of submit button being disabled.

Just add disabling button when it clicked :) or hide... or both of this... hide and disable

Try this:
$('#login_form').submit(function(e) {
$('input[type=submit]', this).attr('disabled', 'disabled').attr('style','opacity: 0.5; filter: alpha(opacity = 50); ');
$.post(
"ajax.php",
{ user: $('[name="username"]').val(), pw: $('[name="password"]').val() },
function(resposeText) { $('#login_form_response').html(resposeText); },
"html"
);
e.preventDefault();
});

Problem with disabling submit buttons on form submit

I am using the jQuery disable on submit plug-in but I have a problem. If I disable the submit buttons they don't get passed back to the server so I cant tell which button was pressed. Is this normal? Is there anything I can do about it?
I really don't want to retool my web site so I have to set a variable on form submission to tell which button was pressed.
Any ideas?

How to Disable the Submit Button of a Web Form
This method hides the button instead of disabling it, and programmatically inserts a disabled <button> tag to make it appear just like the submit button was disabled. Works great.

Here's a workaround I just found in a jQuery forum:
<script type="text/javascript">
$(document).ready(function() {
$("#sendSearch").click(function() {
$('#loadingDiv').show();
$('#sendSearch').attr("disabled", "disabled");
// these two lines are the workaround
this.form.submit();
return true;
});
});
</script>

You could do the submit via jquery and disable the button afterwards:
<input type="submit" value="do it!" onclick="$('#mainform').submit(); $(this).attr('disabled','disabled' ); $('#pleasewait').show();" />
EDIT:
I forgot form.submit() is not asynchronous. You can do an ajax request instead:
$.ajax({
url: "someurl",
type:"POST",
cache: false,
dataType: "json",
success:gotIt,
async:true,
timeout:240000,
error:ajaxError,
data:$("#mainform").serialize()
});
or you could just .hide() the button, or after clicking it setting a non-functional onClick() handler and styling it to look disabled.

Be more simple :)
var formid="#id-form-if-exists"; //Put here the id if exists
$("form"+formid).submit(function(){$("form"+formid+" input").attr("disabled",false);});
YEAH