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

HTML Form That Doesn't Actually Submit Anything To The Server (Client-Side Processing in JavaScript)

本文关键字：JavaScript 客户端 处理 表单 HTML 服务器 提交 任何内 实际上      更新时间：2023-09-26

我有一个HTML表单，它的输入将只在JavaScript和jQuery中进行客户端处理，但实际上不会向服务器提交任何内容。在HTML中布局这样一个表单，并编写JavaScript，当表单的输入发生变化时(无论是在显式提交事件(即单击"提交"或Enter)，还是在隐式更改事件(从输入中移出焦点，甚至在输入文本的每次击键/单击)，处理表单的正确方法是什么?

首先通过在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完成，但我们需要更多的信息来帮助您进一步

我更喜欢使用表单标记并传递表单对象，而不是只使用必须访问每个字段的输入字段，而不是使用表单元素数组-我觉得不高兴没有在表单标记中包装输入。它甚至可能不会验证，而额外的好处是，enter将触发提交事件，而不需要其他措施。

如果您确实从未将表单提交到某个地方，则可以完全避免使用表单标记。使用输入框和按钮。然后，如果用户单击按钮，要么运行单击处理程序，要么什么都不发生。

至于捕获显式事件，按钮单击，焦点不聚焦(模糊)，我建议使用jQuery，因为它可以很容易地以跨浏览器的方式为这些事件附加处理程序。

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

您不需要表单标记。您可以对每个元素使用attach函数，如下所示:

 $("#input-element-id").change(function(){
  //your code here
  });

或者你可以用DIV(或其他元素)把它们都包起来，这样做:

$("#containing-div-id").change(function() {
//your code here
});

看看w3school网站http://www.w3schools.com/js/js_examples.asp上的一些例子

您可以了解如何编写onclick,onmouseover事件

相关文章：