如何一键写入localStorage并提交textarea？
我有一个处理程序 /choice，里面有一个文本框，还有一个 /choicehandler，用来把返回的信息写入数据库。但是在提交表单之前，我想把用户名写入 localStorage。
这是表单的内容：
<form name="choice_form" action="/choicehandler" method="post">
<textarea name="choice" rows="7" cols="50"></textarea><br />
<input type="submit" value="submit your choice">
</form>
在点击时，我想给用户分配一个用户名，并用 writeToStorage() 把它写入 localStorage：
<head>
<script type="text/javascript">
var count = 0;
function writeToStorage()
{
user = "user" + count;
count++;
localStorage.setItem("chooser", user);
};
</script>
</head>
我现在困惑的是，怎么用 onclick="writeToStorage()" 来调用 writeToStorage()，同时又能在表单中设置 action="/choicehandler"。
我想知道正确的方法是什么。我正在使用 Google App Engine（Python），等我解决这个问题后会再添加对 /choicehandler 的 ajax 调用。
总结一下，我想在一次点击中把 JavaScript 变量 user 写入 localStorage，并把文本框的内容提交到 /choicehandler。
更新
我正在尝试 john_doe的回答，但是 writeToStorage() 从来没有被触发。我哪里做错了？下面是处理程序的完整代码：
class Choice(webapp.RequestHandler):
def get(self):
self.response.out.write("""
<html>
<head>
<script type="text/javascript">
var count = 0;
function writeToStorage()
{
alert("count: " + count);
user = "user" + count;
//this line was giving an error; now it is fixed
//alert("user: " + user and "count: " + count);
alert("user: " + user + " and count: " + count);
count++;
localStorage.setItem("chooser", user);
};
</script>
</head>
<body>
<form name="choice_form" id="choice_form" action="/choicehandler" method="post" onsubmit="writeToStorage()">
<textarea name="choice" rows="7" cols="50"></textarea><br />
<input type="submit" value="submit your choice">
</form>""")
self.response.out.write("""
</body>
</html>""")
2 个回答
1
你可以稍微修改一下你的函数（有很多种方法可以做到这一点）。给你的表单加一个ID（id="choice_form"），然后再加一行代码来提交你的表单：
function writeToStorage() {
user = "user" + count;
count++;
localStorage.setItem("chooser", user);
document.getElementById("choice_form").submit();
}
1
让你的函数在表单提交之前被调用。
<form name="choice_form" action="/choicehandler" method="post" onsubmit="writeToStorage()">
<textarea name="choice" rows="7" cols="50"></textarea><br />
<input type="submit" value="submit your choice">
</form>