フォームがonsubmit関数の実行後にブラウザのロードを停止する

Question

私は、onsubmitイベントハンドラを持つフォームを生成するJavaScriptを持っています。

function processLoginForm(form) { 
    var userName = form.uname.value; 
    document.writeln("username = "+userName+"<br>"); 
    return false; 
}; 

このフォームがロードされると、ブラウザの読み込みが完了して行われます。私は基本的にフォームの値を印刷し、返送しています。このprocessLoginForm（）関数で

document.writeln('<form action="#" id="loginForm" onsubmit="processLoginForm(this);">'); 

：フォームはこのように定義され。ページの読み込みはブラウザで行います。しかし、フォームを送信するためにボタンをクリックすると、コードが処理されますが、ブラウザはまだこの読み込みアイコンを表示して停止することはないものを読み込もうとしています。私はprocessLoginForm（）関数でtrue、false、または何も返そうとしませんでしたが、影響はありません。

送信ハンドラの実行時にブラウザの読み込みを停止するにはどうすればよいですか？

Answer 1

HTMLに関数をインライン展開しないことをお勧めします。代わりに、この操作を行います。

HTML

<form action="#" id="loginForm"> 

はJavaScript

document.getElementById('loginForm').onsubmit = function(event){ 
    event.preventDefault(); 
    //continue to process the form 
} 

を自動的にイベントリスナーに渡される引数eventに取り付けられている。event.preventDefault()方法は、ハンドラのデフォルトの動作をキャンセルします。この場合、フォームアクションに従って/#にあるページをロードしようとしています。