2

ユーザーが電子メール アドレスを登録するときにランダムな PIN 番号をユーザーに返すために使用している次の AJAX スクリプトがあります。

HTML

<form class="form-inline" role="form" id="formRegister">
    <div class="form-group">
        <label class="sr-only" for="srEmail">Email address</label>
        <input type="email" name="srEmail" class="form-control input-lg" id="srEmail" placeholder="Enter email">
    </div>
    <button type="button" name="srSubmit" onClick="getSubmitResponse();" class="btn btn-default btn-lg">Generate PIN</button>
</form>

JS

        function getSubmitResponse(){
            var emailId = $("#srEmail").val();
            $.ajax({
            type: "POST",
            url: "register-ajax-call.php",
            data: { srEmail: emailId, submiType: 'srSubmit'}
            })
            .done(function( html ) {

                if(html.search('PIN:')!=-1){
                    window.location = "success.php?response="+html;
                }else{
                    $( "#results").empty();
                    $("#results").append( html );
                }
            });
        }

質問: この状況で type="button" ではなく、button type="submit" を使用するにはどうすればよいですか? 私の理由は、これはフォーム検証のためのより良いマークアップであり、より一貫した動作 (たとえば、ユーザーが ENTER を押したとき) であるということです。

それが解決策であれば、jQueryも使用しています。

4

3 に答える 3

3

.submit()このようなjQueryのメソッドを使用できます

 $("#formRegister").submit(function(event) {
      var form = $( this ),
      url = form.attr( 'action' );
      var posting = $.post( url, { srEmail: ("#srEmail").val() } );
      posting.done(function( data ) {
        $("#results").append( html );
      });
    });

ただし、送信する前に、クライアント側で検証を行うことを検討する必要があります。jQuery.validateすでに jQuery を使用しているため、フォームにさらに属性がある場合に備えて、確認することをお勧めします。

于 2013-09-21T20:19:35.217 に答える
1

次のようにできます。

jQuery:

$("#formRegister").on("submit", function() {

   $.ajax({ 

       // Rest of code 
   });

return false;
});
于 2013-09-21T20:18:51.963 に答える
1

onclickイベントではなく、onsubmitイベントを使用してください。

http://www.w3schools.com/jsref/event_form_onsubmit.asp

次に、ajax 関数で false を返すだけです。フォームは通常どおり送信されず、ブラウザはページを更新しません。

それが役に立てば幸い

于 2013-09-21T20:20:03.113 に答える