如何防止表格被提交？

243

我有一个表单，其中某处有一个提交按钮。

但是，我想以某种方式“捕获”提交事件并防止它发生。

有什么办法可以做到吗？

我无法修改“提交”按钮，因为它是自定义控件的一部分。

javascript  html  forms 
— 内森·奥斯曼（Nathan Osman）
source
您仍然可以访问“提交”按钮。渲染页面并通过查看页面源获取其ClientID。然后，使用类似jQuery的方法，您可以做类似$（'＃ctl01_cph01_controlBtn1'）。click（function（）{return false;}）;的操作。
— 重生
@Rafael：是的，但是那是不得已的做法-这是一个非常复杂的控件。
— 内森·奥斯曼
@Raf基于asp.net，也不是最佳实践。但是它本质上是正确的。我只是避免偷看源代码并使用控件名称，因为如果有人编辑页面，它可能会更改。意外的副作用等。

Answers:

260

与其他答案不同，返回false仅是答案的一部分。考虑在return语句之前发生JS错误的情况...

html

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

脚本

function mySubmitFunction()
{
  someBug()
  return false;
}

返回false此处将不会执行，并且表单将以任何一种方式提交。您还应该致电preventDefault以阻止Ajax表单提交的默认表单操作。

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

在这种情况下，即使存在错误，表单也不会提交！

或者，try...catch可以使用一个块。

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}
— 本·罗
source
4
为什么不false直接从返回onsumbit？
— ProfK
1
您可能想在onsubmit中向用户显示错误消息。例如，“完成此必填字段然后提交”。在这种情况下，event.preventDefault会派上用场
— 马克•乔利
1
@ProfK如果使用event.preventDefault（）则无所谓，try / catch只是错误处理的一部分
— Ben Rowe 2013年
11
<form onsubmit =“ return mySubmitFunction（event）”>起作用了……不得不在Firefox中的括号中使用事件一词
— danday74
5
@BenRowe您应该将evt参数添加到被调用的方法中。 (<form onsubmit="return mySubmitFunction(evt)">)否则会给出未定义的错误。
— UfukSURMEN
143

您可以onsubmit像这样使用内联事件

<form onsubmit="alert('stop submit'); return false;" >

要么

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

演示版

现在，在进行大型项目时这可能不是一个好主意。您可能需要使用事件监听器。

请在此处阅读有关内联事件与事件侦听器（addEventListener和IE的attachEvent）的更多信息。因为我无法像克里斯·贝克那样解释它。

两种方法都是正确的，但是它们本身都不是“最佳”的，并且开发人员选择使用这两种方法可能是有原因的。

— Reigel
source
尼斯，快速解决方案。
— 费尔南多·托雷斯
由于某种原因，<form onsubmit="return false;" >对我不起作用。
— 阮
102

使用将事件侦听器附加到表单.addEventListener()，然后在.preventDefault()上调用方法event：

const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
});
<form>
  <button type="submit">Submit</button>
</form>
展开摘要

我认为这比定义submit与onsubmit属性内联的事件处理程序更好，因为它可以将网页逻辑和结构分开。维护逻辑与HTML分离的项目要容易得多。请参阅：简洁的JavaScript。

使用DOM对象的.onsubmit属性form不是一个好主意，因为它阻止您将多个提交回调附加到一个元素。请参见addEventListener与onclick 。

— MichałPerłakowski
source
1
＆for jquery： $("button").click(function(e) { e.preventDefault() });
— Nixen85 '18
2
+1 dunno为什么所有其他答案都继续使用内联onsubmits，因为OP提到他无法更改按钮（这意味着他也可能也无法更改表单）。想知道是否有一种方法可以获取“表单”（如果我们具有按钮ID
— -Robert Sinclair
16

试试这个...

HTML代码

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

jQuery代码

$(function(){
    $('.submit').on('submit', function(event){
        event.preventDefault();
        alert("Form Submission stopped.");
    });
});

要么

$(function(){
    $('.submit').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented / stopped.");
    });
});
— 萨克
source
18
这个问题中没有jQuery标记。
— 米哈尔Perłakowski
6
@Gothdo，但解决方案仍然相同。疯了吧？
— 凯文B
7
@Gothdo是的，完全一样。eventObject.preventDefault。绑定处理程序的方式不会更改解决方案。我什至认为您的答案与接受的答案没有什么不同。
— 凯文B
stopPropagation在我的情况下是唯一有效的方法。谢谢！:)
— cregox
13

到目前为止，以下作品（在chrome和firefox中测试）：

<form onsubmit="event.preventDefault(); return validateMyForm();">

其中validateMyForm（）是false验证失败时返回的函数。关键是要使用名称event。我们不能用于例如e.preventDefault()

— 维克拉姆·普迪（Vikram Pudi）
source
1
onsubmit =“ return validateMyForm（）;” 足够了，但是validateMyForm（）应该返回true或false。
— Adrian P.
8 
var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}
— 奈库斯
source
2
我认为使用.onsubmit是个坏主意，因为它阻止您将多个submit回调附加到一个元素。我建议使用.addEventListener()。
— 米哈尔Perłakowski
3
即使通过属性.onsubmit设置了事件处理程序，您仍然可以通过.addEventListener（）添加其他处理程序。由属性注册的处理程序将首先被调用，然后按照注册顺序在.addEventListener（）中注册的处理程序被调用。
— 丹尼尔·格兰杰
2

要遵循不干扰JavaScript的编程约定，并取决于DOM加载的速度，使用以下方法可能是一个好主意：

<form onsubmit="return false;"></form>

然后，如果您使用的是库，则可以使用onload或DOM准备好连接事件。

$(function() {
    var $form = $('#my-form');
    $form.removeAttr('onsubmit');
    $form.submit(function(ev) {
        // quick validation example...
        $form.children('input[type="text"]').each(function(){
            if($(this).val().length == 0) {
                alert('You are missing a field');
                ev.preventDefault();
            }
        });
    });
});
label {
    display: block;
}

#my-form > input[type="text"] {
    background: cyan;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" action="http://google.com" method="GET" onsubmit="return false;">
    <label>Your first name</label>
    <input type="text" name="first-name"/>
    <label>Your last name</label>
    <input type="text" name="last-name" /> <br />
    <input type="submit" />
</form>
展开摘要

另外，我将始终使用该action属性，因为某些人可能会运行某些插件（如NoScript），这会破坏验证。如果您使用的是action属性，那么服务器至少会基于后端验证来重定向您的用户。window.location另一方面，如果您使用，则情况会很糟糕。

— 塞巴斯蒂安·帕尔玛（Sebastian Palma）
source
2

为了防止表单提交，您只需要这样做。

<form onsubmit="event.preventDefault()">
    .....
</form>

通过使用以上代码，这将阻止您提交表单。

— 祖海尔·塔哈（Zuhair Taha）
source
0

这是我的回答：

<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和它的作品。

— Yozawiratama
source
0

您可以将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>
展开摘要

— 哈桑·优素福
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.