如何获得textarea的值

How do I get the value of a textarea?

本文关键字：的值 textarea 何获得      更新时间：2023-09-26

这是我另一个问题的后续问题。我再问一遍，因为这似乎更像是一个javascript问题，而不是一个谷歌应用引擎的问题。

有一个表单

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

但是"choice"的值是"undefined"。我做错了什么?

而且，如果我理解正确的话，/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的答案

choice_form是<form>，不是<textarea>。
您需要给<textarea>一个ID，并使用该ID代替。

您可以使用:

正式访问表单
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

(这里有一些很好的答案，但我还没有看到一个把它与你所拥有的放在一起…)

由于表单可以有多个输入，因此需要访问特定输入上的value。有几种方法可以做到这一点，但最直接的可能是使用表单的elements属性(只有表单有这个!):

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

正如其他人所说，当您想要的数据在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;
};
相关文章：