如何將用戶輸入的表單值從html傳遞給javascript？

Question

通過將值寫入標記，可以將值從javascript傳遞給html。 但是，如果我希望將用戶定義的值（等，由查看網頁的人輸入）傳遞給java腳本，以便我可以用它做什么，那么最簡單的方法是什么？

目前，我有這樣的事情：

 <div class="entry foreground-color">
     <form>
         <input type="text" name="commands" size="60"/>
     </form>
 </div>

如何將表單中的值傳遞給我的javascript？

或者，我是否朝着完全錯誤的方向前進？ 如果是這樣，獲取用戶輸入的正確方法是什么，並將其傳遞給javascript？

編輯：對我濫用術語表示歉意。 我正在制作一個基於文本的冒險游戲，我希望用戶能夠輸入一個響應，按回車鍵，然后將響應發送到javascript，這樣我就可以使用javascript來評估響應（等“go south” ，“去北方”），並用新的情況寫回元素（等“當你往南方時，你找到了一個巨魔”）。

Answer 1

您可以阻止表單提交並獲取值：

HTML ：

<div class="entry foreground-color">
    <form onsubmit="return getValue('commands')">
        <input type="text" name="commands" size="60" id="commands"/>
    </form>
</div>

JavaScript ：

function getValue (id) {
    text = document.getElementById(id).value; //value of the text input
    alert(text);
    return false;
}

小提琴 ： 小提琴

如果您想在之后清除該框，請使用：

document.getElementById(id).value = '';

像這樣：

function getValue (id) {
    text = document.getElementById(id).value; //value of the text input
    alert(text);
    document.getElementById(id).value = '';
    return false;
}

Answer 2

<input type="text" name="commands" size="60" id="commands"/>   

var input = document.getElementById("commands").value;

要么

  document.getElementsByName( "commands" )[0].value

現在對此做任何事情

Answer 3

輸入值已通過DOM API用於Javascript：

document.getElementsByName( "commands" )[0].value

Answer 4

您可以使用以下方法獲取輸入控件的值 ：

document.getElementsByName("commands")[0].value;

由於getElementsByName()方法返回具有指定名稱的元素Array ，因此您需要采用第一個元素，假設只有一個元素具有name屬性commands 。

而不是那樣，為了簡單和獨特，我建議你使用着名的方法來實現使用id屬性和getElementById()方法。

Answer 5

要獲取HTML元素的值，首先，您需要獲取所需的元素（您可以使用這些方法）：

• 的getElementById
• 的getElementsByTagName
• getElementsByClassName方法
• querySelector（現代瀏覽器）
• querySelectorAll（現代瀏覽器）

這些方法取決於document （ 文檔 ）。

所以在你的情況下，你可以嘗試這樣的事情：

var inputs = document.getElementsByTagName('input'),
    commandValue = null;
for (var i = 0; i < inputs.length; i++) {
 if (inputs[i].name === "commands") {
    commandValue = inputs[i].value; // get the element value
 }
}
alert (commandValue); // show the value

但是您需要在表單默認操作上設置“捕手”。 所以：

<form>

成為：

<form onsubmit="return getValue()">

並在getValue函數中設置上面的javascript代碼：

function getValue() {
    var inputs = document.getElementsByTagName('input'),
        commandValue = null;
    for (var i = 0; i < inputs.length; i++) {
     if (inputs[i].name === "commands") {
        commandValue = inputs[i].value; // get the element value
     }
    }
    alert (commandValue); // show the value
    return false; // prevent default form action
};

Answer 6

你是在正確的道路:)

例如，您可以執行以下操作（請參閱http://jsfiddle.net/ahLch/ ）：

HTML：

<h1 id="commandsExample"></h1>
<div class="entry foreground-color">
   <form>
     <input type="text" id="commands" size="60"/>
   </form>
</div>

JavaScript的：

var input = document.getElementById('commands');
var example = document.getElementById('commandsExample');

input.addEventListener('change', function () {
   example.innerHTML= input.value;
});

有幾點需要注意：

• 如果您不熟悉JavaScript，並且希望跨越瀏覽器使用代碼（特別是如果您想要定位舊版本的IE），請查看jQuery。

• 如果您希望學習如何在沒有jQuery層的情況下使用瀏覽器提供的普通DOM API，請查看：http： //youmightnotneedjquery.com/ （一旦您學習了jQuery基礎知識，它就非常有用）。

• 有兩種方法可以獲得價值：

  • 攔截submmit事件 ：我不推薦它，你必須注意避免默認的提交行為，你必須在輸入字段周圍創建一個表單。 這在舊瀏覽器中是必要的，但今天卻不是。

  • 更改事件：當輸入值發生更改且輸入失去焦點時觸發它（是用於表單驗證的常用事件）。

  • keydown和keyup ：它們通過捕獲每次擊鍵為您提供更多控制，但它的級別低於更改事件。 有關完整參考，請參閱： https ： //developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

• 使用“id”而不是“name”。 只有當您想要提交值時才需要名稱，在新瀏覽器中，您可以只保留沒有表單的輸入標記。

Answer 7

使用jQuery獲取輸入標記的值非常簡單。 （我認為你無論如何都需要這個實際上通過AJAX將消息發送到服務器..？）

$（ “＃idofinput”）VAL（）。 將復制值$（“＃idofinput”）。val（''）; 會把它清空。

您可能希望在不實際提交表單的情況下執行此操作。 在javascript中重新創建一個並不難。 對於提交輸入，您可以使用以下內容：

function checkEnter(e)
{
  var keynum;
  if(window.event) // IE8 and earlier
  {
   keynum = e.keyCode;
  }
  else if(e.which) // IE9/Firefox/Chrome/Opera/Safari
  {
    keynum = e.which;
  }
  if(keynum==13)
  {
    sendMessage();
  }
}