如何获取textarea的值？

1 投票

4 回答

2861 浏览

提问于 2025-04-17 06:15

这是对我之前提问的一个跟进，链接在这里：我的其他问题。我再次提问是因为这似乎更像是一个关于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;

但是我得到的“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的回答，里面有解决方案。

javascript 事件处理 google app engine 表单处理 textarea 异步请求值获取 xhr

4 个回答

你可以通过以下方式正式访问表单：

document.forms['choice_form']

或者也可以这样：

document.forms.choice_form

每个表单都有一个 elements 集合，里面包含了所有的表单控件。你可以用类似的方式访问它们：

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

或者

document.choice_form.choice

前提是这些名字符合有效的 JavaScript 标识符的规则。如果不符合，你需要使用方括号的方式：

document['choice_form']['choice']

这些方法都会返回一个名为 'choice' 的元素，前提是它在一个名为 'choice_form' 的表单中。所以要获取这个元素的值：

document.choice_form.choice.value

回答于 2025-04-17 由 Python大师

分享举报

choice_form 是指整个 <form> 表单，而不是 <textarea> 文本框。
你需要给 <textarea> 设置一个 ID，然后用这个 ID 来替代。

回答于 2025-04-17 由 Python大师

分享举报

正如其他人所说，你现在是在访问 form，但你想要的数据其实是在 textarea 里。如果给 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;
};

回答于 2025-04-17 由 Python大师

分享举报

如何获取textarea的值？

4 个回答

撰写回答