美文网首页网页前端后台技巧(CSS+HTML)
form表单中点击button直接提交问题

form表单中点击button直接提交问题

作者: 18587a1108f1 | 来源:发表于2017-07-26 21:16 被阅读32次

注意:form表单中会默认无类型按钮为提交(submit)按钮

form表单下的按钮在没有指定type类型的时候,如果我们同时给其添加了点击事件的话。会发现我们在点击的时候会默认的执行事件并提交表单。如:

<button id="validate" onclick="validate();"></button>

<script>    
  function validate(){
        alert("test");   
 }
</script>

原因如下:

The type attribute controls the behavior of the button when it is activated. It is an enumerated attribute. The following table lists the keywords and states for the attribute — the keywords in the left column map to the states in the cell in the second column on the same row as the keyword.Keyword State Brief descriptionsubmit Submit Button Submits the form.reset Reset Button Resets the form.button Button Does nothing.**The missing value default is the Submit Button state.

即form下的button 按钮在没有明确的给出type类型时,会有一个默认值为:type=”submit”. 导致button按钮标签每次点击都会将表单自动提交,根本就起不到一个按钮的作用。

解决办法如下:

1 将button标签加上上 type="button"的属性 即可解决问题
<button id="validate" type="button" onclick="validate();"></button>
2 用<input type="button"> 标签也可以解决问题
<input id="validate" type="button" onclick="validate();" />

参考链接:http://blog.csdn.net/orichisonic/article/details/54096066

相关文章

网友评论

    本文标题:form表单中点击button直接提交问题

    本文链接:https://www.haomeiwen.com/subject/gmymkxtx.html