form实现表单提交的各种方法(表单提交源码)

1、type=”submit”<formname=”form”method=”post”action=”#"><inputtype=”submit”name=”submit”value=”提交&quo

大家好,又见面了,我是你们的朋友全栈君。

表单提交方法

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');" >
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/126078.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Windows平台及服务器部署安装多个Tomcat服务(详细版)

    Windows平台及服务器部署安装多个Tomcat服务(详细版)Tomcat安装有两种方式,一是下载安装版,这个也是在部署多个Tomcat服务的时候最方便的,也是最快的,二是就是下载免安装版,解压即可,单个Tomcat免安装版是最快的。一、下载Tomcat,我用的是Tomcat8.5到Tomcat官网http://tomcat.apache.org/,根据需求下载所需要的版本我下载的是Tomcat8.5二、安装二.一安装版下载…

  • 104规约 scada

    104规约 scada104规约的报文帧分为三类:I帧、S帧和U帧。I帧称为信息帧,长度一定大于6个字节,被称作长帧,用于传输数据;S帧称为确认帧,长度只有6个字节,被称作短帧,用于确认接收的I帧;U帧称为控制帧,长度只有6个字节,也被称作短帧,用于控制启动/停止/测试。长帧报文分为APCI和ASDU两个部分,而短帧报文只有APCI部分。APCI的6个字节是这样构成的:起动字符68H,1个字节;后面的报文长

  • (深度学习)Pytorch之dropout训练

    (深度学习)Pytorch之dropout训练(深度学习)Pytorch学习笔记之dropout训练Dropout训练实现快速通道:点我直接看代码实现Dropout训练简介在深度学习中,dropout训练时我们常常会用到的一个方法——通过使用它,我们可以可以避免过拟合,并增强模型的泛化能力。通过下图可以看出,dropout训练训练阶段所有模型共享参数,测试阶段直接组装成一个整体的大网络:那么,我们在深度学习的有力工具——Pytor…

  • 金税盘计算机USB无法识别,金税盘无法识别怎么办

    金税盘计算机USB无法识别,金税盘无法识别怎么办摘要:这篇文章将给财务会计人员讲解金税盘无法识别怎么办相关的内容,在金税盘无法识别怎么办这篇财务资讯中我们详细讲解了有关金税盘无法识别怎么办的会计知识。金税盘无法识别怎么办部分情况可能是因为USB供电不稳定,造成金税盘驱动无法正常运行;建议电脑重启,金税盘数据线重新插拔一下或者更换一个USB端口连接试试.如果多次尝试无效,则需要联系服务单位处理.金税盘使用增值税防伪税控系统,可开具增值税专用发票和…

  • 火狐驱动镜像下载

    火狐驱动镜像下载

    2021年11月11日
  • Keil注册机破解

    Keil注册机破解之前安装Keil5,使用注册机破解之后在使用调试功能时还是提醒RunningwithCodeSizeLimit:2K,查了一下资料好像是因为假破解,因为注册机版本不对,所以Keil跟你开了个玩笑,其实真相是没有破解。于是我重新换了个注册机重新破解,然后就没有再出现这个提示了。以下是破解步骤、安装好Keil之后,右键以管理员权限打开Keil,然后左上角file-license…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号