Ajax两次提交表单

时间:2019-03-25 16:06:02

标签: ajax

我在模式窗口中有一个表格,允许用户重新发送确认电子邮件。提交表单后,确认电子邮件将发送两次,而不是一次。其他一切都按预期运行。

表格很标准:

<form enctype="multipart/form-data" id="ReMailf" name="ReMailf" role="form" data-toggle="validator">
<fieldset>
<div class="row">
<p>You may enter a different email than your original if you wish. However, the original email will remain as the main contact on your application.</p>
<label class="desc" for="prim_email"> Email </label>
<input id="prim_email" name="prim_email" type="email" class="form-control" value="<?php echo $tE['prim_email']; ?>" data-error="Please Enter A Valid Email Address" required/>
<div class="help-block with-errors"></div>
</div>
<div class="row">
<input id="submitForm" name="submitForm" class="btn btn-success" type="submit" value="Resend Conformation "/>
<input name="uniqid" type="hidden" value="<?php echo $tE['unqID']; ?>"/>
<input name="ReMAIL" type="hidden" value="ReMAIL"/>
</div>
</fieldset>
</form>

…这是处理程序:

$(document).ready(function () {
    $("#ReMailf").on("submit", function(e) {
        var postData = $(this).serializeArray();
        // var formURL = $(this).attr("action");
        $.ajax({
            url: '_remail.php',
            type: "POST",
            data: postData,
            success: function(data, textStatus, jqXHR) {
                $('#myModal .modal-header .modal-title').html("YOUR EMAIL HAS BEEN RESENT");
                $('#myModal .modal-body').html(data);
                // $("#ReMailf").remove();
            },
            error: function(jqXHR, status, error) {
            console.log(status + ": " + error);
            }
        });
        e.preventDefault();
    });

    $("#submitForm").on('click', function() {
        $("#ReMailf").submit();
    });

});

我已经阅读了许多其他有关此的文章,并尝试了一些建议,但没有任何效果。它要么根本不提交,要么提交两次。 这是页面上的唯一表格...

请提出建议?

1 个答案:

答案 0 :(得分:0)

这是因为您正在使用按钮或提交来触发ajax事件。改用它:

$(document).ready(function() {
      $("#ReMailf").on("submit", function(e) {
            e.preventDefault(); //add this line
            var postData = $(this).serializeArray();
            // var formURL = $(this).attr("action");
            $.ajax({
                  url: '_remail.php',
                  type: "POST",
                  data: postData,
                  success: function(data, textStatus, jqXHR) {
                    $('#myModal .modal-header .modal-title').html("YOUR EMAIL HAS BEEN RESENT");
                    $('#myModal .modal-body').html(data);
                    // $("#ReMailf").remove();
                  },
                  error: function(jqXHR, status, error) {
                    console.log(status + ": " + error);
                  }
或者您可以只使用带有操作和方法的简单表格。它将完成工作