Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite 
<!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.

share|improve this question
 
search for ajax request, send it in callback function of keyup event of input –  A. Wolff Apr 26 at 17:44
 
when do you wish to send those data? something have to trigger that. you can trigger submiting (non ajax) by $('#form').submit(); –  Davor Mlinaric Apr 26 at 17:47

2 Answers

up vote 0 down vote accepted

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.

share|improve this answer
 
it seems to be working, this is a J2EE / JSP application, so it would be file.java I guess. –  Frank Zhu Apr 26 at 18:15
 
I think it has to be a .js file to work I'm not sure if it will works if is saved as a .java file –  Memolition Apr 26 at 18:21
 
it works for the first row, the table has a dynamic duplicated row if user want to add a row, the script code I put in does not get copy, I will try more with the similar idea. –  Frank Zhu Apr 29 at 13:59
1  
This one is working, sorry for replying late. I am going to use it. Thanks for place the demo code in jsfiddle.net, that helps a lot. –  Frank Zhu Apr 30 at 18:57
1  
This is Java / JSP app. it is different from php, I need to use the respond writer() to set the return data. it works out now. Thanks again. –  Frank Zhu May 2 at 20:28
show 7 more comments
up vote 0 down vote

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');}
 });
share|improve this answer
 
I tried this one, for some reason it does not fire up, do I miss something? I am getting the idea, though, I am kine of new to ajax. –  Frank Zhu Apr 29 at 13:43
 
Thanks for your help. It does fire with some error after I placing the "error:" line. it seems to be my problem. I will tried this idea with other similar things. –  Frank Zhu Apr 30 at 19:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.