零基础学做网站培训介绍

当前位置:

jquery提交表单:实现点击同时提交多个form表单

通常情况下,我们提交一个form表单,需要使用button按钮来实现,但是在实际开发过程中往往点击form表单之外的元素来提交表单。另外有时一个网页上会有多个表单,提交到不同的地址,怎么实现点击同时提交多个form表单呢?

jquery提交表单:实现点击同时提交多个form表单

下面学做网站论坛介绍一下操作方法。

先贴出相关代码:


<script>
//实现点击同时提交多个form表单
$('.btn').click(function(){
$("form").submit();
});
</script>

方法/步骤

  1. 新建一个html文件,命名为test.html,用于存放同时提交多个form表单代码。

    jquery提交表单:实现点击同时提交多个form表单

  2. 在test.html文件内,使用form标签创建一个表单,并设置表单的id为myform。

    jquery提交表单:实现点击同时提交多个form表单

  3. 在test.html文件内,在form表单内,创建两个输入框,一个用户名的输入框,一个密码输入框,同时设置它们的name属性分别为user和pwd。

    jquery提交表单:实现点击同时提交多个form表单

  4. 在test.html文件内,在form表单内,使用button标签创建一个按钮,按钮名称为“提交”。

    jquery提交表单:实现点击同时提交多个form表单

  5. 在test.html文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行sub()函数。

    jquery提交表单:实现点击同时提交多个form表单

  6. 在js标签中,创建sub()函数,在函数内,通过id(myform)获得表单对象,使用submit()方法实现表单内容的提交,并使用alert()方法提示提交的结果。

    jquery提交表单:实现点击同时提交多个form表单

  7. 在浏览器打开test.html文件,填写表单内容,点击按钮,查看实现的效果。

    jquery提交表单:实现点击同时提交多个form表单

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想
  • 图片轮播特效在网站制作过程中经常会用到,它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中,也讲过如何制作网站幻灯片,我们在学
  • (特别全)网站收录提交链接及各大搜索引擎站长工具百度网站收录提交http://www.baidu.com/search/url_submit.html百度自动提交百
  • 学习2天,提交我的博客模版作业,老师这是我学习了博客网站课程之后,自己做的博客网站,感谢老师的课程,发自内心感谢。我把这个模版对应的整站
  • 很多网站都是注册登录功能,如果想在自己的网站上添加注册,登录功能,就需要制作一个注册、登录表单,制作注册、登录表单是比较简单的,利用DW就可以
  • wordpress表单插件contact-form介绍:WordPress联系表单插件 – Contact Form 7 是一款简单易用扩展性灵活的表单插件,可以自定义各式各样不同类型的
  • 有些同学在使用WP程序做网站时,安装了WP程序之后进入配置数据库这一步,可是出现了点击‘创建配置文件’无反应的情况,这是由于有些同学使用的网站空间
  • 我们在进行DZ模板制作时,使用DIY功能去调用论坛中的不同版块的数据,由于DIY会自动增加外面的层,有时会导致某些模板的diy没反应,也有的只会显示不
  • 在学习做网站的基础课程中,我们就讲到网站空间是做网站必备的,由于网站空间是存放网站程序的位置。那么是不是对于一些新手去买一个网站空间只能建一
  • 问题:老师,我现在是一个主机俩个域名,安装完一个就无法使用另一个域名了,这个是要怎么解决呀?怎么让二个域名都可以访问这个网站呢?回复
  • 特别近有学员问我wordpress安装的时候,出现cannot modify header information – headers already sent by (……)的错误,开始以为是版本问题,于是换了
  • 对于很多网站来说,缺少不了用户留言页面,对于学做网站新手来说,做一个用户留言页面可以使用Wordpress留言板插件。下面是Wordpress留言板插件contac