form实现表单提交的各种方法(表单提交源码)
大家好，又见面了，我是你们的朋友全栈君。
表单提交方法
1、type=“submit”
<form name=”form” method="post" action="#">
<input type="submit" name="submit" value="提交">
</form>2、type=“image”
<form name=”form” method=”post” action=”# ">
<input type=”image” name=”submit” src=”btnSubmit.jpg”>
</form>3、使用链接来提交表单，javascript的DOM模型：
<form name=”form” method=”post” action=”#”>
<a href=”javascript:form.submit();”>提交</a>
</form>这种方法实际上是调用了一个javascript函数，使用javacript函数来提交表单，方法就非常多非常灵活了，比如可以把它加入到任意一个标签的onclick事件中：
<form name=”form” method=”post” action=”#”>
<div onclick=”javascript:form.submit();”>
<span>提交</span>
</div>
</form>但是，如果一个表单里有需要有多个提交按钮怎么办呢？ 比如一个表单里的提交按钮所指向的处理页面不同，这样由于表单在定义的时候就已经确定下表单数据的处理页面，所以单纯地在表单里放多个提交按钮是没有办法达到目的的。这就需要javascript。 首先定义一个函数：
代码如下:
<script language=javascript> function query(){
form.action=”query.php”; form.submit();} function update(){
form.action=”update.php”; form.submit();} </script>通过javascript改变form的action属性值，这样就可以实现多提交按钮而且功能不同了，页面内代码如下：
代码如下:
<form name=”form” method=”post” action=”#”>
<input type=”button” name=”query” onclick=”query();” value=”查询”>
<input type=”button” name=”update” onclick=”update();” value=”更新”>
</form>上面一段代码，使用的是普通的按钮，而提交功能的实现方法是在它的onclick事件中调用javascript函数. 有了上面这几种提交表单的方法,我想差不多够应付复杂的表单了.
表单提交注意点
注意：每个input标签都要有name属性，form要有action和method。 当然，这里也可以使用button代替input作为提交的按钮： button的type属性有两个值：button和submit。当不写type属性时，其type的默认值是submit，点击的话也会直接提交数据
使用form的onsubmit()方法对表单数据进行 验证后 再提交
<form id="form1" action="/test" method="post" onsubmit="return checkForm()">
<input type="submit" value="提交">
//或者
<button type="submit">提交</button>
<script type="text/javascript"> function checkForm(){
var user= document.getElementById('user').value; var psw= document.getElementById('psd').value; if (...) {
//如果验证不通过 return false; } else {
//验证通过 return true; } } </script>这里给form元素加上了onsubmit()方法，它会在“提交”按钮点击的时候被触发，该方法一定要有return返回值，如果值为false则不进行提交，如果为true则提交。
给input type=’button’添加onclick事件，验证通过则调用submit()方法提交
<form id="form1" action="/test" method="post">
<input type="button" value="提交" onclick="checkForm();">function checkForm(){
var user= document.getElementById('user').value;
var psw= document.getElementById('psd').value;
if(...){
//验证不通过
return false;
}
document.getElementById("form1").submit();
} 使用ajax对数据进行 验证后 再提交
<form id="form1" action="/test" method="post">
<input type="submit" value="提交" onclick="login()">
//或者
<button type="button" onclick="login()">提交</button>
<script type="text/javascript"> function login() {
$.ajax({
type: "POST", dataType: "json", url: "/users/login" , data: $('#form1').serialize(), //提交的数据 success: function (result) {
console.log(result); //打印服务端返回的数据(调试用) if (result.resultCode == 200) {
alert("提交成功"); } ; }, error : function() {
alert("提交失败"); } }); } </script>注意： 如果使用button，要先进行数据验证的话，就必须要将type的值设置为”button”，即表示它是一个按钮
这里提交的数据’data’，使用了serialize()方法将提交的表单值序列化（即a=1&b=2格式），当然你也可以写成：
{
"username":username,
"password":password
}表单的 input、select 默认的样式是不同的，所以就造成了width设置的一样，但就是对不齐，可以设置box-sizing:border-box;来解决不一致问题
补充
表单具有默认的提交行为，默认是同步的，同步表单提交，浏览器会锁死（转圈儿）等待服务端的响应结果。 表单的同步提交之后，无论服务端响应的是什么，都会直接把响应的结果覆盖掉当前页面。
后来有人想到了一种办法，来解决这个问题，那边是服务端重定向（服务端重定向针对异步请求无效）
消除自动填充：通过添加readonly＆onfocus =“this.removeAttribute（'readonly'）;
解决了这个问题。
<input type="password" name="Password" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" >发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/126078.html原文链接：https://javaforall.cn
腾讯云开发者
