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>

我有一个动态行添加表，可以在表中添加行。我在3行中显示它，如果用户想要添加数据，它可以是1行，或4行，或n行。

我的问题是：如何在没有点击提交按钮的情况下发送数据（coil_id）？

在此示例中，我想在不使用提交按钮的情况下向服务器发送coil_id（在这种情况下为coil_id = ”coil_22”）。

这也类似于：检测用户是否输入长度为7个字符或数字的线圈（例如：coil_22或2C12345），然后它将提交“coil_22”（不是coilL_11或coil_33）到服务器而不点击任何提交/发送按钮。

我已经使用过JavaScript / jQuery一段时间了，有时还会感到迷茫。

非常感谢您的帮助。

Answer 1

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

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

所有输入必须具有相同的类

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

Answer 2

这是jquery ajax的示例。 serialize将创建生成查询字符串，该字符串将发送到您的网址。

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

无需提交按钮发送数据（Javascript / jQuery）

2 个答案: