我有一个表单,其中某处有一个提交按钮。
然而,我想以某种方式“捕捉”提交事件并防止它发生。
有什么办法能让我做到吗?
我不能修改提交按钮,因为它是自定义控件的一部分。
我有一个表单,其中某处有一个提交按钮。
然而,我想以某种方式“捕捉”提交事件并防止它发生。
有什么办法能让我做到吗?
我不能修改提交按钮,因为它是自定义控件的一部分。
当前回答
var form = document.getElementById("idOfForm");
form.onsubmit = function() {
return false;
}
其他回答
以下是我的回答:
<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => {
e.preventDefault();
const name = e.target.name.value;
renderSearching();
return false;
}
</script>
我添加event.preventDefault();打开onsubmit,它可以工作。
你可以像这样使用内联事件onsubmit
<form onsubmit="alert('stop submit'); return false;" >
Or
<script>
function toSubmit(){
alert('I will not submit');
return false;
}
</script>
<form onsubmit="return toSubmit();" >
Demo
在做大项目时,这可能不是一个好主意。您可能需要使用事件侦听器。
请阅读更多关于内联事件vs事件监听器(addEventListener和IE的attachEvent)在这里。因为我不能比克里斯·贝克解释得更清楚。
两者都是正确的,但没有一个是“最好的”,而且可能有 开发人员选择使用这两种方法的原因。
var form = document.getElementById("idOfForm");
form.onsubmit = function() {
return false;
}
使用.addEventListener()将事件监听器附加到表单,然后在事件上调用.preventDefault()方法:
const element = document.querySelector('form'); 元素。addEventListener('submit', event => { event.preventDefault (); //实际的逻辑,例如验证表单 console.log('表单提交已取消'); }); < >形式 <按钮类型=“提交”> > < /按钮提交 > < /形式
我认为这是一个比在onsubmit属性中定义一个提交事件处理程序更好的解决方案,因为它分离了网页逻辑和结构。在逻辑与HTML分离的情况下,维护项目要容易得多。参见:Unobtrusive JavaScript。
使用表单DOM对象的.onsubmit属性不是一个好主意,因为它会阻止您将多个提交回调函数附加到一个元素。参见addEventListener vs onclick .
你可以在表单中添加eventListner,即preventDefault()并将表单数据转换为JSON,如下所示:
const formToJSON = elements => [].reduce.call(elements, (data, element) => { data[element.name] = element.value; return data; }, {}); const handleFormSubmit = event => { event.preventDefault(); const data = formToJSON(form.elements); console.log(data); // const odata = JSON.stringify(data, null, " "); const jdata = JSON.stringify(data); console.log(jdata); (async () => { const rawResponse = await fetch('/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: jdata }); const content = await rawResponse.json(); console.log(content); })(); }; const form = document.forms['myForm']; form.addEventListener('submit', handleFormSubmit); <form id="myForm" action="/" method="post" accept-charset="utf-8"> <label>Checkbox: <input type="checkbox" name="checkbox" value="on"> </label><br /><br /> <label>Number: <input name="number" type="number" value="123" /> </label><br /><br /> <label>Password: <input name="password" type="password" /> </label> <br /><br /> <label for="radio">Type: <label for="a">A <input type="radio" name="radio" id="a" value="a" /> </label> <label for="b">B <input type="radio" name="radio" id="b" value="b" checked /> </label> <label for="c">C <input type="radio" name="radio" id="c" value="c" /> </label> </label> <br /><br /> <label>Textarea: <textarea name="text_area" rows="10" cols="50">Write something here.</textarea> </label> <br /><br /> <label>Select: <select name="select"> <option value="a">Value A</option> <option value="b" selected>Value B</option> <option value="c">Value C</option> </select> </label> <br /><br /> <label>Submit: <input type="submit" value="Login"> </label> <br /><br /> </form>