【发布时间】：2013-10-07 20:28:34
【问题描述】：
我有一个标准表单，它从一个文本框 <input type="text" ... 中获取值，并根据具体情况将信息放入 div 或另一个文本框中。
一切都是如此，直到我犯了一个错误。我在我的文本框周围添加了一个<form>，并且在调用该函数时没有添加return false。花了几秒钟才发现问题，但我注意到了一些有趣的事情：console.log 信息被放置在位置栏中。
function getTotal(){
....
var total=end-start;
....
console.log(total);
}
正如预期的那样（因为没有包含 return false），div 没有被写入，文本框也没有被写入，但是......看截图。
这是怎么发生的？为什么要写入地址栏？
下面的屏幕截图：（我无法为它创建一个 jsfiddle，因为它需要一个表单提交按钮。）
我在 <input type="text" id="start"> 文本框中输入了 22，在 <input type="text" id="end"> 中输入了 77
一切都适用：
<form>
<input type="text" name="start" id="start"><br/>
<input type="text" name="end" id="end"><br/>
<button onClick="checkTotal(); return false; ">Check Total</button><br/>
<input type="text" id="aaa"><br/>
</form>
去掉 return false 并写入地址栏：
<form>
<input type="text" name="start" id="start"><br/>
<input type="text" name="end" id="end"><br/>
<button onClick="checkTotal();">Check Total</button><br/>
<input type="text" id="aaa"><br/>
</form>
javascript 是这样的（为了便于阅读，所有这些都被删减了）
function checkTotal(){
var start=document.getElementById('start').value;
var end=document.getElementById('end').value;
var total=end-start;
var writeTotal=document.getElementById('total');
writeTotal.innerHTML=total;
var abc=document.getElementById('aaa').value=total;
console.log(total);
}
【问题讨论】：
-
你的意思是
<form>s 的默认行为，return false;不再阻止？ -
太棒了......知道Ajax的人，但不知道在表单中使用GET方法提交表单内容的页面的原始行为。在这种情况下，参数将始终作为所谓的查询字符串附加到 URL
-
您正在记录
55，但它会将22和77放在地址栏中。是什么让你觉得console.log在做我？ -
是的。我在下面对此发表了评论。我想是时候休息一下了。我看了这个，以为都是console.log而不是标准的表单提交。