29

フォームの送信ボタンが押されたときにAJAX呼び出しを行いたい。InFactクライアント側の<form>検証も行いたいので、削除できません。このコードを試しました。

<form name="search" >
Name: <input type="text" name="name1"/>
Age: <input type="text" name="age1"/>
<input type="submit" name="Submit" value="Submit" onclick="makeSearch()"/>
</form>

JS

function makeSearch(){
alert("Code to make AJAX Call");
}

このコードを使用した後、alert（）は表示されませんが、ページがリロードされます。ページのリロードをブロックしてJS関数を呼び出したい。

ありがとう

4

6 に答える 6

46

タグにonsubmit属性を追加します。form

<form name="search" onsubmit="return makeSearch()" >
  Name: <input type="text" name="name1"/>
  Age: <input type="text" name="age1"/>
  <input type="submit" name="Submit" value="Submit"/>
</form>

return false最後にJavaScript を追加します。

function makeSearch() {
  alert("Code to make AJAX Call");
  return false;
}
于 2013-01-23T05:16:46.673 に答える
30

正しい、jQuery の方法は次のようになります。

$("form").on('submit', function (e) {
   //ajax call here

   //stop form submission
   e.preventDefault();
});

あなたが言ったように、<form>要素を削除して、ajax 呼び出しをボタンのclickイベントにバインドすることもできます。

于 2013-01-23T04:43:05.520 に答える
1 
<form name="search" >
Name: <input type="text" name="name1"/>
Age: <input type="text" name="age1"/>
<input type="submit" name="Submit" value="Submit" onclick="return makeSearch();"/>
</form>

function makeSearch(){
alert("Code to make AJAX Call");
}

onclick関数でreturnを使用するだけでうまくいきます

于 2013-01-23T05:38:00.767 に答える
1

jQuery.postを使用し、送信ボタンを変更します。

送信ボタンは、POST (ajax ではなくネイティブ メソッド)を介してサーバーにデータを送信するために作成されます。ファイルをアップロードするときなど、特別な場合にのみ使用することをお勧めします。

ajax リクエストに送信ボタンを使用し続けると、IE で多くの問題が発生します。

    <html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script language="javascript">
            function makeSearch()
            {
                if(validateIdata())
                {
                    alert("send ajax request");
                    return;
                    $.ajax({    
                      type: 'POST',
                      url: url, //- action form
                      data: {name1:$('#name1').val(),age1:$('#age1').val()},
                      success: function(){
                        alert('success');
                      }
                    });
                }
            }

            function validateIdata()
            {
                if($('#name1').val() =='')
                {
                    alert("Invalid Name");
                    return false;
                }

                if($('#age1').val() =='')
                {
                    alert("Invalid Age");
                    return false;
                }

                return true;
            }
        </script>
    </head>
    <body>
        <form name="search" >
        Name: <input type="text" id="name1" name="name1"/>
        Age: <input type="text" id="age1" name="age1"/>
        <input type="button" name="Submit" value="Submit" onclick="makeSearch()"/>
    </form>
    </body>
    </html>
于 2013-01-23T05:12:19.760 に答える
0 
document.getElementById("bt1").type='submit';
                    document.getElementById("bt1").onclick="";
                    var elem = document.getElementById("bt1");
                    if (typeof elem.onclick == "function") {
                        elem.onclick.apply(elem);
                    }


<form id="org" action="">
                        <fieldset class="log">
                            <legend>Log in</legend>
                            <label for="uname">Username</label>
                            <input type="text" name="uname" id="uname" value="" required/><br />
                            <label for="pword">Password</label>
                            <input type="password" name="pword" id="pword" value="" required/><br />
                            <input type="button" onclick="organizer()" value="LOG IN" class="red-btn" id="bt1"/>
                        </fieldset>
                    </form>
于 2014-12-10T12:25:43.440 に答える
-3

最後に私は答えを得ました

$("form").live("submit", function() {
        makeSearch();
        return false;
    });
于 2013-01-23T04:46:35.653 に答える