I'm trying to disable all elements which has style display:none before submitting the form.
If there is e.preventDefault(), the form is not submitted at all and if there is no e.preventDefault() the infinite loop occures.
$(document).on('submit', 'form', function (e) {
e.preventDefault();
console.log($(':input:hidden').length);
$('#reservation-form > :input:hidden').attr("disabled", true);
$('#reservation-form').unbind('submit').submit();
});
Do you know what to do to make all display:none fields disabled before submitting this form?
You don't have to run $('#reservation-form').unbind('submit').submit();
Remove the e.preventDefault(); call and return true at the end of the function:
$(document).on('submit', 'form', function (e) {
console.log($(':input:hidden').length);
$('#reservation-form > :input:hidden').attr("disabled", true);
return true;
});
This should give you the behavior you want without having to bind and unbind events.
You are binding event to document level, so to unbind submit, you should unbind it at document level too.
That's said, the easiest method is to call instead DOM native submit() event:
$('#reservation-form')[0].submit();
BTW, for boolean attribute, better is to use .prop() even if in your case, it change nothing:
$('#reservation-form > :input:hidden').prop("disabled", true);
You are using the wrong selector to get the elements with input type hidden.
You should be using :
$('input[type=hidden]')
Documentation : Css Selectors
Related
I had button which had onclick function
<div id="canvas">
<button onclick="document.location.href='hello.php'">Go</button>
</div>
Now I want to stop this onclick event which redirects to hello.php, so I have written the following jQuery function
$("#canvas").on('click', 'button', function(event) {
event.preventDefault();
});
This didn't work so I added a return false but it's still not working.
$("#canvas").on('click', 'button', function(event) {
event.preventDefault();
return false;
});
You can view it at Jsfiddle
Note: I do not want to remove onclick of button
The correct solution is to remove the onclick from the HTML in the first place.
Assuming that's not possible, you can remove it after the fact:
$("#canvas button").first().prop("onclick", null);
That clears the onclick property on the element, which removes the handler set up by the onclick attribute. (It's a no-op if the button doesn't exist at all.)
It's probably worth noting that if the button is in a form, it will now submit the form, since its onclick isn't taking the user away from the page. (Since button's default type is submit.)
You should just use the removeAttr jQuery method:
$('#canvas button').removeAttr('onclick');
I have multiple forms on the same page with the class form_delete.
How do I iterate over those forms in jQuery adding a submit event that will uniquely apply to each form?
I've tried this using $('.form_delete').each(...); but when I add $(this).submit(...) events it's not working (event does not register).
Forms:
<form class="form_delete">
</form>
<form class="form_delete">
</form>
<form class="form_delete">keep adding n forms to infinity ;)
jQuery:
$('.form_delete').each(function() {
$(this).submit( function(event) {
// Nothing gets registered here
});
}
$('.form_delete').each(function() {
$(this).on("submit", function(e) { // submit button pressed
// prevent form from doing what it normally does when submit button is pressed
e.preventDefault();
// do anything else that you want to do when the submit button is pressed
alert( "Hi");
});
});
jQuery's event delegation is also an option.
$('body').on('submit', '.form_delete', function submitCB(e) {
e.preventDefault();
});
When the event bubbles up to the body then jQuery will check the target element against the string selector (parm 2), and only call the callback (parm3) if it matches.
This way you only have on event listener on the page, as opposed to many.
I don't know why you use .each(); anyway if all forms with same class just use
$('.form_delete').on('submit',function(e){
e.preventDefault();
alert($(this).index());
return false;
});
in that case you will need something like data-selectForm to define which form you submited
<form class="form_delete" data-selectForm="firstform">
</form>
<form class="form_delete" data-selectForm="secondform">
</form>
and then use
$('.form_delete').on('submit',function(e){
e.preventDefault();
alert($(this).data('selectForm'));
return false;
});
I have a form that I don't want to be submitted the first time submit is clicked, but the second time it should work like a normal submit. So I added a not-submittable class to the form on load, then after the first click remove that class... which should (I think) make it submit normally. But, this doesn't happen. The first click works as expected, removes the class and changes the button text. The second click, however, does the exact same thing. So, what am I missing here?
jQuery:
$('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').addClass('not-submittable');
$('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE.not-submittable').click(function(event) {
$('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').removeClass('not-submittable');
$('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').val('Continue');
$('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').removeAttr('disabled');
return false;
});
Pre-javascript button:
<input type="submit" class="Button" value="Submit Survey" id="ACTION_SUBMIT_SURVEY_RESPONSE" name="ACTION_SUBMIT_SURVEY_RESPONSE">
Quote OP: "I have a form that I don't want to be submitted the first
time submit is clicked, but the second time it should work like a
normal submit."
Use jQuery .one() to block the submit on first click only.
http://api.jquery.com/one/
$('#ACTION_SUBMIT_SURVEY_RESPONSE').one('submit', function(e) {
e.preventDefault();
// do what you need to do on first click
}
Alternatively...
$('#ACTION_SUBMIT_SURVEY_RESPONSE').one('submit', function(e) {
e.preventDefault();
// do what you need to do on first click
if ( some-condition ) { // under certain conditions allow submit on first click
$(this).submit();
}
}
Instead of using .click(), try using the .on() and .off() methods to bind and unbind the event. In your case:
$('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE.not-submittable').on("click.stopSubmit", function(event) {
$('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').removeClass('not-submittable');
$('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').val('Continue');
$('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE').removeAttr('disabled');
if (...conditions are met.....) {
$('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE.not-submittable').off("click.stopSubmit");
}
return false;
});
You may notice that the first parameter of the .on() method is the string representation of the handler, but that I appended the namespace ".stopSubmit". Namespacing your handlers allows you to unbind one specific click handler, rather than all click handlers. The best part about this is that if there is code in your original handler that you still want to use you can make a separate click handler to run that code, and it will not be unbound when you unbind the ".stopSubmit" handler.
Please note that .on() and .off() are the recommended bind/unbind methods - jQuery no longer recommends .bind() and .unbind().
UPDATE
After reading your comment about not unbinding until after certain conditions are met, I would would like to point out that you can insert the .off() call in a conditional. I have updated the code to reflect this.
You can do something like this
$(document).ready(function () {
$('#ACTION_SUBMIT_SURVEY_RESPONSE').click(function (event) {
if (!$('#ACTION_SUBMIT_SURVEY_RESPONSE').hasClass(".not-submittable")) {
//do all conditions you wish on first click
//if condidition meets add this class to button
$('#ACTION_SUBMIT_SURVEY_RESPONSE').addClass(".not-submittable");
//stop form submit
event.preventDefault();
}
else {
//calls when button have .not-submittable class may be second or any no of clicks
$('#ACTION_SUBMIT_SURVEY_RESPONSE').removeClass('not-submittable');
$('#ACTION_SUBMIT_SURVEY_RESPONSE').val('Continue');
$('#ACTION_SUBMIT_SURVEY_RESPONSE').removeAttr('disabled');
//commented return false so form submits normally
}
});
});
If there are certain criteria that must match use this where submitable contains your logic what makes it possible to send the form:
var submit = $('form#survey_7042 #ACTION_SUBMIT_SURVEY_RESPONSE');
submit.addClass('not-submittable');
submit.click(function(event) {
if (true == submitable) {
submit.removeClass('not-submittable').val('Continue').removeAttr('disabled');
submit.unbind();
event.preventDefault();
}
});
i have a form that when submitted, if any field is empty id like to prevent the submission and add a class to the field.
For some reason I cant seem to get it too work, Ive added a fiddle, can anybody point out where im goign wrong?
http://jsfiddle.net/yycqW/
There are a couple of problems with your fiddle. Firstly, you haven't closed the ready event handler. Secondly, are passing $this into jQuery which is undefined. You need to pass this instead.
Finally, the form is always going to be submitted because you have to actually stop the submission. You can call the preventDefault method of the event object to do so. Here's a new version of your code:
$(document).ready(function(){
$("#form").submit(function(e) {
$('input').each(function() {
if ($(this).val() == '') { //Pass this into jQuery, not $this
$(this).addClass('highlight');
e.preventDefault(); //Stop the form from submitting
}
});
});
});
Also note that it's unnecessary to use $(this).val() inside the each loop. this will be a reference to a DOM element, and that element will have a value property, so it's more efficient to simply use this.value.
You're not stopping the form from actually being submitted and thus it still gets posted (and thus immediately dropping your highlights). Try adding the preventDefault method to your form and manually submit after checking for errors.
Apart from not calling preventDefault, you are using $this instead of this in one place and the brackets don't match. Working version:
http://jsfiddle.net/yycqW/7/
$(document).ready(function() {
$("#form").submit(function(e, a) {
$('input, textarea', this).each(function() {
if (!$(this).val()) {
$(this).addClass('highlight');
e.preventDefault();
} else($(this).hasClass('highlight')) ? $(this).removeClass('highlight') : false; // remove class on valid
});
});
});
Rather than preventDefault(), returning false in the function that calls the form when submitted also prevents submitting. In the previous answer, let's think that there are more than one empty fields, preventDefault() will be unnecessarily fired more than once.
I would use something like this as a cleaner solution:
$(document).ready(function(){
$("#form").submit(function(e) {
var submit=true; //A flag that we'll return
$('input').each(function() {
if ($(this).val() == '') {
$(this).addClass('highlight');
submit=false //Setting the flag to false will prevent form to be submitted
}
});
return submit;
});
});
I got a button:
Whenever I click on it, it submits to a form.
I want to hijack this behavior, so when I click, it calls a JS function instead. How do I do this? I added:
$('input.submit').live('click', addFood);
The problem is it still submits to the form. When I remove "type="submit", it works.
I don't want to remove the HTML code. it'a also bound to CSS, and I don't want to change CSS because I'm afraid of messing it up =)
So question is: how do to change behavior of submit button so it doesn't submit to form but calls my Javascript (JQuery) function?
Target the form instead, not the submit button
$("form").submit(function(e) {
e.preventDefault();
e.returnValue = false;
// do things
});
Just for the sake of keeping this answer updated change :
$("form").live('submit', function(e) {
e.preventDefault();
e.returnValue = false;
// do things
});
with :
$("form").on('submit', function(e) {
e.preventDefault();
e.returnValue = false;
// do things
});
$(selector).live() was deprecated in Jquery 1.7 and removed from the framework in Jquery 1.9.
Here´s the documentation