表單提交導致'超出最大調用堆棧大小'

我創建了一個用於在網站上查看人員的表單，但是當提交表單時什麼也沒有發生，並且控制檯顯示'最大調用堆棧超出了'。希望有人可以幫助指出我的代碼中的錯誤，從而停止工作。下面是表單代碼：表單提交導致'超出最大調用堆棧大小'

<form id="fReviewMe" method="post" action="/process/review-p.cfm" enctype="multipart/form-data" style="display:none"> 
    <label style="padding-top:10px"><i class="fa fa-asterisk magenta"></i> Your Name:</label> 
    <input type="text" name="uname" id="uname" class="span8" placeholder="Please tell us your name"> 
    <label><i class="fa fa-asterisk magenta"></i> Your Business Name:</label> 
    <input type="text" name="business" id="business" class="span8" placeholder="Please tell us your business name"> 
    <label><i class="fa fa-asterisk magenta"></i> Your Review:</label> 
    <textarea name="reviewmsg" id="reviewmsg" class="span8" rows="8" placeholder="Please add your review in here"></textarea> 
    <!--- form errors ---> 
      <div id="dFormErrors" class="row" style="display:none;padding-bottom:20px;"> 
       <span id="sEMessage" class="pull-right"></span> 
       <i class="fa fa-asterisk magenta pull-right"></i> 
      </div> 

    <!--- form buttons ---> 
    <div id="dButtonsReviewForm" class="row"> 
     <a onClick="checkForm()" name="submit" class="cta pull-right">Submit</a> 
     <a href="javascript:hideReviewMe()" class="pull-right cta" style="margin-right:6px">Cancel</a> 
    </div> 
    <!--- form saving ---> 
     <div id="dSavingReviewForm" style="display:none"> 
      <span class="pull-right hibuBtn" style="cursor:wait"><i class="fa fa-spinner fa-spin"></i> Saving</span> 
     </div>

這裏是JS代碼：提前

/* intercept submit event */ 
$("#fReviewMe").submit(function(event) { 
    checkForm(); 
    event.preventDefault(); 
}); 

/* form validation */ 
function checkForm(){ 

    var errors = 0; 
    var cuname = $('#uname').val(); 
    var ccompany = $('#business').val() 
    var creview = $('#reviewmsg').val() 
    var cstars = $('#rStar').val() 
    var eMessage = ""; 
    $('#dFormErrors').hide(); 
    $('input').removeClass('validFalse'); 
    $('textarea').removeClass('validFalse'); 

if ($('#tnc').is(':checked')) { 
} 
else{ 
    eMessage = "Please tick to accepts out terms and conditions"; 
    errors++; 
} 

if(cstars.length < 1){ 
    $("input").blur(); 
    $("textarea").blur(); 
    eMessage = "Please choose a star rating"; 
    errors++; 
} 

if(creview.length < 1){ 
    $('#reviewmsg').focus(); 
    $('#reviewmsg').addClass('validFalse'); 
    eMessage = "Please add your review"; 
    errors++; 
} 
else{ 
    $('#reviewmsg').addClass('validTrue'); 
} 

if(ccompany.length < 1){ 
    $('#business').focus(); 
    $('#business').addClass('validFalse'); 
    eMessage = "Please tell us your business name"; 
    errors++; 
} 
else{ 
    $('#business').addClass('validTrue'); 
} 

if(cuname.length < 1){ 
    $('#uname').focus(); 
    $('#uname').addClass('validFalse'); 
    eMessage = "Please tell us your name"; 
    errors++; 
} 
else{ 
    $('#uname').addClass('validTrue'); 
} 

/* check errors and submit */ 
if(errors > 0){ 
    $('#dFormErrors').slideDown(); 
    $('#sEMessage').html(eMessage) 
} 
else{ 
    $('#dButtonsReviewForm').hide(); 
    $('#dSavingReviewForm').show(); 
    $('#fReviewMe').submit(); 
} 

};

感謝

來源

2015-07-13 Sam Allen

替換$('#fReviewMe').submit();有：

$('#fReviewMe')[0].submit();

調用DOM節點方法submit避免提交jQuery的處理程序 '迴路'。

來源

2015-07-13 09:20:32

剛試過這個，它的工作原理！謝謝:) –

@A。沃爾夫謝謝你指出，還有其他的點擊提交，你給了我一個教訓。刪除了我的答案，因爲它沒有考慮到所有的可能性。 – fuyushimoya

的問題是因爲你觸發內submit事件您submit()處理程序，導致無限循環。您需要修改你的邏輯：

$("#fReviewMe").submit(checkForm); 

function checkForm(e) { 
    // all your validation logic here... 

    if (errors > 0) { 
     e.preventDefault(); // < stop form submission on error 
     $('#dFormErrors').slideDown(); 
     $('#sEMessage').html(eMessage) 
    } 
    else{ 
     $('#dButtonsReviewForm').hide(); 
     $('#dSavingReviewForm').show(); 
    } 
}

來源

2015-07-13 09:17:18

表單提交導致'超出最大調用堆棧大小'

回答

相關問題