基本提交按鈕 - 保存文本

Question

我是新來的，想了解一些關於提交按鈕的內容。我正在製作一個非常小的程序。你可以寫一些名字，然後我想保存它們的值並在我的Javascript代碼中使用它們。

我真正想要的是調用所有的文本框，以便我可以在我的Javascript中使用值（名稱）。

<form name="input" action="#" method="post"> 
    <table> 
     <tr> 
      <td> 
       <input type="text" name="txt" value="Insert name"><br/> 
       <input type="text" name="txt" value="Insert name"><br/> 
       <input type="text" name="txt" value="Insert name"><br/> 
       <input type="text" name="txt" value="Insert name"><br/> 
       <input type="text" name="txt" value="Insert name"><br/> 
       <input type="text" name="txt" value="Insert name"><br/> 
       <input type="text" name="txt" value="Insert name"><br/> 
       <input type="text" name="txt" value="Insert name"><br/> 
       <input type="text" name="txt" value="Insert name"><br/> 
       <input type="text" name="txt" value="Insert name"><br/> 
      </td> 
    </tr> 
</table> 

    <input type='submit' > 

編輯：那麼接下來的問題就是如何使一個按鈕，將運行的JavaScript？當用戶完成類型名稱時，他可以按下按鈕，然後javascript將運行並將「txt」值堆疊到輸入數組中？我知道如何製作JavaScript，但按鈕是問題。我如何做到這一點？

Answer 1

如果你想獲得的所有input值，則您的html

<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="button" value="Calculate" onclick="Calculate()" /> 

變化不大然後你可以使用javascript這樣

function Calculate(){ 
    var inputs = document.getElementsByName("txt"); 
    for(i=0; i<inputs.length; i++) 
    { 
     alert(inputs[i].value); 
    } 
} 

getElementsByName() Reference

隨着jquery

function Calculate(){ 
    $("input[name=txt]").each(function(){ 
     alert($(this).val()); 
    }); 
} 

Answer 2

更好地使用jquery來檢索更容易和更簡單的值。 http://api.jquery.com/attribute-equals-selector/

<form name="input" action="#" method="post"> 
<table> 
    <tr> 
     <td> 
      <input type="text" name="1" value="Insert name"><br/> 
      <input type="text" name="2" value="Insert name"><br/> 
      <input type="text" name="3" value="Insert name"><br/> 
      <input type="text" name="4" value="Insert name"><br/> 
      <input type="text" name="5" value="Insert name"><br/> 
      <input type="text" name="6" value="Insert name"><br/> 
      <input type="text" name="7" value="Insert name"><br/> 
      <input type="text" name="8" value="Insert name"><br/> 
      <input type="text" name="9" value="Insert name"><br/> 
      <input type="text" name="10" value="Insert name"><br/> 
     </td> 
</tr> 

<input type='submit' > 

<script> 
var one = $('input[name=1]').val(); 
var two = $('input[name=2]').val(); 
var three= $('input[name=3]').val(); 
var four = $('input[name=4]').val(); 
.. 
//use one,two,three according to your wish 
</script> 

或更簡單（改name=1,2..到name=txt）：

$('input[name=txt]').each(function() { 
    alert($(this).val()); 
}); 

$('input[name=txt]') < - 這部分將成爲的值的所有的輸入數組。 each將迭代它們。

編輯：您的按鈕應該是這樣的：

<input type="button" id="submitme" value="Submit"/> 

你要給你的js函數是這樣的：

$('#submitme').click(function(){ 
    $('input[name=txt]').each(function() { 
    alert($(this).val()); 
    });  
}); 

順便說一句：我只是認爲你不想提交首先形式，但只是將值獲取到數組中。

Answer 3

您可以使用JQuery。

喜歡這個

<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 
<input type="text" name="txt" value="Insert name"><br/> 

代碼：

$('input[name="txt"]').each(function(index, element) { 
     alert(element.value);   
});