Question

我有一个提交隐藏表单的按钮：

<a href = "javascript:;" onclick = "document.getElementById('work-for-form').submit();">

形式：

<form id="work-for-form"  action="localhost/update" method="PUT" style="display: none;">
{{ csrf_field() }}
</form>

我的js：

$("#work-for-form").submit(function(event){
    event.preventDefault();
    console.log(event);
});

但表单仍然会加载新页面。

我做错了什么？感谢

Answer 1

a上的onclick事件太强大，无法阻止提交表单。我建议以下内容来解决这个问题：

<a href="javascript:;" >form submit</a>

<form id="work-for-form"  action="/update" method="PUT" style="display: none;">{{ csrf_field() }}</form>

<script>
$("a").on("click",function(){
    $("#work-for-form").submit();
})
$("#work-for-form").submit(function(event){
    alert('intercept');
    event.preventDefault();
    console.log(event);
});
</script>

另见https://jsfiddle.net/9hta6f48/

Answer 2

您可以使用return false，也可以使用eventListeners

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

或者

function mySubmit(){
      alert('Will not submit');
      return false;
   }
</script>

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

或事件监听器

var myFuncRef = function() { event.preventDefault() }

element.attachEvent('onclick', myFuncRef);

Answer 3

您的代码必须位于$（document）.ready之内，或者必须在呈现表单之后

$(document).ready(function(){
  $("#work-for-form").submit(function(event){
    event.preventDefault();
    console.log(event);
  });
});

表单preventDefault无法正常工作

3 个答案: