31288

Send data without submit button (Javascript / jQuery)

Question:

<!DOCTYPE html> <html> <head> </head> <body> <form name="form1" id="form1" action="coillist" method="POST"> <table id="dataTable" border="1"> <tbody> <tr> <th>Coil #</th><th>Width</th><th>Gauge</th> </tr> <tr> <td><input type="text" maxlength="7" size="7" name="coil_id" value="coil_11"></td> <td><input type="text" size="7" name="width" value="120"></td> <td><input type="text" size="5" name="gauge" value="130"></td> </tr> <tr> <td><input type="text" maxlength="7" size="7" name="coil_id" value="coil_22"></td> <td><input type="text" size="7" name="width" value="220"></td> <td><input type="text" size="5" name="gauge" value="330"></td> </tr> <tr> <td><input type="text" maxlength="7" size="7" name="coil_id" value="coil_33"></td> <td><input type="text" size="7" name="width" value="320"></td> <td><input type="text" size="5" name="gauge" value="330"></td> </tr> </tbody> </table> </form> </body> </html>

I have a dynamic row adding table that could add row into the table. I am showing it in 3 rows, it could be 1 row, or 4 rows, or n rows if a use wants to add data in.

My question is: How can I send data (coil_id) out without click submit button?

In this example, I want to send a coil_id (coil_id = ”coil_22” in this case) to the server without using submit button.

This is also something like: detect if user enter a coil in length of 7 char or digit (Ex: coil_22 or 2C12345), then it will submit the “coil_22” (not coilL_11 or coil_33) to server without click any submit / send button.

I have used JavaScript / jQuery a while, still feel lost sometimes.

Highly appreciate your help.

Answer1:

You can make it with a .keyup(), just add a class to each input for example

<input type="text" class="coil_input" maxlength="7" size="7" name="coil_id" value="coil_11"> <input type="text" class="coil_input" maxlength="7" size="7" name="coil_id" value="coil_22"> <script> $('.coil_input').keydown(function() { if($.trim($(this).val()).length == 7){ var now_input_value = $(this).val(); $.post('file.php', {now_input: now_input_value}, function(){ alert('Data sent'); }).fail(function(){ alert('An error has ocurred'); }); } }); </script>

All the inputs has to have the same class

Remember to add jQuery to your document.

Answer2:

here is example of jquery ajax. serialize will create generate query string that will be sent to your url.

var datastring = $("#yourForm").serialize(); $.ajax({ type: "POST", url: "your url", data: datastring, dataType: "json", success: function(data) { alert('all ok');} });

Recommend

  • Displaying multiple Google charts on same page
  • Is wxpython progressdialog cancel event possible?
  • Trying to integrate Coda Hale Metrics in spring boot, not seing the metrics in /metrics
  • TEdit Input Validation on C++ Builder XE8
  • OpenCL kernel not vectorized
  • Polymer paper-input and form submission
  • textIndicatorPrecision in dojox.dgauges using dojo
  • using html data-attributes as css-variable (i.e. text-shadow)
  • Drawing a Path in XAML (with binding) vs. C#. One works, one doesn't
  • chrome video src change not working
  • WPF Template Binding in ToggleButton UserControl
  • WPF version of .ScaleControl?
  • blade.php method outputting it's result to the form
  • How do I include a SWC in an AS2 Flash project?
  • How to add a focus style to an editable ComboBox in WPF
  • D3 get axis values on zoom event
  • How do I superscript characters in a UIButton?
  • Appending Character to Character Array In C
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Get data from AJAX - How to
  • Change multiple background-images with jQuery
  • Adding a button at the bottom of a table view
  • Android screen density dpi vs ppi
  • Is my CUDA kernel really runs on device or is being mistekenly executed by host in emulation?
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • MySQL WHERE-condition in procedure ignored
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • Web-crawler for facebook in python
  • Unanticipated behavior
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • trying to dynamically update Highchart column chart but series undefined
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • python draw pie shapes with colour filled
  • Can't mass-assign protected attributes when import data from csv file
  • Unable to use reactive element in my shiny app
  • Android Heatmap on canvas or ImageView
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal