フォームのpreventDefault

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> 

はあなたがreturn falseを使用するかはeventListeners

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

それとも

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

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

やイベントを使用することができますもhttps://jsfiddle.net/9hta6f48/

Answer 2

を見ますリスナー

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

element.attachEvent('onclick', myFuncRef); 

Answer 3

あなたのコードは.ready $（ドキュメント）内でなければならないか、フォームがレンダリングされた後でなければならない、

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