取消form表单自动提交

1.form表单会自动提交的几种情况

1)表单里有一个type="submit"的按钮,回车键生效

2)表单里只有一个type="text"的input,回车键生效。

解决一键回车表单提交只需在form上加上οnsubmit="return false;"就行

该<form>标签里面的<button>的Type属性改为button,那样也可以取消form表单的自动提交

我们在<button>标签中没加上type="button"的话,from会自动将type识别为"submit",然后提交到的是form表单里的action路径,不是我们button在js中所写的路径,如果form表单没有设置action属性,自动提交的请求是当前页面地址,即自动刷新;加上之后,button就是普通的button按钮,我手动去提交表单,我们的路径不是写在页面标签上,而是在js中,这样能防止服务器路径暴露,也能让按钮根据不同的情况把表单数据提交到不同的方法中去。

其他详细分析可参考:http://www.360doc.com/content/15/0121/23/14009801_442697693.shtml

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的用户注册表单,包括用户名、密码、地区和注册按钮,并且取消了默认的提交操作: ```html <form id="registerForm"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> <label for="password">密码:</label> <input type="password" id="password" name="password" required> <label for="location">地区:</label> <select id="location" name="location"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> </select> <button type="button" id="registerBtn">注册</button> </form> <script> // 取消默认的提交操作 document.getElementById("registerForm").addEventListener("submit", function(event) { event.preventDefault(); }); // 绑定注册按钮的点击事件 document.getElementById("registerBtn").addEventListener("click", function() { // TODO: 使用 AJAX 提交表单数据 }); </script> ``` 在这个表单中,我们使用了 `label` 元素来标记每个表单控件,这可以提高表单的可用性。同时,我们使用了 `required` 属性来指定必填项,这可以在用户未填写必填项时阻止表单提交,并在表单控件周围自动显示一个红色的提示框。 在 JavaScript 代码中,我们使用了 `preventDefault()` 方法来取消默认的提交操作。然后,我们绑定了注册按钮的点击事件,以便在用户点击按钮时使用 AJAX 提交表单数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值