发送数据而无需提交按钮(Javascript/jQuery)

问题描述：

<!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>

我有一个动态行添加表，可以将行添加到表中. 我将其显示为3行，可能是1行，也可能是4行，或者如果用户想在其中添加数据，则可能是n行.

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.

我的问题是:如何在不单击提交按钮的情况下发送数据(coil_id)?

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

在此示例中，我想在不使用提交按钮的情况下将coil_id(在这种情况下为coil_id = coil_22)发送到服务器.

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

这也类似于:检测用户是否输入长度为7个字符或数字的线圈(例如:coil_22或2C12345)，然后它将提交coil_22(不是coilL_11或)到服务器，而无需单击任何提交/发送按钮.

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.

我使用JavaScript/jQuery已有一段时间，有时仍然感到迷茫.

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

非常感谢您的帮助.

答

您可以使用.keyup()进行创建，只需在每个输入中添加一个类，例如

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

请记住将jQuery添加到您的文档中.

Remember to add jQuery to your document.

发送数据而无需提交按钮(Javascript/jQuery)

相关推荐