按功能设置文本框的Javascript值，无需重置
[英]Javascript setting value of textbox by function, without getting reset
问题描述
My goal is to have a text box and a button. 
我的目标是要有一个文本框和一个按钮。 If I enter "Hello" in the text box and press the submit button I would like to have see the text box filled with "World. 如果我在文本框中输入“ Hello”，然后按提交按钮，我希望看到文本框充满“世界。
For the moment the value of the text box will be changed betweeen the 目前，文本框的值将在
<html>
<body>
<script>
function validateForm() {
var x = document.forms["myForm"]["Input"].value;
if (x == "Hello") {
alert("test");
document.getElementById("Input").value = "World";
alert("test2");
}
}
</script>
<form name="myForm" action="test.html" onsubmit="return validateForm()" method="post">
Input: <input type="text" id="Input"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
3 个解决方案
解决方案1
1 已采纳 2015-08-26 11:51:05
The problem is that the form gets submitted right after the validation. 问题是表单在验证后立即提交。 So you are redirected to test.html again. 因此，您将再次重定向到test.html 。
If you don't want that to happen, add event.preventDefault(); 如果您不希望发生这种情况，请添加event.preventDefault(); to your Event Handler ( check out the fiddle to see it working): 到您的事件处理程序（ 查看小提琴以查看其工作原理 ）：
<html>
<body>
<script>
function validateForm(event) {
event.preventDefault();
var x = document.forms["myForm"]["Input"].value;
if (x == "Hello") {
alert("test");
document.getElementById("Input").value = "World";
alert("test2");
}
}
</script>
<form name="myForm" action="test.html" onsubmit="return validateForm(event)" method="post">
Input: <input type="text" id="Input"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
You can learn more about event.preventDefault() at MDN . 您可以在MDN上了解更多有关event.preventDefault()的信息 。
Just as a sidenote: It is generally better to use addEventListener instead of the onsubmit attribute (Better separation of concerns, you can add multiple event listeners, etc.). 就像一个旁注：通常最好使用addEventListener而不是onsubmit属性（更好的关注点分离，您可以添加多个事件侦听器，等等）。
解决方案2
0 2015-08-26 11:50:34
When you submit your page, then the content in the action page will be loaded. 提交页面时，将加载操作页面中的内容。
In your case test.html will be loaded. 在您的情况下，将加载test.html。
If you want the value "World" to be shown in the text box on hitting the submit, then return false on your validateForm() method. 如果希望在单击“提交”时在文本框中显示值“ World”，则在validateForm（）方法上返回false。
解决方案3
0 2015-08-26 11:52:42
Use return false; 使用return false; to stay on the same page and stop form submission. 停留在同一页面上并停止表单提交。
function validateForm() {
var x = document.forms["myForm"]["Input"].value;
if (x == "Hello") {
document.getElementById("Input").value = "World";
return false;
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.