表单 preventDefault 不起作用

Question

I have a button that submits a hidden form:

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

Form:

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

And my js:

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

But the form still loads a new page.

What am i doing wrong? Thanks

Answer 1

The onclick event on your a is too strong to prevent the submission of the form. I would suggest the following to fix this:

<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>

see also https://jsfiddle.net/9hta6f48/

Answer 2

You can use return false or you can use eventListeners

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

Or

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

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

Or event listeners

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

element.attachEvent('onclick', myFuncRef);

Answer 3

Your code must be inside $(document).ready or must be after the form is rendered,

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