【web开发】js实现表单提交

news/2024/7/19 14:39:06 标签: submit, web, js
webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

1.方法一

通常表单的提交有两种方式,一是直接通过html的form提交,代码如下:

<form action="" method="" id="forms">
    <input type="text" name="username" value="" />
    <input type="password" name="pwd" value="" />
    <input type="submit" value="提交"/>
</form>

有校验方法

<!--HTML-->
<form action="" method="" id="test_form">
    <input type="text" name="username" value="" />
    <input type="password" name="pwd" value="" />
    <button type="button" onclick='doSubmitForm()'>提交<button/>
</form>


<script>
var form = document.getElementById('test_form');
//再次修改input内容

form.submit();
</script>

2.方法二

这种方法有个缺点就是,打乱正常的表单提交程序,通常用户输入完成后点击回车键就可以提交,但是这个方法实现不了,所以,使用下面的方法便可以解决这个问题,,通过form自身的onsubmit方法,来触发提交,然后进行input的修改:

<!--HTML-->
<form id='test_form' action='' method='' onsubmit='return checkForm()'>
    <input type='text' name='username' value=''/>
    <input type='password' name='pwd' value =''/>
    <button type='submit'>提交<button/>
</form>

<script>
function checkForm(){
    var form = document.getElementById('test_form');
    //可在此修改input            
    //进行下一步
    return true;
}
<script/>

3.参考

  1. https://www.cnblogs.com/web-wjg/p/7894657.html

4.参与讨论

在这里插入图片描述


http://www.niftyadmin.cn/n/1113857.html

相关文章

案例:WLC HA主WLC进入维护模式

案例场景&#xff1a; 如图所示&#xff0c;7609-1和7609-2分别是网络中的核心设备&#xff0c;起了HSRP&#xff0c;7609-1连接的是WLC-1&#xff0c;,7609-2连接的是WLC-2&#xff0c;WLC1和WLC2的RP口相互连接。 WLC的管理地址为192.168.53.1/24&#xff0c;而RMI地址分别为…

Linux 新的安全威胁-外星 hacker(转)

Linux 新的安全威胁&#xff0d;外星 hacker(转)[more]Robin Roblimo Miller 在 NewsForge 写到&#xff1a;“英国媒体卫报 (Guardian Newspapers) 提到科学家研究表明地球上计算机很可能将受到来自外星 hacker 的攻击&#xff0c;目前还没有足够的证据显示 Linux 具有免疫能力…

7,SFDC 管理员篇 - 数据模型 - 公式和验证 1

1&#xff0c;自定义公式 Customize | Your Object | Fields | Add Fields Field SF的公式和Excel的公式差不多&#xff0c;都是支持各种运算和结果 例1&#xff0c;以opportunity 为例&#xff0c;选择自定义公式的返回类型, 选择文本并填写Field Label 可以填写公式&#xff…

变量引用的错误:UnboundLocalError: local variable 'range' referenced before assignment

1 class Battery():2 """一次模拟电动汽车电瓶的简单尝试"""3 def __init__(self,battery_size70):4 self.battery_size battery_size5 # self.range range6 def describe_battery(self):7 print(self.bat…

IOS XE-show memory

有些时候&#xff0c;我们可能会遇到IOS XE设备的high memory的情况。我们可以使用的命令去查看相关信息。 例如&#xff1a; Router# show version Router# show memory Router# show processes memory Router# show platform software status control-processor brief Router…

【Linux应用】mdadm失败:RUN_ARRAY fail:Invalid argument

1.简介 mdadm&#xff0c;lvm工具提供强大的动态磁盘管理功能&#xff0c;只是操作RAID的用户态工具而已&#xff0c;两者都需要内核md的支持&#xff0c;故使用前需查看内核是否支持md&#xff0c;如果不支持需重新编译内核。如果内核不支持&#xff0c;会出现RUN_ARRAY fail…

Linux文本处理命令(转)

Linux文本处理命令(转)[more] Sort命令 sort命令的功能是对文件中的各行进行排序。sort命令有许多非常实用的选项&#xff0c;这些选项最初是用来对数据库格式的文件内容进行各种排序操作的。实际上&#xff0c;sort命令可以被认为是一个非常强大的数据管理工具&#xff0c;用…

爬虫:Scrapy10 - Link Extractors

Link Extractors 适用于从网页&#xff08;scrapy.http.Response&#xff09;中抽取会被 follow 的链接的对象。 Scrapy 默认提供 2 种可用的 Link Extractor&#xff0c;但你可以通过实现一个简单的接口创建自己制定的 Link Extractor 来满足需求。Scrapy 提供了 from scrapy.…