实际上不向服务器提交任何内容的HTML表单(JavaScript中的客户端处理)

Question

我有一个带有输入的HTML表单,它只能在JavaScript和jQuery中进行客户端处理,但实际上不会向服务器提交任何内容.什么是铺设出HTML这样的形式,并编写JavaScript将处理表单时表单的输入变化(上都明确提出事件(即点击"提交"或输入)的正确方式,或隐式更改事件(从输入中取消聚焦,甚至在输入文本的每次击键/点击时))？

Answer 1

如果您确实从未将表单提交到某个地方,则可以避免使用表单标记.只需使用输入框和按钮.然后,如果用户单击该按钮,则单击处理程序运行,或者根本不执行任何操作.

至于捕获显式事件,按钮单击,非聚焦(模糊)我会建议使用jQuery,因为它使得以跨浏览器方式将处理程序附加到这些事件变得非常容易.

• http://api.jquery.com/click/
• http://api.jquery.com/blur/
• http://api.jquery.com/keyup/

Answer 2

首先通过在onsubmit中返回false或在事件处理程序中使用event.preventDefault()来阻止默认表单操作.

排队:

<form id="myform" onsubmit="return false" action="pleaseturnonjavascript.html">

更好:

window.onload=function() {
  document.getElementById("myform").onsubmit=function() {
    // do something with the form field
    return false; // old way
  }
}

使用preventDefault:

window.onload=function() {
  document.getElementById("myform").onsubmit=function(e) {
    e.preventDefault(); // first statement
    // do something with the form field
  }
}

或者jQuery:

$(function() {
  $("#myform").on("submit",function(e) {
    e.preventDefault(); // first statement
    // do something with the form field
  });
});

然后决定是否要使用onkeyup(我在数字字段中使用)或onblur(在完整值很重要时使用)

这可以使用普通的JavaScript或jQuery来完成,但我们需要更多信息来帮助您

我更喜欢使用form标签并传递表单对象而不是只有每个字段必须访问的输入字段而不是使用表单元素数组 - 我感到不高兴不将输入包装在表单标记中.它甚至可能无法验证,并且额外的好处是输入将触发提交事件而无需其他措施.