Databases
StackOverflow2013
Postsdbo
POSend an ajax request every time that a form input field change
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSend an ajax request every time that a form input field change
    text
    copied!<p>I'm need to create a form that sends an ajax request everytime a form element is changed using the jQuery change event. I was able to get the form input values to show up in spans by doing this:</p> <pre><code>&lt;form id="TestForm" class="form-horizontal"&gt; &lt;div class="form-group"&gt; &lt;label for="namefirst" class="col-sm-2 control-label"&gt;First Name&lt;/label&gt; &lt;div class="col-sm-6"&gt; &lt;input id="firstname" type="text" name="firstname" class="form-control" placeholder="Enter your first name" /&gt;&lt;span id="spanfirstname"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="namelast" class="col-sm-2 control-label"&gt;Last Name&lt;/label&gt; &lt;div class="col-sm-6"&gt; &lt;input id="lastname" type="text" name="lastname" class="form-control" placeholder="Enter your last name" /&gt;&lt;span id="spanlastname"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="email" class="col-sm-2 control-label"&gt;Email&lt;/label&gt; &lt;div class="col-sm-6"&gt; &lt;div class="left-inner-addon"&gt; &lt;i class="glyphicon glyphicon-envelope"&gt;&lt;/i&gt; &lt;input id="email" type="text" name="email" class="form-control" placeholder="Enter your email" /&gt;&lt;span id="spanemail"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="phone" class="col-sm-2 control-label"&gt;Phone&lt;/label&gt; &lt;div class="col-sm-6"&gt; &lt;div class="left-inner-addon"&gt; &lt;i class="glyphicon glyphicon-phone-alt"&gt;&lt;/i&gt; &lt;input id="phone" type="text" name="phone" class="form-control" placeholder="Enter your phone number" /&gt;&lt;span id="spanphone"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="password" class="col-sm-2 control-label"&gt;Password&lt;/label&gt; &lt;div class="col-sm-6"&gt; &lt;input id="password" type="password" name="password" class="form-control" placeholder="Enter a password" /&gt;&lt;span id="spanphone"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="password" class="col-sm-2 control-label"&gt;&lt;/label&gt; &lt;div class="col-sm-6"&gt; &lt;button class="button green major beeboop" name="button" type="submit"&gt;This is a test&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;div id="result"&gt;&lt;/div&gt; &lt;div class="row spacer"&gt;&lt;/div&gt; &lt;/div&gt; &lt;!-- /container --&gt; &lt;script src="//code.jquery.com/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $('#firstname').change(function() { $('#output_firstname').val($(this).val()); $('#spanfirstname').html('&lt;b&gt; TestForm: firstname:' + $(this).val() + '&lt;/b&gt;'); }); $('#lastname').change(function() { $('#output_lastname').val($(this).val()); $('#spanlastname').html('&lt;b&gt;' + $(this).val() + '&lt;/b&gt;'); }); $('#email').change(function() { $('#output_email').val($(this).val()); $('#spanemail').html('&lt;b&gt;' + $(this).val() + '&lt;/b&gt;'); }); $('#phone').change(function() { $('#output_phone').val($(this).val()); $('#spanphone').html('&lt;b&gt;' + $(this).val() + '&lt;/b&gt;'); }); $('#password').change(function() { $('#output_password').val($(this).val()); $('#spanpassword').html('&lt;b&gt;' + $(this).val() + '&lt;/b&gt;'); }); }); &lt;/script&gt; </code></pre> <p>I tried the wrap the ajax request in the change event function with no success:</p> <pre><code>&lt;script&gt; $(document).ready(function() { $('#firstname').change(function() { jQuery.post("ajax-process.cfm", { firstname: jQuery('#firstname').val() }, function(data) { }); return false; }); }); &lt;/script&gt; </code></pre> <p>@omar-ali @Anil Namde Updated the code. But now I'm only getting the first value in the console:</p> <pre><code>$("input[type='text']").change(function() { var firstname = $("#firstname").val(); var lastname = $("#lastname").val(); var email = $("#email").val(); $.ajax({ url : "ajax-process.cfm", type: "POST", data: { firstname: firstname, lastname: lastname, email: email }, success: function(data) { $("#simple-msg").html('&lt;pre&gt;&lt;code&gt;' + data + '&lt;/code&gt;&lt;/pre&gt;'); } }); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload