如何獲取元素數並將其發送到表單？

Question

這段代碼重點討論了添加和刪除教科書的jQuery/javascript函數，因此我不能簡單地計算它們。我試圖讓（課本的數量時框中添加哪些改變和減去我試圖document.getElementsByName().length但不起作用

代碼：。

<form class="my-form" role="form" method="POST" action="?action=steps"> 
       <table class="materialstab" style="border:1px solid;" cellpadding="5"> 
        <tr> 
         <td> 
          <p class="text-box"> 
           <label for="materials">Materials</label> 
          </p> 
         </td> 
         <td> 
          <p class="text-box"> 
           <label for="url">URL</label> 
           <a class="add-box" href="#">Add Material</a> 
          </p> 
         </td> 
        </tr> 
       </table> 

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
        jQuery(document).ready(function() { 
         $('.my-form .add-box').click(function() { //add box 
          var n = $('.text-box').length + 1; 

          var box_html = $('<tr><td><p class="text-box"><input type="text" name="materials" value="" id="materials' + n + '" /></p></td><td><p class="text-box"> <input type="text" name="url' + n + '" value="" id="url' + n + '" /><a href="#" class="remove-box">Remove</a></p></td></tr>'); 
          box_html.hide(); 
          $('.my-form .materialstab tr:last').after(box_html); 
          box_html.fadeIn('slow'); 
          return false; 
         }); 
         $('.my-form').on('click', '.remove-box', function(){ //remove box 
          $(this).parent().css('background-color', '#FF6C6C'); 
          $(this).parent().fadeOut("slow", function() { 
           $(this).remove(); 
           $('.box-number').each(function(index){ 
            $(this).text(index + 1); 
           }); 
          }); 
          return false; 
         }); 
        }); 
        $(document).ready(function() { //calculate # of elements, set form data 

         var textboxcount = document.getElementsByName("materials").length; 
         var box_2 = $('<input type="hidden" name="elem1" value="'+textboxcount+'">'); // here is where the variable will be sent to the form, value="'+textboxcount+'" 
         $('.my-form p.text-box:last').after(box_2); 

        });</script> 
       <input type="submit" name="submit" value="next>"> 
      </form> 

有特別沒有錯誤，但該變量等於零，當它應該是文本框的數量

Example Codepen

Answer 1

你的函數計算的輸入＃被射擊文檔加載，你已經添加任何文本框之前觸發事件什麼時候用戶點擊提交按鈕。

<form class="my-form" role="form" method="POST" action="?action=steps"> 
      <table class="materialstab" style="border:1px solid;" cellpadding="5"> 
       <tr> 
        <td> 
         <p class="text-box"> 
          <label for="materials">Materials</label> 
         </p> 
        </td> 
        <td> 
         <p class="text-box"> 
          <label for="url">URL</label> 
          <a class="add-box" href="#">Add Material</a> 
         </p> 
        </td> 
       </tr> 
      </table> 
<input type="submit" name="submit" id="btnSubmit" value="next"> 
</form> 


<script> 
jQuery(document).ready(function() { 
        $('.my-form .add-box').click(function() { //add box 
         var n = $('.text-box').length + 1; 

         var box_html = $('<tr><td><p class="text-box"><input type="text" name="materials" value="" id="materials' + n + '" /></p></td><td><p class="text-box"> <input type="text" name="url' + n + '" value="" id="url' + n + '" /><a href="#" class="remove-box">Remove</a></p></td></tr>'); 
         box_html.hide(); 
         $('.my-form .materialstab tr:last').after(box_html); 
         box_html.fadeIn('slow'); 
         return false; 
        }); 

        $('.my-form').on('click', '.remove-box', function(){ //remove box 
         $(this).parent().css('background-color', '#FF6C6C'); 
         $(this).parent().fadeOut("slow", function() { 
          $(this).remove(); 
          $('.box-number').each(function(index){ 
           $(this).text(index + 1); 
          }); 
         }); 
         return false; 
        }); 
       }); 
$("#btnSubmit").click (function() { // FIRES ON BTNSUBMIT.CLICK() 
var textboxcount = document.getElementsByName("materials").length; 
        var box_2 = $('<input type="hidden" name="elem1" value="'+textboxcount+'">'); 
        $('.my-form p.text-box:last').after(box_2); 

       }); 
    </script>