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>

如何获取元素并将其发送到表单？

1 个答案: