不使用提交按钮发送数据（Javascript/jQuery）线圈#宽度规_Javascript_Jquery

不使用提交按钮发送数据（Javascript/jQuery）线圈#宽度规

javascript jquery

不使用提交按钮发送数据（Javascript/jQuery）线圈#宽度规,javascript,jquery,Javascript,Jquery,我有一个动态的行添加表，可以将行添加到表中。我将它显示为3行，可以是1行，也可以是4行，如果用户希望在其中添加数据，则可以是n行我的问题是：我如何在不点击提交按钮的情况下发送数据（coil\u id）在本例中，我希望在不使用提交按钮的情况下向服务器发送coil\u id（coil\u id=“coil\u 22”）这也类似于：检测用户是否输入长度为7个字符或数字的线圈（例如：coil\u 22或2C12345），然后它将提交“coil\u 22”（而不是coilL\u 11或coil\u

我有一个动态的行添加表，可以将行添加到表中。我将它显示为3行，可以是1行，也可以是4行，如果用户希望在其中添加数据，则可以是n行

我的问题是：我如何在不点击提交按钮的情况下发送数据（

coil\u id

）

在本例中，我希望在不使用提交按钮的情况下向服务器发送

coil\u id

（

coil\u id=“coil\u 22”

）

这也类似于：检测用户是否输入长度为7个字符或数字的线圈（例如：

coil\u 22

或

2C12345

），然后它将提交

“coil\u 22”

（而不是

coilL\u 11

或

coil\u 33

）到服务器，而无需单击任何提交/发送按钮

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

非常感谢您的帮助。

您可以使用

.keyup（）

，只需为每个输入添加一个类即可

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


$（'.coil_input'）.keydown（函数（）{
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（'a error has ocurred'）；}）；
}
});

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

记住将jQuery添加到文档中。

这里是jQuery ajax的示例。serialize将创建将发送到url的查询字符串

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

搜索ajax请求，在输入的keyup事件的回调函数中发送它。您希望何时发送这些数据？一定有什么东西触发了。您可以通过

$（'#form'）触发提交（非ajax）。submit（）

；它似乎在工作，这是一个J2EE/JSP应用程序，所以我想它应该是file.java。我认为它必须是一个.js文件才能工作。我不确定如果保存为.java文件它在第一行工作，表中有一个动态重复行如果用户想添加行，我输入的脚本代码没有得到复制，我会尝试更多类似的想法。这一个是有效的，抱歉回复晚了。我要用它。感谢您将演示代码放在jsfiddle.net中，这非常有帮助。它与php不同，我需要使用respond writer（）来设置返回数据。现在可以了。再次感谢。我试过这个，因为某种原因，它没有启动，我错过了什么吗？我明白了，不过，我是阿贾克斯的新手。谢谢你的帮助。在我放置“error:”行之后，它确实会发出一些错误。这似乎是我的问题。我会用其他类似的东西来尝试这个想法。

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