表单提交导致'超出最大调用堆栈大小' [英] Form submission causing 'Maximum call stack size exceeded'

问题描述

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

 < form id =fReviewMemethod =postaction =/ process / review -p.cfmenctype =multipart / form-datastyle =display：none> 
< label style =padding-top：10px>< i class =fa fa-asterisk magenta>< / i>你的名字：< / label> 
< input type =textname =unameid =unameclass =span8placeholder =请告诉我们您的名字> 
< label>< i class =fa fa-asterisk magenta>< / i>您的商家名称：< / label> 
< input type =textname =businessid =businessclass =span8placeholder =请告诉我们您的商家名称> 
< label>< i class =fa fa-asterisk magenta>< / i>您的评论：< / label> 
< textarea name =reviewmsgid =reviewmsgclass =span8rows =8placeholder =请在此处添加您的评论>< / textarea> 
 <！--- ---表格错误---> 
< div id =dFormErrorsclass =rowstyle =display：none; padding-bottom：20px;> 
< span id =sEMessageclass =pull-right>< / span> 
< i class =fa fa-asterisk magenta pull-right>< / i> 
< / div> 
 
 <！--- ---表单按钮---> 
< div id =dButtonsReviewFormclass =row> 
 < a href =javascript：hideReviewMe（）class =pull-right ctastyle =margin-right：6px>取消< / a> 
< / div> 
<！---表格保存---> 
< div id =dSavingReviewFormstyle =display：none> 
< span class =pull-right hibuBtnstyle =cursor：wait>< i class =fa fa-spinner fa-spin>< / i>节省< /跨度> 
< / div> 
  

这里是JS代码：

  / *拦截提交事件* / 
 $（#fReviewMe）.submit（function（event）{ 
 checkForm（）; 
 event.preventDefault（）; 
}）; 
 
 / *表单验证* / 
函数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'）; （$：'＃tnc'）。（'：checked'））{
} 
 else {
 eMessage =请勾选以接受条款和条件; 
错误++; 
 
 
 if（cstars.length< 1）{
 $（input）。blur（）; 
 $（textarea）。blur（）; 
 eMessage =请选择星级评分; 
错误++; $（
）
 
 if（creview.length< 1）{
 $（'＃reviewmsg'）。focus（）; 
 $（'＃reviewmsg'）。addClass（'validFalse'）; 
 eMessage =请添加您的评论; 
错误++; 
} 
 else {
 $（'＃reviewmsg'）。addClass（'validTrue'）; 
 
 
 if（ccompany.length <1）{
 $（'＃business'）。focus（）; 
 $（'＃business'）。addClass（'validFalse'）; 
 eMessage =请告诉我们您的商家名称; 
错误++; 
} 
 else {
 $（'＃business'）。addClass（'validTrue'）; （cuname.length <1）{
 $（'＃uname'）。focus（）; 
 
 
 if（cuname.length< 1） 
 $（'＃uname'）。addClass（'validFalse'）; 
 eMessage =请告诉我们你的名字; 
错误++; 
} 
 else {
 $（'＃uname'）。addClass（'validTrue'）; 
 
 $ b $ *检查错误并提交* / 
 if（errors> 0）{
 $（'＃dFormErrors'）。slideDown（）; 
 $（'＃sEMessage'）。html（eMessage）
} 
 else {
 $（'＃dButtonsReviewForm'）。hide（）; 
 $（'＃dSavingReviewForm'）。show（）; 
 $（'＃fReviewMe'）。submit（）; 
} 
 
}; 
  

预先致谢

解决方案

<$ p $ p> $（ '＃fReviewMe'）[0] .submit（）;


调用DOM节点方法提交以避免提交jQuery处理程序'循环'。

I've created a form that is used to review a person on a website, however when the form is submitted nothing happens and console is showing a 'Maximum Call Stack Exceeded'. Hopefully someone can help point out the error in my code stopping this from working. Here is the form code:

 <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>

Here is the JS code:

/* 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();
}

};

Thanks in advance

解决方案

Replace $('#fReviewMe').submit(); with:

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

calling DOM node method submit to avoid submit jQuery handler 'loop'.

这篇关于表单提交导致'超出最大调用堆栈大小'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！