表单提交导致'超出最大调用堆栈大小'

我创建了一个用于在网站上查看人员的表单，但是当提交表单时什么也没有发生，并且控制台显示'最大调用堆栈超出了'。希望有人可以帮助指出我的代码中的错误，从而停止工作。下面是表单代码：表单提交导致'超出最大调用堆栈大小'

<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

表单提交导致'超出最大调用堆栈大小'

回答

相关问题