javascript - 如何使用 input type=submit 与 AJAX 表单

Question

我有以下 AJAX 脚本，用于在用户注册其电子邮件地址时向其返回随机 PIN 码:

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 );
                }
            });
        }

问题:在这种情况下如何使用 button type="submit"而不是 type="button"？我的理由是，这是更好的表单验证标记和更一致的行为(例如，当用户点击 ENTER 时)。

如果这是一个解决方案，我也会使用 jQuery。

Answer 1

你可以像这样使用 jQuery 的 .submit() 方法

 $("#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，我建议您看一下 jQuery.validate如果您的表单有更多属性。