How would I submit a form when the user clicks an option using jQuery? I found one similar question using the datepicker text input but I'm not that familiar with jQuery so I can't seem to convert it to work for a select item.
On click of an <option>:
$('option').click(function ()
{
$(this).closest('form').submit();
});
On change of a <select> (this is probably the one you want):
$('select').change(function ()
{
$(this).closest('form').submit();
});
As #Guffa commented:
The click event on options doesn't work in all browsers. Safari for example does't trigger it.
...so you definitely want the second one.
The click event on options doesn't work in all browsers. Use the change event of the select element.
Example:
$('select').change(function(){
this.form.submit();
});
Note that the submit event of the form is not triggered when you call the submit method to post the form.
A small correction of these answers:
$(document).ready(function() {
$('#some_link').click(function() {
$('#form_id').submit();
});
});
$('select').change(function() {
$('form').submit();
});
$('#option').click(function () {
// form validation and such then
$('form').submit();
})
This is the easiest way i can think of
UPDATE:
for specific form, you can use its name or id, it really depends on how your html looks like
$('form[name="formnamehere"]').submit();
I found the other answers helpful but to truly achieve what I needed of individual actions based on each option click this was exactly what I needed:
jquery: option plus class and click
Related
I am trying to write a code which will make HTML dropdowns readonly but not "disabled" because I want to capture the default values in current form that are coming from previous form.
I have written the below code which is working perfectly fine in Chrome but not working in IE. What could be the possible solution to this.
Below is the jquery code that I have written.
$("#Q4Q25xP1_1, #Q4Q25xP1_2, #Q4Q25xP1_3, #Q4Q25xP1_4, #Q4Q25xP1_5").each(function(){
$(this).on("mousedown", function(e){
return false;
}).on("change", function(){
$(this).find('option').each(function(i, opt) {
opt.selected = opt.defaultSelected;
});
}).css("background-color","grey");
});
Try this one, just disable options which are not selcted
$("#Q4Q25xP1_1,#Q4Q25xP1_2,#Q4Q25xP1_3").find("option").each(function () {
if ($(this).attr("selected") != "selected") {
$(this).attr("disabled", 'disabled');
}
});
and here is the jsfiddle for reference https://jsfiddle.net/3v0w9n3r/
And it works in all browsers including IE.
You can try setting the pointer-events to none using CSS:
<select style="pointer-events:none;">
....
$("#Q4Q25xP1_1, #Q4Q25xP1_2, #Q4Q25xP1_3, #Q4Q25xP1_4, #Q4Q25xP1_5").each(function(){
$(this).attr('disabled','disabled');
}
"Change" event is not consistent in browser,In Firefox and Chrome it work properly
but in IE need to clicked TWICE, first to remove "indeterminate" state, then again to fire the change event. so you need to use trigger click event to click second time so event initialize and work.
So you need to use trigger mousedown for second time apply mousedown event on same element than change event work properly
How can I listen to all inputs in a form so when there is an input on any of the form fields, it submits the form.
The Form fields could be a checkbox, text_field or anything of sort. I am not a javascript expert. Thanks for your help
Example
$(function(){
$('#new_search_form').on('...', function(){
$(this).closest('form').submit();
});
});
$(function(){
$('#new_search_form').on('change',function(){
$(this).closest('form').submit();
})
})
This one will fire if ANYTHING on the form is changed including textareas, radios, checkboxes, inputs, selects.
Well you're pretty close with what you already have!
The property of on() that helps is the one called "change"
$(function(){
$('#search').on('change', function(){
alert("submit");
});
})
Here's a jfiddle that calls an alert everytime something changes! http://jsfiddle.net/nMPbp/1/
Try using 'change' event like this:
$(function(){
$('#new_search_form').on('change', 'input', function(){
$(this).closest('form').submit();
})
})
I have a form where I add some inputs dinamically.
Every time the user select another "fornecedor" from addMaterialFornecedor select I add a input for preco.
My problem is that when I click the button and call the validate() function http://js.sapo.pt/SAPO/Ink/FormValidator/doc.html if I selected the "fornecedor"s before I click the button validate the form but if I click the button, selected the "fornecedor"s, and click again it will not validate :s
http://jsfiddle.net/rVQB4/3/
the javascript code I'm using:
function formValidate(form){
if(!SAPO.Ink.FormValidator.validate(form, options)){
//some debug
console.log(form);
return false;
}else{
//some ajax calls
return false;
}
}
Here is a video that exlain better the problem: https://dl.dropbox.com/u/6416035/stack3.ogv
sorry my english :s
thanks :)
Livequery works wonders for items dynamically added to a webpage by binding events to events dynamically added to the DOM. If this binding doesn't take place, events won't fire for those dynamic objects.
Here's an example:
$(document).ready(function() {
$("#myDynamicObject").livequery(function() {
$(this).change(function() {
// Do something.
});
});
});
See here for more information on how to use livequery.
I'm using asp.net MVC and when I submit a form, a previous developer had embedded some jQuery validation.
$('form').submit(function() {
...code done here to validate form fields
});
The problem is that both the "Save" and "Cancel" buttons on the form fire this submit jQuery function. I don't want the validation logic to fire if the "Cancel" input button was fired (id="cancel" name="cancel" value="cancel").
Is there a way that, within this submit function, I can retrieve the ID, name or value of which input button was pressed to submit the form?
I asked this same question: How can I get the button that caused the submit from the form submit event?
The only cross-browser solution I could come up with was this:
$(document).ready(function() {
$("form").submit(function() {
var val = $("input[type=submit][clicked=true]").val()
// DO WORK
});
$("form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
Not sure if its the answer you're looking for but you should change the "Cancel" button to an anchor tag. There's no need to submit a cancel unless you're doing work on the form values.
well this will only fire if the type of the input button is like so:
<input type='submit' ...
so make sure the cancel button does not have type='submit' and it should work
EDIT
This only works in FF and not in Chrome (and I so, I imagine, not in other WebKit based browsers either) so I'm just leaving this here as a browser specific workaround, an interesting note but not as the answer.
#Neal's suggestion of NOT making the cancel button of type submit is probably the cleanest way. However, if you MUST do it the way you are doing it now:
$('form').submit(function(e){
if(e.originalEvent.explicitOriginalTarget.id === 'cancel'){
//don't validate
}
else{
//validate
}
});
var myForm = $('form');
$('input[type="submit"]',myForm).click(function(e) {
var whoClickedsubmit = $(e.target); //further, you can use .attr('id')
//do other things here
});
EDIT
.submit(function(event){
var target = event.originalEvent.explicitOriginalTarget.value;
//But IE does not have the "explicitOriginalTarget" property
});
I'm using the jQuery validation plugin to validate a form, and I'd like to remove the validation and submit the form if a certain link is clicked.
I am submitting form with javascript like jQuery('form#listing').submit(), so I must remove the validation rules/function with javascript.
The problem is that I can't figure out how to do this. I've tried things like jQuery('form#listing').validate({}); and jQuery('form#listing').validate = null, but with no luck.
Trigger the DOM submit method to skip the validation:
$("#listing")[0].submit();
You can remove events of nodes with unbind:
jQuery('form#listing').unbind('submit'); // remove all submit handlers of the form
What you are probably looking for is that the validation plugin can also unassign itself from the submit event:
jQuery('form#listing').validate({
onsubmit : false
});
For both of these you should be able to follow up with a call to .submit() to submit the form:
jQuery('form#listing').unbind('submit').submit();
var form = $('#my_form_id').get(0);
$.removeData(form,'validator');
Is really working.
You can also use the public "rules" function in this way:
$('input, select, textarea').each(function() {
$(this).rules('remove');
});
That's what I'm using ;)
You can add a css class of cancel to an element (button, input) so that it skips the validation
I have found none of the other ways helpful if you wanted to toggle on/off your forms validation (e.g. different validation for payment types...)
What I have had to do (this is not an nice fix but it does work)
Set up your validation:
jQuery('#form').validate();
Disabling the form:
jQuery('#form').validate().currentForm = '';
Enabling the form again:
jQuery('#form').validate().currentForm = jQuery('#form')[0];
This seems to work for me now:
var form = $('#my_form_id').get(0);
$(form).removeData('validate');
$("#formName").validate().settings.ignore = "*";
Refer : https://github.com/jzaefferer/jquery-validation/issues/725
I recently upgraded to 1.5.5 of Jörn's validator script and the removeValidator function has been deprecated.
...
jQuery.extend(
jQuery.fn,
{
removeValidator: function(){
this.unbind();
jQuery.removeData(this[0], 'validator');
}
...
For all the tags input of form:
$('#myform').validate().settings.ignore = '.valid';
$('input').addClass('valid');
It works for me.
in 2022
the answers above do not work now for me,
So I've written this js method, this would remove the jquery validation correctly
function RemoveJQVRule(rulename, inputname) {
$(`[name="${inputname}"]`).rules('remove', rulename);
$(`[name="${inputname}"]`).removeAttr(`data-val-${rulename}`);
// message span element
$(`#${inputname.replace(/\./img, '_')}-error`).html("");
$(`[data-valmsg-for="${inputname}"]`).html("");
}
Examples:
RemoveJQVRule('required', 'Shipper.Contact.NationalId');
RemoveJQVRule('maxlength-max', 'SomeInputName');
RemoveJQVRule('regex', 'SomeInputName');
Note:-
if it does not work you may need to edit it a little bit (the css selectors)
Thanks