如何獲得文本區域的價值？

Question

這是我其他問題的跟進。 我再次詢問是因為這似乎是一個JavaScript問題，而不是Google App Engine問題。

我有一個表格

<form name="choice_form" id="choice_form" method="post" action="/g/choicehandler" onsubmit="writeToStorage()">
  <textarea name="choice" rows="7" cols="50"></textarea><br />
  <input type="submit" value="submit your choice">
</form>

我想獲取此textarea的值，並使用formData將其發送到應用程序。 我試過了

  var choice = document.getElementById("choice_form").value;

但對於“選擇”的值卻得到“未定義”。 我究竟做錯了什么？

而且，如果我理解正確的話， /g/choicehandler會兩次被表單調用一次，並被XHR調用一次。 我該如何解決？ 下面是處理程序：

class Choice(webapp.RequestHandler):
    def get(self):
        self.response.out.write("""
<html>
  <head>
<script type="text/javascript">

var count = 0;

function writeToStorage()
{ 
  var user = "user" + count;
  count++;
  localStorage.setItem("chooser", user);
  var choice = document.getElementById("choice_form").value;

  var formData = new FormData();
  formData.append("chooser", user);
  formData.append("choice", choice);

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "http://localhost:8086/g/choicehandler", true);
  xhr.onreadystatechange = function (aEvt) {
    if (xhr.readyState == 4 && xhr.status == 200){ 
      console.log("request 200-OK");
    }
    else {
      console.log("connection error");
    }
  };
  xhr.send(formData);  
  //added this per Aaron Dufour's answer
  return 0;
};

</script>

  </head>
  <body>

//changed onsubmit like this: onsubmit="return writeToStorage(); as per Aaron Dufour's answer
<form name="choice_form" id="choice_form" action="/g/choicehandler" method="post" onsubmit="writeToStorage()">
  <textarea name="choice" rows="7" cols="50"></textarea><br />
  <input type="submit" value="submit your choice">
</form>

  </body>
</html>""")

更新

有關解決方案，請參見Aaron Dufour的答案。

Answer 1

choice_form是<form> ，而不是<textarea> 。
您需要給<textarea>一個ID，並改用該ID。

Answer 2

您可以使用以下方式正式訪問該表單：

document.forms['choice_form']

或者：

document.forms.choice_form

每個表單都有一個元素集合，該集合是所有表單控件。 您可以通過幾乎相同的方式訪問它們：

document.forms['choice_form'].elements['choice']

要么

document.choice_form.choice

只要名稱遵循有效javascript標識符的規則。 如果沒有，則需要使用方括號表示法：

document['choice_form']['choice']

全部以名稱“ choice_form”的形式返回對名為“ choice”的元素的引用。 因此，獲得價值：

document.choice_form.choice.value

Answer 3

（這里有一些很好的答案，但我還沒有看到一個能將其與您所擁有的結合在一起的方法……）

由於一種形式可以有多個輸入，因此您需要訪問特定輸入的value 。 有幾種方法可以執行此操作，但是最直接的方法可能是使用表單的elements屬性（只有表單具有此屬性！）：

document.getElementById("choice_form").elements.choice.value

Answer 4

正如其他人所說，當所需數據位於textarea時，您正在訪問form 。 如果給textarea一個ID，那可能是獲得其價值的最簡單方法。

經過大量討論，我們確定您根本不需要XHR。 您的表單應如下所示：

<form name="choice_form" id="choice_form" action="/g/choicehandler" method="post" onsubmit="writeToStorage()">
  <textarea name="choice" rows="7" cols="50"></textarea><br />
  <input type="hidden" name="chooser" id="form_chooser" />
  <input type="submit" value="submit your choice">
</form>

現在，我們使用javascript函數編輯表單，然后再提交表單：

var count = 0;

function writeToStorage()
{ 
  var user = "user" + count;
  count++;
  localStorage.setItem("chooser", user);

  document.getElementById("form_chooser").value = user;
};

如何獲得文本區域的價值？

問題描述

4 個解決方案

解決方案1
4 2011-11-14 02:07:47

解決方案2
3 2011-11-14 02:27:42

解決方案3
2 2011-11-14 02:33:14

解決方案4
1 已采納 2011-11-14 02:50:25

如何獲得文本區域的價值？

問題描述

4 個解決方案

解決方案1 4 2011-11-14 02:07:47

解決方案2 3 2011-11-14 02:27:42

解決方案3 2 2011-11-14 02:33:14

解決方案4 1 已采納 2011-11-14 02:50:25

解決方案1
4 2011-11-14 02:07:47

解決方案2
3 2011-11-14 02:27:42

解決方案3
2 2011-11-14 02:33:14

解決方案4
1 已采納 2011-11-14 02:50:25