web-dev-qa-db-ja.com

onsubmit refreshhtmlフォーム

Javascriptを使用してフォームのデータを送信しようとしています。これがhtmlです。

_<form onsubmit="post();">
//input fields here
</form>
_

これがpost()関数のJavascriptです。

_var post = function() {
alert('the form was submitted');
return false;
}
_

私の問題は、Javascriptは実行されますが、フォームは引き続きページを処理して更新することです。

フォームの更新が停止することを期待して、_return false;_コードを配置しました。

javascriptjqueryhtmlajaxonsubmit
9
Frank

次のように、onsubmitハンドラーのpost（）関数の後にreturnfalse部分を配置する必要があります。

<form onsubmit="post();return false;">
//input fields here
</form>
16
D. Strout

JsをDOMから遠ざけてください。

<form id="myform" action="somepage.php" method="post">
//input fields
</form>

JQuery：

$('#myform').submit(function(event){
    alert('submitted');
    event.preventDefault();
});
7
AlienWebguy

インラインdom-0ハンドラーから実際にfalseを返す必要があります。だから変更

onsubmit = "post();">

に

onsubmit = "return post();">

または、フォームにIDを指定して、次のようにすることもできます。

<form id="form1" onsubmit = "post();">

次に、あなたのdomの準備ができている安全な場所から：

document.getElementById("form1").onsubmit = post;
3
Adam Rackis

jQueryタグを追加したので、これを行うための最良の方法は次のとおりです。
邪魔にならないイベント添付

$('form').submit(function(){
        alert('the form was submitted');
        return false;
    });

あなたのやり方ではそうあるべきです。

<form onsubmit="return post();">
2
gdoron is supporting Monica

この投稿はjQueryでタグ付けされているため、次のソリューションを提供します。

$('form').submit(function(e){
  //prevent the form from actually submitting.
  e.preventDefault();
  //specify the url you want to post to.
  //optionally, you could grab the url using $(this).attr('href');
  var url = "http://mysite.com/sendPostVarsHere";
  //construct an object to send to the server
  //optionally, you could grab the input values of the form using $(this).serializeArray()
  var postvars = {};
  //call jquery post with callback function
  $.post(url, postvars, function(response){
    //do something with the response
    console.log(response);
  }, 'json')
});
1
Jordan Arseno