how to submit a form based on any input with jquery - javascript

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

Related

Is there any way to auto submit gravity form according to radio button selection

I am setting up a new gravity form, where i need to get auto form submission trigger when someone click on radio button "No".
here is my form - https://wpskillguru.com/test/
I added below code in theme's "function.php" file
add_filter( 'gchoice_22_1_1', 'add_onclick', 10, 2 );
function add_onclick( $button, $form, $radio ) {
jQuery(document).ready(function(){
jQuery('form#gform_22_1_1').trigger('gform_submit_button_22');
});
but don't know how to set "onclick event" in Radio button
Is there anyone who can help me?
You can use .on() method and attach the event handler with it. You can read more about it here
$(".ginput_container_radio").on("click", "input[value='No']", function(){
alert("No select!");
// your code here
});
or
$(".ginput_container_radio").on("change", "input[value='No']", function(){
alert("No select!");
// your code here
});
Note: The ginput_container_radio is taken from the radio buttons at https://wpskillguru.com/test
To submit the form after clicking a Gravity Forms Radio Button you can use the following code:
$( '.ginput_container_radio input' ).on( 'change', function() {
$( '#gform_GFFORMID' ).submit();
} );
The best way to install this code is the free Gravity Forms Custom JavaScript plugin.
If you're looking for a way to auto-submit a form without any code, check out our GF Page Transitions add-on.

Yii, attaching a javascript function on submit button

I want to attach a function to my submit button. But my code doesn't seem to be calling the function.
Basically what I want it to do is, enabling all disabled field when the form is being submitted.
This below is my code:
<script>
function enableField() {
$("#Booking_clientPackagedService_id").prop("disabled", false);
}
</script>
<?php
echo CHtml::submitButton(Yii::t('app', 'Save'));
$this->endWidget();
?>
This #Booking_clientPackagedService_id initially is disabled after certain action being done. But when I click on submit, I would like to enable the field. How can I do it? Please advise, thanks! :D
EDIT
So I've removed onclick event on my submit button and added as per Kancho Iliev's comment.
$( "#booking-form" ).submit(function() {
$("#Booking_clientPackagedService_id").prop("disabled", false);
});
But it is still not working. Where have I missed out?
Remove onclick event, and add
$("your_form_name").submit(function(){
enableField();
});
This is the correct way of attaching a submit function:
$(function() {
$("#formName").submit(function() {
alert("hi");
//do whatever
});
});

Don't show the #loading if the <input> is empty

Demo - jsfiddle.net/75CqW/
When someone clicks the Submit button, it shows the loading div even if the input is empty.
I don't want the user to see the #loading if he didn't write anything in the input, I've tried to add "required" in the input but the #loading is still showing when the input is empty. What do you think is wrong with my loading div?
Thanks in advance.
Instead of click handler use submit handler for the form - the form validation are triggered on form submit not on submit button click
$(function () {
$("#myform").submit(function () {
$("#controller").hide();
$("#loading").show();
});
});
Demo: Fiddle
Note: You might want to prevent the default action of submit event so that the default form submit is prevented - if you are using ajax to do server side processing
try this
var id = $("#statusid").val();
if (id.length == 0)
{
return false;
}
You need to test for a value (or run a validation check) on the field(s) before firing off the processing code
$(function() {
$(".submit").click(function() {
if $('#statusid').val() {
$("#controller").hide();
$( "#loading" ).show();
}
});
});

Dynamically added input to form doesn't validate after first validation

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.

Submit Form for select option.onClick

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

Categories