Question

这是my other question的后续行动。我再问一次，因为这似乎比Google App Engine问题更像是一个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;

但我对“选择”的值有“未定义”。我究竟做错了什么？

而且，如果我理解正确的话，/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's answer。

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']

都返回对名为＆＃39; choice＆＃39;的元素的引用。在名称为＆＃39; choice_form＆＃39;的表单中。所以要获得价值：

document.choice_form.choice.value

Answer 3

（这里有一些很好的答案，但我没有看到一个将它与你所拥有的东西放在一起......）

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

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

Answer 4

正如其他人所说，当您想要的数据位于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;
};

我如何获得textarea的价值？

4 个答案: