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

问题描述:

我有一个输入的HTML表单,它只会在JavaScript和jQuery中执行客户端处理,但实际上不会提交任何内容到服务器。在HTML中编排这样的表单并编写JavaScript以在表单输入发生变化时处理表单(在显式提交事件(即单击“提交”或“输入”)或隐式更改事件上)的正确方式是什么(从输入中取消聚焦,或者甚至在输入文本的每次击键/点击))?HTML表单实际上并没有向服务器提交任何内容(JavaScript中的客户端处理)

如果你真的从不提交表单到某个地方,你可以避免使用表单标签。只需使用输入框和按钮。然后,如果用户单击该按钮,则可以运行您的点击处理程序,或者根本没有任何反应。

至于捕捉显式事件,按钮单击,unfocus(模糊)我建议jQuery,因为它使得处理程序以跨浏览器方式附加到这些事件上非常容易。

+0

有趣的;出于某种原因,我认为'

'标签是''所需的父元素。那么只需使用“formless”输入元素并将事件处理程序绑定到使用jQuery的em? – 2011-04-11 20:17:48
+0

我以前做过这件事,它已经成功了:)我不确定它是否100%“规范”根据您可能使用的任何类型,但我没有遇到任何问题我记得。 – ctcherry 2011-04-11 20:19:43

+0

@Paul:查看我对此的替代视图的回答 – mplungjan 2011-04-11 20:20:01

通过返回在的onsubmit虚假或通过在事件处理程序使用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来完成,但我们需要更多信息来帮助你进一步

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

+0

输入是不需要嵌套在表单中的。 “用于创建控件的元素通常出现在FORM元素的内部,但当它们用于构建用户界面时,也可能出现在FORM元素声明之外。” (http://www.w3.org/TR/html401/interact/forms.html#form-controls)但是,使用FORM元素的好处是LEGEND和FIELDSET元素,它们将结构添加到表单中。 – 2011-04-11 20:25:47

+0

FORM元素需要***具有“操作”属性。 “这个属性指定了一个表单处理代理,对于HTTP URI以外的值的用户代理行为是未定义的。”在这种情况下应该是什么?空的?斜线? – 2011-04-11 20:38:06

+0

也许一个页面,解释您的表单只有在开启javascript时才有效? – mplungjan 2011-04-12 06:16:02

只是通过一些实例上w3school网站http://www.w3schools.com/js/js_examples.asp

,你可以得到关于如何写的onclick,事件的onmouseover

+0

这是不是最喜欢的网站建议,因为它是充满了错误,并没有根据最佳做法很长一段时间更新 – mplungjan 2011-04-11 20:19:29

+0

大声笑我从该网站了解到的基本知识。所以我认为这会有所帮助。我会在下一次采取你的观点。谢谢你警告我。 – Aditya 2011-04-11 20:20:52

+0

我知道。很多人都有。这就是为什么他们中的许多人来这里是毫不含糊地接受彻底教育的原因;)))试着发布一个'setTimeout(“functionName()”,1000)'并查看downvoting;) – mplungjan 2011-04-11 20:27:07

你并不需要一个表单标签的想法。您可以使用附加功能分配到每个元素,像这样:

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

或者你可以用它们都围绕着一个包含DIV(或其他元素),而做到这一点:

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