关于form下提交和重置input按钮默认事件问题

关键词：

今天用js清空input值的时候死活不行，搞了半天终于可以了。。原因是因为默认事件。。

HTML代码

    <form>
        <input id="input" type="txt" value="查询">
        <input id="submit" type="submit" value="提交">
        <input id="reset" type="reset" value="重置">
    </form>

因为在form里的submit和reset按钮，点击后有默认事件，取消默认事件js清空value才会生效。。

    <script>
        var input = document.getElementById("input");
        var submit = document.getElementById("submit");
        var reset = document.getElementById("reset");
        submit.onclick = function(e){
            e.preventDefault();
            input.value = "";
        }
        reset.onclick = function(e){
            e.preventDefault();
            input.value = "";
        }
    </script>

晕。这个问题居然费了半天才搞定

input和button元素作为提交重置按钮功用的区别。

首先，input元素和button元素都是可以作为普通按钮、提交按钮、重置按钮的。<inputtype="button"value="button"><inputtype="submit"><inputtype="reset">input元素默认text类型<buttontype="button">button</button><b 查看详情

form表单回车提交问题

最近发现在form里的一个input敲击回车键时会提交form表单。查了资料，发现会出现这个情况的原因是浏览器帮我们做了处理。这里总结几条规则：1. 如果表单里有一个type=”submit”的按钮，回车键生效。2.如果表单里只有一个ty... 查看详情

按下回车默认提交form表单问题

最近开发中碰到一个问题，项目中有几个列表展示页面，允许用户通过查询条件模糊查询数据。用户录入关键字后点击回车会调用查询方法根据关键字查询，原先功能没有问题，但是最近发现在查询输入框中按下回车会直接刷新... 查看详情

html表单

...标签：form表单标签：<form>表单数据</form>action：提交地址method：提交方式post：装包提交get：url提交，可以在地址中显示 input标签：单行文本框：type:类型name:名字value:默认值按钮：button：普通按钮submit：提交按钮reset&... 查看详情

html-4,form表单输入传文件单选多选下拉菜单文本描述重置submit按钮限制输入

<!--formHTTP协议action:提交的服务器网址method:get(默认)|post(应用：登录注册、上传文件)页面中的aimglink默认是get请求inputtype:text:文本输入框password:密码输入框file:文件按钮提交文件的时候一定要用post一定要给form标签添加Enctype=‘mu... 查看详情

php关于循环、form表单的问题

其中在程序里，两层while循环，用于输出论坛里的回复和回复的回复。我为管理员做了一个delete的按钮，分别delete回复，和回复的回复。两个都是form，提交到不同的php文件处理。在64-77行(对回复的回复的删除),119-132（对回复的删... 查看详情

submit和button的区别

submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了。如果表单在点击提交按钮后需要用JS进行处理（包括输入验证）后再提交的话，通常都必须把submit改成button，即取消其自动提交的行为，否则，将会造成... 查看详情

阻止form回车自动提交

...题:当form表单中只有一个input时,在input中按回车键会自动提交.解决方案:　　1.form元素上加onsubmit="returnfalse"(推荐)　　2.多个input存在时按回车不会自动提交(注意:表单中有提交按钮的话,该方法不行)　　3.给input绑定onkeydown事件 ... 查看详情

用事件处理两个提交按钮

】用事件处理两个提交按钮【英文标题】：Handlingtwosubmitbuttonswithevently【发布时间】：2011-10-3115:41:30【问题描述】：我有一个带有两个提交按钮的表单：<form>...<inputtype="submit"name="update"value="Update"></input><inputtype="sub... 查看详情

js表单提交和submit提交的区别

...单内有<inputtype="submit">，通过点击这个input来提交表单B表单内没有<inputtype="submit">，而是写了一个<inputtype="button">，并且在这个input上绑定了click事件，在事件的监听器内用js的form.submit()提交。1.... 查看详情

关于form表单中button按钮自动提交问题

坑:点击确认按钮,form表单提交2次,发送后台2次请求　　//错误代码:<Buttonid="btnSubmit"name="btnSubmit"class="btnbtn-primary">确认</Button>$("#btnSubmit").click(function(){$(‘#formSave‘).ajaxSubmit(function(data){if(dat 查看详情

form中input是类型有哪些？

text:文本框password:密框码radio:单选按钮checkbox:复选框file:文件选择域hidden:隐藏域button:按钮reset:重置按钮submit:表单提交按钮image:图片按钮，类似submit可以为按钮添加图片 查看详情

form表单提交注意事项

...若只有一个input（不管type是什么），按回车键表单会自动提交，但是当表单中存在多个input时，按回车键不会执行任何操作，这是form表单的一个特性。2、在一个表单中若存在一个input是submit，则按回车表单会提交；如果不想用提... 查看详情

form表单中的input有哪些类型

text:文本框password:密码框radio:单选按钮checkbox:复选框file:文件选择域hidden:隐藏域button:按钮reset:重置按钮submit:表单提交按钮image:图片按钮,类似submit可以为按钮添加图片... 查看详情

表单提交时submit按钮的值没有被提交(代码片段)

FORM表单中，submit提交的时候，有时候有值，有时候无值FORM表单中，submit的name是Submit。如下<inputtype="submit"name="Submit"value="提交表单"/>1.出现的几种情况1.当点击submit按钮时，FORM被提交，提交后获取的数组中有Submit下标的值2.... 查看详情

阻止表单的默认提交事件(代码片段)

表单一点击提交按钮(submit)必然跳转页面，如果表单的action为空也会跳转到自己的页面，即效果为刷新当前页。 如下，可以看到一点击提交按钮，浏览器的刷新按钮闪了一下：如果想要阻止表单的默认提交事件，有以下几种... 查看详情

移动端form表单

始终绑定submit事件不单独的对【提交】按钮绑定click事件，对整个表单绑定submit提交事件，这样可以让整个表单内的文本框获得Enter提交的VIP待遇，并且在移动端中可以让文本框聚焦时键盘的右下角是【前往】。input元素的typemaxle... 查看详情

解决关于vue项目中点击按钮路由多了个问号

问题描述：在vue项目开发过程中，点击按钮结果页面刷新了一遍后来发现路径变成了localhost:8080/?#/login 原因：这里是form表单，点击了button按钮，触发了他的默认事件，就是触发了提交这个行为。 解决方案使用@click.prevent... 查看详情