2017-04-25 68 views
0

我创建了一个脚本,用于发送表单,该表单根据用户的选择发送动态表单。当显示从无到屏蔽时,动态表单不提交

在html方面的表单看起来很好,jQuery方面的代码执行得很好,直到实际的表单提交,并且控制台日志中没有任何东西告诉我有任何错误。

我能想到的唯一的事情就是这个表格开始显示:none;在CSS中,然后成为可用的人点击按钮添加新的付款。

这是事物的HTML端:

<div class="section-9"> 

    <form action="#" id="addform" method="post"> 
    <div class="row"> 

     <div class="col-sm-12"> 

     <div class="table-responsive" id="addsection"> 

      <table class="table table-responsive table-hover table-striped"> 

      <thead> 
       <th>Number</th> 
       <th>Price</th> 
       <th class="text-center">Installments</th> 
       <th>Contact Name</th> 
      </thead> 
      <tbody> 
       <tr> 
       <td><input type="text" class="form-control" id="addnumber" value="" placeholder="Enter CPO Number"></td> 
       <td><input type="text" class="form-control" id="addprice" value="" placeholder="Enter CPO Number"></td> 
       <td class="text-center"><a href="#" class="btn btn-danger addi">Installments</a></td> 
       <td><input type="text" class="form-control" id="addcontactname" value="" placeholder="Enter Contact Name"></td> 
       </tr> 
      </tbody> 

      </table> 

     </div> 

     </div> 

     <div class="col-sm-12" id="addformajax"></div> 

     <div class="col-sm-12 margin-top-15"> 

     <p><button class="btn btn-danger btn-block" type="button">SUBMIT</button></p> 

     </div> 

    </div> 
    </form> 

</div> 

无需显示CSS如第9类的唯一显示器无法比拟的。

$('#addnew').on('click', function(e) { 

     e.preventDefault(); 

     $('.section-9').show(); 

     //do the click button for cpo installments 
     $('.addi').on('click', function(event) { 

     event.preventDefault(); 

     var installmentAmount = '<p><select class="form-control" id="installment-ammount"><option value="0">Please Select How Many Installments Are Required</option>'; 

     for (var i = 1; i <= 60; i++) { 

      if (i === 1) { 
      installmentAmount += '<option value="' + i + '">' + i + ' Month</option>'; 
      } else { 
      installmentAmount += '<option value="' + i + '">' + i + ' Months</option>'; 
      } 

     } 

     installmentAmount += '</select></p><div class="showinstallmentdates margin-top-20"></div>'; 

     $('#addformajax').html(installmentAmount); 

     $('#installment-ammount').bind('input', function() { 

      var buildDateForms = '<p class="red padding-top-20"><i class="fa fa-star"></i> <em>If all amounts are left empty the price will be distributed evenly across all dates</em></p>'; 
      var howManyInstallments = $(this).val(); 
      var addingIdNames = ''; 

      for (var hmi = 1; hmi <= howManyInstallments; hmi++) { 

      buildDateForms += '<div class="form-group row"><div class="col-xs-6"><input type="text" class="form-control" id="adddate-' + hmi + '" placeholder="Enter Date To Be Paid" value=""></div><div class="col-xs-6"><input type="text" class="form-control" id="addprice-' + hmi + '" placeholder="Amount To Be Paid" value=""></div></div>'; 
      if (hmi == 1) { 
       addingIdNames += '#adddate-' + hmi; 
      } else { 
       addingIdNames += ', #adddate-' + hmi; 
      } 

      } 

      buildDateForms += '<input type="hidden" value="' + howManyInstallments + '" name="totalinstallments" id="totalinstallments">'; 
      buildDateForms += '<script>jQuery(document).ready(function($){ $("'; 
      buildDateForms += addingIdNames; 
      buildDateForms += '").datepicker({});});<\/script>'; 

      if (howManyInstallments != 0) { 
      $('.showinstallmentdates').html(buildDateForms); 
      } else { 
      $('.showinstallmentdates').html(''); 
      } 

     }); 

     }); 

     $("#addform").on('submit', function() { 
     $.ajax({ 
      url: "/Applications/Controllers/Quotes/ajax-add-sin.php", 
      type: "POST", 
      data: new FormData(this), 
      contentType: false, 
      cache: false, 
      processData: false, 
      success: function(sinData) { 

      $('body').html(sinData); 

      } 
     }); 

     }); 

    }); 

就算我不惊人的jQuery的是它不是什么我用了很多,我相信一个行家将能够斩下来以更高效和简化,但根据控制台我没有问题,并且当它的全部显示时,html看起来也不错,所以我看不到表单没有提交的原因。

感谢

回答

0

添加ID来按钮

<button id="btn-add-form" class="btn btn-danger btn-block" type="button">SUBMIT</button> 

认沽脚本的document.ready功能

更改AJAX功能

$("#btn-add-form").on('click', function() { 
    $.ajax({ 
     url: "/Applications/Controllers/Quotes/ajax-add-sin.php", 
     type: "POST", 
     data: new FormData(this), 
     contentType: false, 
     cache: false, 
     processData: false, 
     success: function (sinData) { 
      $('body').html(sinData); 
     } 
    }); 
}); 

完整代码:

<html> 

    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
     <title>New Page 1</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('#addnew').on('click', function (e) { 
        e.preventDefault(); 
        $('.section-9').show(); 
        //do the click button for cpo installments 
        $('.addi').on('click', function (event) { 

         event.preventDefault(); 
         var installmentAmount = '<p><select class="form-control" id="installment-ammount"><option value="0">Please Select How Many Installments Are Required</option>'; 
         for (var i = 1; i <= 60; i++) { 

          if (i === 1) { 
           installmentAmount += '<option value="' + i + '">' + i + ' Month</option>'; 
          } else { 
           installmentAmount += '<option value="' + i + '">' + i + ' Months</option>'; 
          } 

         } 

         installmentAmount += '</select></p><div class="showinstallmentdates margin-top-20"></div>'; 
         $('#addformajax').html(installmentAmount); 
         $('#installment-ammount').bind('input', function() { 

          var buildDateForms = '<p class="red padding-top-20"><i class="fa fa-star"></i> <em>If all amounts are left empty the price will be distributed evenly across all dates</em></p>'; 
          var howManyInstallments = $(this).val(); 
          var addingIdNames = ''; 
          for (var hmi = 1; hmi <= howManyInstallments; hmi++) { 

           buildDateForms += '<div class="form-group row"><div class="col-xs-6"><input type="text" class="form-control" id="adddate-' + hmi + '" placeholder="Enter Date To Be Paid" value=""></div><div class="col-xs-6"><input type="text" class="form-control" id="addprice-' + hmi + '" placeholder="Amount To Be Paid" value=""></div></div>'; 
           if (hmi == 1) { 
            addingIdNames += '#adddate-' + hmi; 
           } else { 
            addingIdNames += ', #adddate-' + hmi; 
           } 

          } 

          buildDateForms += '<input type="hidden" value="' + howManyInstallments + '" name="totalinstallments" id="totalinstallments">'; 
          buildDateForms += '<script>jQuery(document).ready(function($){ $("'; 
          buildDateForms += addingIdNames; 
          buildDateForms += '").datepicker({});});<\/script>'; 
          if (howManyInstallments != 0) { 
           $('.showinstallmentdates').html(buildDateForms); 
          } else { 
           $('.showinstallmentdates').html(''); 
          } 

         }); 
        }); 
       }); 
$("#btn-add-form").on('click', function() { 
    $.ajax({ 
     url: "/Applications/Controllers/Quotes/ajax-add-sin.php", 
     type: "POST", 
     data: $('#addform').serialize(), 
     contentType: false, 
     cache: false, 
     processData: false, 
     success: function (sinData) { 
      $('body').html(sinData); 
     } 
    }); 
}); 
      }); 
     </script> 
    </head> 

    <body> 
     <div class="section-9"> 

      <form id="addform" method="post"> 
       <div class="row"> 

        <div class="col-sm-12"> 

         <div class="table-responsive" id="addsection"> 

          <table class="table table-responsive table-hover table-striped"> 

           <thead> 
           <th>Number</th> 
           <th>Price</th> 
           <th class="text-center">Installments</th> 
           <th>Contact Name</th> 
           </thead> 
           <tbody> 
            <tr> 
             <td><input name="addnumber" type="text" class="form-control" id="addnumber" value="" placeholder="Enter CPO Number"></td> 
             <td><input name="addprice" type="text" class="form-control" id="addprice" value="" placeholder="Enter CPO Number"></td> 
             <td class="text-center"><a href="#" class="btn btn-danger addi">Installments</a></td> 
             <td><input name="addcontactname" type="text" class="form-control" id="addcontactname" value="" placeholder="Enter Contact Name"></td> 
            </tr> 
           </tbody> 

          </table> 

         </div> 

        </div> 

        <div class="col-sm-12" id="addformajax"></div> 

        <div class="col-sm-12 margin-top-15"> 

         <p><button id="btn-add-form" class="btn btn-danger btn-block" type="button">SUBMIT</button></p> 

        </div> 

       </div> 
      </form> 
    </body> 

</html> 
+0

发送一个空的表单,这意味着表单仍然没有发送,谢谢你的帮助:) – Robert

+0

1.将name属性设置为所有输入字段。 2.在ajax将“data:new FormData(this)”更改为“data:$('#addform')。serialize()”。我已经更新了上面的代码“完整的代码” –

+0

嗨@Rajesh Karunakaran仍然返回一个空的表单,它的形式从来没有存在过......我甚至尝试删除显示:没有在CSS中,并没有做任何事 – Robert