發送數據未提交按鈕（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>

我有一個動態行添加表，可以添加行到表中。我如何發送數據（coil_id），而不用點擊提交按鈕？發送數據未提交按鈕（Javascript/jQuery）

在本例中，我想在不使用提交按鈕的情況下將coil_id（在這種情況下爲coil_id = 」coil_22」）發送到服務器。

這也是一樣的東西：如果用戶在7字符或數字的長度進入線圈檢測（例如：coil_22或2C12345），然後將提交「coil_22」（不coilL_11或coil_33）到服務器，而無需點擊任何提交/發送按鈕。

我曾經使用過JavaScript/jQuery，有時還感覺迷路。

非常感謝您的幫助。

來源

2013-04-26 Frank Zhu

搜索ajax請求，將其發送到輸入 – 2013-04-26 17:44:47

的keyup事件的回調函數中，您希望何時發送這些數據？有些事情必須觸發這一點。你可以通過'$（'＃form'）。submit（）';來觸發提交（非ajax）。 – 2013-04-26 17:47:01

您可以用.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添加到您的文檔。

來源

2013-04-26 17:52:59 Memolition

它似乎工作，這是一個J2EE/JSP應用程序，所以它會是file.java我猜。 – 2013-04-26 18:15:17

我認爲它必須是一個.js文件才能工作我不確定它是否會工作如果保存爲.java文件 – Memolition 2013-04-26 18:21:30

它適用於第一行，如果用戶想要添加，該表具有動態重複行一排，我輸入的腳本代碼不會被複制，我會嘗試更多類似的想法。 – 2013-04-29 13:59:55

這裏是jquery ajax的示例。序列化將創建生成的查詢字符串，將發送到您的網址。

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

來源

2013-04-26 17:54:08

我試過這個，出於某種原因它不會啓動，我想念什麼？不過，我明白了，我是ajax的新成員。 – 2013-04-29 13:43:08

感謝您的幫助。它放置「錯誤：」行後發生一些錯誤。這似乎是我的問題。我會用其他類似的東西來嘗試這個想法。 – 2013-04-30 19:05:54

發送數據未提交按鈕（Javascript/jQuery）

回答

相關問題