通過Ajax提交的表單多次提交

當我通過Ajax提交此表單時，即使提交按鈕只是單擊一次，Ajax也會多次發佈該表單，有時會發布多達10次。我不明白爲什麼這樣做。任何幫助將是偉大的！這裏是我的代碼：通過Ajax提交的表單多次提交

<script type="text/javascript"> 

var messageDelay = 2000; 
$(init); 
    function init() { 
     $('#messageform').show().submit(submitForm); 
    $('#rtypeshow').hide(); 
     $('a[href="#messageform"]').click(function() { 
    $('#content').fadeTo('slow', .2); 
    $('#messageform').fadeIn('slow', function() { 
     $('#senderName').focus(); 
    }) 

    return false; 
    }); 

    $(document).ready(function(){ 
    $("#messagetable").load("messagetable.php"); 
      $("#etype").change(function() { 
       if ($(this).val() != "0") { 
        $("#rtypeshow").show(); 
        $('#datepicker').attr('required', 'required'); 
       }else{ 
        $("#rtypeshow").hide() 
        $("#allowed").hide; 
        $('#datepicker').removeAttr('required'); 
        $('#allowed1').removeAttr('required'); 
       } 
      }); 
     }); 
     $(document).ready(function(){ 
      $("#rtype").change(function() { 
       var selection = $(this).val(); 
       if (selection == "1") { 
        $("#allowed").show(); 
        $('#allowed1').attr('required', 'required'); 
       }else{ 
        $("#allowed").hide(); 
        $('#allowed1').removeAttr('required'); 
       } 
      }); 
     }); 
} 
    function submitForm() { 
    var messageform = $(this); 
    if (!$('#ename').val() || !$('#message').val()) { 
    $('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut(); 
    messageform.fadeOut().delay(messageDelay).fadeIn(); 

    } else { 
$('#sendingMessage').fadeIn(); 
    messageform.fadeOut(); 

    $.ajax({ 
     url: messageform.attr('action') + "?ajax=true", 
     type: messageform.attr('method'), 
     data: messageform.serialize(), 
     success: submitFinished 
    }); 
    } 
    return false; 
} 
function submitFinished(response) { 
    response = $.trim(response); 
    $('#sendingMessage').fadeOut(); 

    if (response == "success") { 
    $('#successMessage').fadeIn().delay(messageDelay).fadeOut(); 
    $('#ename').val(""); 
    $('#message').val(""); 
    $('#datepicker').val(""); 
    $('#allowed1').val(""); 
    $('#allowed2').val(""); 
    $('#allowed3').val(""); 
    $('#allowed4').val(""); 
    $("#messagetable").load("messagetable.php"); 

    $('#content').delay(messageDelay+500).fadeTo('slow', 1); 
    $('#messageform').show().submit(submitForm); 

    } else { 
    $('#failureMessage').fadeIn().delay(messageDelay).fadeOut(); 
    $('#messageform').delay(messageDelay+500).fadeIn(); 
    } 
} 

</script> 

<form id="messageform" action="message_forward.php" method="post"> 
<p> 
    <label for="ename">Event Name</label> 
    <input name="ename" type="text" id="ename" required="required"> 
</p> 

<p> 
    <label for="message">Message</label> 
    <span id="sprytextarea1"> 
    <textarea name="message" id="message" required="required"></textarea> 
    <span id="countsprytextarea1">&nbsp;</span><span class="textareaRequiredMsg">A value is required.</span><span class="textareaMaxCharsMsg">Exceeded maximum number of characters.</span></span></p> 
<p> 
    <label for="etype">Response Required</label> 
    <select name="etype" size="2" id="etype"> 
    <option value="0" selected="selected">No</option> 
    <option value="1">Yes</option> 
    </select> 
</p> 
<div id="rtypeshow" style="display:none;"> 
Event Resender End Date: 
    <span id="sprytextfield1"> 
    <input name="datepicker" type="text" id="datepicker" size="10"> 
MM/DD/YYYY <span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br> 
    Send Response To:     <select name="eforward" id="eforward"> 
        <?php 
do { 
?> 
        <option value="<?php echo $row_Recordset1['cphone']?><?php echo $row_Recordset1['provider']?>"><?php echo $row_Recordset1['fullname']?>-SMS Message via Cell Phone</option> 
        <option value="<?php echo $row_Recordset1['email']?>"><?php echo $row_Recordset1['fullname']?>-Email Message</option> 
<?php 
} while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); 
    $rows = mysql_num_rows($Recordset1); 
    if($rows > 0) { 
     mysql_data_seek($Recordset1, 0); 
     $row_Recordset1 = mysql_fetch_assoc($Recordset1); 
    } 
?> 
       </select><br> 
    <label for="question">Question for responses</label> 
<input type="text" name="question" id="question" maxlength="18"><br> 
    <label for="rtype">Response Type</label> 
    <select name="rtype" size="3" id="rtype"> 
    <option value="0" selected="selected">Standard Yes/No Response</option> 
    <option value="1">Create Responses</option> 
    <option value="2">Get Users Own Response</option> 
    </select> 
<div id="allowed" style="display:none;"> 
<h4>Response Options</h4> 
<label for="allowed1">Option 1</label> 
<input type="text" name="allowed1" id="allowed1" maxlength="12" placeholder="Required">Max Length = 12 
<label for="allowed2"><br> 
    Option 2</label> 
<input type="text" name="allowed2" id="allowed2" maxlength="12" placeholder="Optional">Max Length = 12 
<br> 
    <label for="allowed3">Option 3</label> 
    <input type="text" name="allowed3" id="allowed3" maxlength="12" placeholder="Optional">Max Length = 12 
    <label for="allowed4"><br> 
    Option 4</label> 
    <input type="text" name="allowed4" id="allowed4" maxlength="12" placeholder="Optional">Max Length = 12 
    </div> 
</div> 
<input name="submit" type="submit" value="Send Messages"> 
</form>

附加註釋：發送消息的第二次似乎使事情變得更糟那麼如果網頁向另一個消息之前刷新。

來源

2015-01-26 Nick

它看起來像您的代碼將submitForm函數多次附加到submit處理程序。

在你submitFinished功能再次附加處理程序：

$('#messageform').show().submit(submitForm);

您可以通過刷新頁面，然後提交表單檢查。如果它只在刷新後提交一次，然後多次提示您知道問題所在。

來源

2015-01-26 22:44:48 rojoca

通過Ajax提交的表單多次提交

回答

相關問題