js表单提交代码,js提交form表单的几种方式

发布时间:2020-12-19编辑:脚本学堂
有关js表单提交的实现代码,并深入分析了js提交表单的多种方式,html表单的提交,可以用submit按钮实现,也可以借助js来实现表单提交。

js表单提交代码

例子:
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js表单提交_www.jb200.com</title>
</head>
<body>
<script>
function test()
{
    document.getElementById("myform").submit();   
    alert(11);
}
</script>
<form  name="myfrom" id="myform" method="get" action="b.php">
<input type="text" name="pwd" value="" />
<input type="submit" name="sub" value="111" />
<input type="button" name="btn" value="btn" onclick="test()" />
</form>
</body>
</html>

注意:get方式提交表单时action中不能用url传值,post则可以这样传。

js提交与submit按钮提交有哪些区别?
   
1、js提交表单时不会带上 submit 按钮的值(因为没有被单击) 所有浏览器
2、input 回车提交 w3c浏览器会带上submit按钮的值,ie6则不会带
   
解决办法:
增加一个hidden域,用此方法判断,无论用哪种方式提交都会有值。

submit按钮上绑定提交事件:
<input type="submit" name="btn" value="btn" onclick="test()" />都会带上submit的值,用js提交都检测不到onsubmit状态。
w3c: 提交一次      
ie6: 分两次提交,先js在form提交
 
解决办法:
如果按钮为submit则 检测时用onsubmit事件检测
如果按钮为button,则检测通过后在触发submit事件

一定不要用js提交表单,然后又用onsubmit去检测。
单纯用js提交表单,alert, ff下阻塞表单的提交。

参考:js提交表单
js提交form表单的二种方法
js控制form表单提交的实例代码

js提交表单的多种方式

1.

document.forms.from.submit();
document.form.sumbit();
document.form.submit.click();
this.form.submit();
 

以上几种形式的js表单提交在firefox浏览器下是不起作用的
2.必须遵循w3c标准:
1)、获得form时应使用getElementById()方法
2)、用.submit()方法提交表单
3)、button的name/id绝对不能命名为”submit”
4)、form中所有的组件(按钮,文本框等)的name/id也不能命名为”submit”
# 当提交按钮的name 或者 id为submit时候,用js 提交表单,表单名.submit()时候会报一个错误,提示对象不支持此属性或办法。
解决方法是修改提交按钮的 name 或者 id 不要与 submit或者action同名即可。

js提交表单的例子:

复制代码 代码示例:
<form id="add_doc" name='test'  method="post">文章添加<br> 
文章编号:<input type="text" id="document_id" name="document_id" value="yinggen" /><br> 
文章名称:<input type="text" id="document_name" name="document_name" /><br> 
<input type="button" id="add" onclick="document.getElementById('add_doc').action='__URL__/add'; 
document.getElementById('add_doc').submit();" 
 name="add" value="提交" /> 
<input type="reset" id="reset" name="reset" value="重置" /> 
</form>