Php 无法获取html中动态生成的字段总数_Php_Jquery_Html

Php 无法获取html中动态生成的字段总数

php jquery html

Php 无法获取html中动态生成的字段总数,php,jquery,html,Php,Jquery,Html,我正在尝试创建一个应用程序，其中必须添加动态字段和动态字段的总数。我能够用下面的代码生成动态字段，但是我不能得到所有动态生成字段的总数 HTML代码 <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

我正在尝试创建一个应用程序，其中必须添加动态字段和动态字段的总数。我能够用下面的代码生成动态字段，但是我不能得到所有动态生成字段的总数

HTML代码

      <html>
            <head>
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
            </head>
            <body>
                <form name="add_name" id="add_name">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="dynamic_field">
                            <tr>
                                <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>
                                <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
                            </tr>
                        </table>
                            <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
                    </div>
                    <div>total <lable id='total'></lable></div>
                </form>
            </body>
        </html>
        <script>
        $(document).ready(function(){
            var i=1;
            $('#add').click(function(){
                i++;
                $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
            });

            $(document).on('click', '.btn_remove', function(){
                var button_id = $(this).attr("id"); 
                $('#row'+button_id+'').remove();
            });

            $(".name_list").keyup(function(){
                //alert("sample");
                var sum =0;
                $(".name_list").each(function(){
                    sum += Number($(this).val());
                });
                $("#total").val(sum);
            });
        **//For Delete** 
  $(document).on('click', '.btn_remove', function(){

        var total = $(".total").val();
            var sum = 0;
            $(".name_list").each(function(){
                sum += Number($(this).val());
            });
            var New_total = sum - total; 
            $("#total").text(New_total);

});

        });
        </script>


添加更多
全部的
$（文档）.ready（函数（）{
var i=1；
$（'#添加'）。单击（函数（）{
i++；
$（“#动态_字段”）.append（'X'）；
});
$（文档）.on（'click'，'btn_remove'，函数（）{
var按钮_id=$（this.attr（“id”）；
$（“#行”+按钮id+”）.remove（）；
});
$（“.name_list”）.keyup（函数（）{
//警报（“样本”）；
var总和=0；
$（“.name_list”）。每个（函数（）{
sum+=数字（$（this.val（））；
});
美元（“#总计”）.val（总和）；
});
**//删除**
$（文档）.on（'click'，'btn_remove'，函数（）{
var total=$（“.total”）.val（）；
var总和=0；
$（“.name_list”）。每个（函数（）{
sum+=数字（$（this.val（））；
});
var New_total=总和-总计；
$（“#总计”）.text（新总计）；
});
});

因为字段和按钮是动态生成的。你必须委派活动

$("#dynamic_field").on('keyup', '.name_list', function(){
    var sum =0;
    $(".name_list").each(function(){
        sum += Number($(this).val());
    });
    $("#total").text(sum); //changed val() to text()
});

由于字段和按钮是动态生成的，因此请查看此部分以了解更多信息。你必须委派活动

$("#dynamic_field").on('keyup', '.name_list', function(){
    var sum =0;
    $(".name_list").each(function(){
        sum += Number($(this).val());
    });
    $("#total").text(sum); //changed val() to text()
});

请浏览此页以了解更多信息

我不确定您要在哪里检查结果？在你的PHP中哪一个没有发布

下面是您的示例代码笔：

我特别关注这一部分：

$('#submit').click(function(){    
  console.log('here');
    $.ajax({
        url:"name.php",
        method:"POST",
        data:$('#add_name').serialize(),
        success:function(data)
        {
            alert(data);
            $('#add_name')[0].reset();
        }
    });
});

我在inspect tools中检查了我的网络以查看发送的内容：


名称[]{…}
0 a
1b
2 c

你可以做一个

计数（$\u POST['name']）

来看看你取回了多少物品，然后通过数值来查看……

我不知道你想在哪里检查结果？在你的PHP中哪一个没有发布

下面是您的示例代码笔：

我特别关注这一部分：

$('#submit').click(function(){    
  console.log('here');
    $.ajax({
        url:"name.php",
        method:"POST",
        data:$('#add_name').serialize(),
        success:function(data)
        {
            alert(data);
            $('#add_name')[0].reset();
        }
    });
});

我在inspect tools中检查了我的网络以查看发送的内容：


名称[]{…}
0 a
1b
2 c

你可以做一个

计数（$\u POST['name']）

来查看你取回了多少项，然后通过值来查看…

委托事件

$("#dynamic_field").on('keyup', '.name_list', function(){
    var sum =0;
    $(".name_list").each(function(){
        sum += Number($(this).val());
    });
    $("#totalInput").val(sum);
    $("#total").text(sum);
});

然后在表单中创建一个带有id和名称的隐藏文件

<div>total 
 <label id='total'></label>
 <input id="totalInput" name="total">
</div>

总计

因此，您可以访问ajax事件和php委托事件中的总计

$("#dynamic_field").on('keyup', '.name_list', function(){
    var sum =0;
    $(".name_list").each(function(){
        sum += Number($(this).val());
    });
    $("#totalInput").val(sum);
    $("#total").text(sum);
});

然后在表单中创建一个带有id和名称的隐藏文件

<div>total 
 <label id='total'></label>
 <input id="totalInput" name="total">
</div>

总计

因此，您可以在ajax事件中访问总计，php

确实很乐意提供帮助。记住下次处理动态元素时的事件委派。Sure.thumbs up。因为total是标签的id，所以var total=$（“#total”）.text（）；以及设置$（“#总计”）.text（新总计）；恐怕你没有一个id为delete的按钮。实际上，代表们很乐意帮忙。记住下次处理动态元素时的事件委派。Sure.thumbs up。因为total是标签的id，所以var total=$（“#total”）.text（）；以及设置$（“#总计”）.text（新总计）；恐怕你没有一个id为delete的按钮，它不能与val（sum）一起工作；但它与文本（sum）配合得很好；因此，您希望附加在屏幕上的值不会发送到PHP当您需要标签和隐藏输入时，请参阅我的更新答案如果回答了您的问题，请不要忘记绿色复选框：）它不适用于val（总和）；但它与文本（sum）配合得很好；因此，您希望屏幕上附加的值不会发送到PHP当您需要标签和隐藏输入时，请参阅我的更新答案如果回答了您的问题，请不要忘记绿色复选框：）