submitting a form without hitting the update or submit button

Question

I have a form and i need to submit the form as soon as some change has been made to one of the fields in the form without having the user to click update or submit button.

I am familiar with AJAX and I can get the form to submit via AJAX using a button, but i now need to change this to submiting a form as soon as the user types something in one of the fields

At present I am putting the .keydown() on each input field although it works but this is making the script really long and i was wondering if there is a better way to handle it. This is what I am doing to individual fields to detect change

if ($("#some_field").length) {
    var timer = null;
    $('#some_field').keydown(function () {
        clearTimeout(timer);
        timer = setTimeout(update, 1000)
    });

    function update(){
        $.ajax({
            ...
            ...
            ...
    }
});
}
}

I will really appreciate any assistance here.

Please understand that i can get the form to submit via AJAX just fine, i just need to know how to detect a change in form fields so i can initiate the ajax call — Shairyar, Nov 14 '14 at 14:25
I am using timeout() so the ajax call is made after few seconds when the user stops typing — Shairyar, Nov 14 '14 at 14:26
@MIvanIsten to prevent the form from submitting after single key press, user needs chance to type a word/ sentence — andrew, Nov 14 '14 at 14:27
@MIvanIsten `.change` will only fire if the field is unfocussed, he doesn't want the user to have to click elsewhere i imagine — andrew, Nov 14 '14 at 14:28
the solution should detect the change on all fields of a form rather than a single field, i already have a solution which detects change by putting .keydown() on all ids of field, but this is making the script really long — Shairyar, Nov 14 '14 at 14:30
perhaps if you change your selector to `$('form input').keydown` then it will monitor all fields — andrew, Nov 14 '14 at 14:32
thanks @andrew it does make sense, however there are multiple datepicker fields on a form, how do i handle that? — Shairyar, Nov 14 '14 at 14:36
Yes .change fires only when unfocused. But your users will hate you if they have only 1 sec to type the next letter or you post an incomplete form. — MIvanIsten, Nov 14 '14 at 14:39
you could use .on instead which can handle multiple events see http://stackoverflow.com/questions/2534089/jquery-multiple-events-to-trigger-the-same-function ie `$('form input').on(change keydown)` Edit: actually thinking about it you should use the datepickers change function for that — andrew, Nov 14 '14 at 14:39
Hard to find a good answer for you, becouse what you want to do is generaly bad idea. Auto submiting a form without knowing the user is finished filling all inputs leads to a lot of broken data. Then you have let the user some way fix or delete them. What needs some extra work on your and the users side. Or you process them all, what leads to bad results. Even if the form has only a single datepicker, the user can missclick or change his mind. Bind your function to `$('#your-form-id input')` but be warned. — MIvanIsten, Nov 14 '14 at 15:28

score 1 · Answer 1 · answered Nov 14 '14 at 14:26

1

$('.class-of-your-inputs').change(function(){
   $("#you-form").ajaxSubmit({url: 'you_path.php', type: 'post'})
});

answered Nov 14 '14 at 14:26

Przemysław Kaczmarczyk

436
3
15

can you please explain more? how will this detect change in ALL fields of a form – Shairyar Nov 14 '14 at 14:28
sory my mistake, just make – Przemysław Kaczmarczyk Nov 14 '14 at 14:30
you can use $('input') instead of $('.class-of-your-inputs') but then it will work with all inputs on your page – Przemysław Kaczmarczyk Nov 14 '14 at 14:31
$('input') makes sense but what if one of the field is jquery datepicker – Shairyar Nov 14 '14 at 14:35
I'd prefer to get the values field by field... @Baig – baao Nov 14 '14 at 14:36
@michael ya thats what i thought too when i started out but there are just way too many fields and getting values field by field is making the script more long and complicated than it needs to be – Shairyar Nov 14 '14 at 14:38
It will work with all of your inputs (from other's form too), that's why I write to add class to inputs that you need and then you need just this script – Przemysław Kaczmarczyk Nov 14 '14 at 14:41
1

You can use `$('#your-form-id input')` as selector to match only inputs of the form in question. – MIvanIsten Nov 14 '14 at 15:06

PeterKA · Accepted Answer · 2016-01-24T04:59:11.773

Create the function that you want to use for handling form submission. It gives you a chance to decide if you want to use ajax or default form submission:

function submitForm() {
   var form = $(this).closest('form')[0];
   form.submit();
   //or $.ajax( ... );
}

Then just use one selector for all input elements :input for example, or a common class and use the input event which will catch even when the user pastes text into one of the inputs:

$(':input').on('input', submitForm);

UPDATE

To listen to jQuery UI datepicker events too add change event as follows:

$(':input').on('input change', submitForm);

function submitForm() {
        var form = $(this).closest('form')[0];
        alert( 'About to submit form to ' + form.action );
       //form.submit();
       //or $.ajax( ... );
    }

    $(':input').on('input', submitForm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="/form/update.php" method="post">
  Field 1: <input type="text" name="field1"/><br>
  Field 2: <input type="text" name="field2"/><br>
  Field 3: <input type="text" name="field3"/><br>
</form>

Good question! For that, we can append a `change` event as in this demo: http://jsfiddle.net/fiddleyetu/m0s0cea1/ — PeterKA, Nov 14 '14 at 14:47
@PeterKA that works fine. However, how to handle situations with forms that take a while for the server to process ? In other words, how to avoid a new submit of the same form (that would be triggered once inputs are changed), while the previous one has not been still fully processed ? — mannaia, Jan 22 '16 at 15:09
Your concern is only valid if you're submitting via ajax. You can use a data attribute on the form tag to set and check a flag that indicates whether or not a submission is in progress. — PeterKA, Jan 24 '16 at 04:58

baao · Answer 3 · 2014-11-14T14:35:40.090

0

Just put everything inside a keyup function and submit all the fields, on the next page check which one has input and do whatever you want

$('.myinput').keyup(function(){
    //eg:
    var name = $('#name').val();
    var email = $('#email').val();
      //^variable   ^gets value (val()) of field with this id  
    $.ajax({

    ....
    //eg.
    type : "POST",
    data : {name : name, email : email}
    ....

    });

You have to give your inputfields class="myinput" and, in my example the input for name should have id="name". The keyup function reacts on every keyup event on a formfield with the class "myinput" and will send an ajax request.

This line selects

$('.myinput').keyup(function(){
 //^class     ^event

edited Nov 14 '14 at 14:35

answered Nov 14 '14 at 14:25

baao

71,625
17
143
203

can you please explain more? how will this detect change in ALL fields of a form – Shairyar Nov 14 '14 at 14:27
Added it to my answer! – baao Nov 14 '14 at 14:30

score 0 · Answer 4 · answered Nov 14 '14 at 15:04

I think its bad idea to call ajax on every input field keyup event. You can put counter displaying that user has to fill form in some amount of time. Then use timeout to submit form. If all the required fields are filled then do your desired task. Else you can ask inputs again.

submitting a form without hitting the update or submit button

4 Answers4