javascript - 如何向表单添加输入字段

Question

我有一个表单，需要向其中添加字段/行。 我的代码添加了输入字段，但提交表单后无法获取值。

HTML

<form action="#" method="POST">
<div class="col-md-12">
    <fieldset class="fieldset-language" data-count="1">
        <legend>Legg til kostnader</legend>
        <div class="fieldset-content">
            <div class="row">
                <div class="col-md-5 form-group ">
                    <label for="">Cost</label>
                    <select name="verdi[]" class="form-control" >                                   
                        <?php foreach($kostnader as $Cost) { ?>
                            <option value="<?php echo $Cost; ?>"><?php echo $Cost;?></option>
                        <?php } ?>                                  
                    </select>
                </div>
                <div class="col-md-5 form-group ">
                    <label for="">Verdi</label>                                                         
                    <input type="text" class="form-control" id="Totalt" name="kostnad[]" placeholder="Some value">
                </div>

                <div class="col-md-2 form-group ">

                </div>
            </div>

        </div>
        <div class="input_fields_wrap"></div>

        <button class="add_field_button btn btn-primary" data-fields="0" name="leggtil">+ Add</button><br><br>
        <button type="submit" name="submit" class="btn btn-danger btn-lg">Send</button>

    </fieldset>
</div>

如果提交了表单，则转储内容。

$post = array();

 for($i=0;$i<count($_POST['kostnad']);$i++){

      $post = [
       'kostnad'      => $_POST['kostnad'][$i],
       'verdi'      => $_POST['verdi'][$i]
      ];

 }

添加和克隆输入字段的 jQuery 代码:

$(document).ready(function() {

    var max_fields = 10; //maximum input boxes allowed

    $(".add_field_button").click(function(e){ //on add input button click
        e.preventDefault();

        var add_button = $(this);
        var fieldset   = add_button.closest('fieldset');
        var wrapper    = add_button.closest('.sf-viewport');
        var form       = add_button.closest('form');
        var x          = parseInt(fieldset.attr('data-count'));
        var cur_height = 0;
        var fieldset_clone;
        var fieldset_content;

        if(x < max_fields){ //max input box allowed

            //text box increment
            fieldset.attr('data-count',x+1);


            cur_height = fieldset.height();
            form.height(cur_height*2);
            wrapper.height(cur_height*2);

            fieldset_clone = add_button
                            .closest('fieldset')
                            .find('.fieldset-content')
                            .eq(0)
                            .clone();

            fieldset_clone
                .find('[name]')
                .each(function(){
                    $(this).val($(this).prop('defaultValue'));
                });


            fieldset_content = $('<div>')
                .addClass('fieldset-content')
                .append(fieldset_clone.children());


            // add_button.before(fieldset_clone.children());
            add_button.before(fieldset_content);

            // add remove button
            add_remove_btn(fieldset_content);

        }
    });


    function add_remove_btn(item){
        item.prepend(
            '<a class="btn pull-right om-remove btn-danger btn-xs" href="#">'+
            '  <div class="small">Remove</div>'+
            '</a>'
        );

    }

    //user click on remove text
    $(document).on("click",".om-remove", function(e){

        e.preventDefault();

        var x = parseInt($(this)
            .closest('fieldset')
            .attr('data-count')
        );

        $(this)
            .closest('fieldset')
            .attr('data-count',x-1);

        $(this)
            .closest('.fieldset-content')           
            .slideUp(function(){
                $(this).remove()
            })

    });
});

如果按钮已提交，请运行此 var 转储: var_dump($_POST);

问题是我无法获取添加字段的数据，只能获取第一个条目的数据，有没有办法获取添加字段的数据？

Answer 1

如果您在进行发布时查看导航器调试器，所有变量都在那里，正如您用方括号 [] 命名的那样。正如这里所说的Multiple inputs with same name through POST in php ，您的 POST 值被定义到每个变量名称的数组中。因此，您的代码可以正常工作，但您可能更喜欢使用多维数组来保存数据:

$post = array();

for($i = 0; $i < count($_POST['kostnad']); $i++) {

     $post[$_POST['verdi'][$i]] = [
      'kostnad'    => $_POST['kostnad'][$i],
      'verdi'      => $_POST['verdi'][$i]
     ];
}

echo "<pre>";
print_r($post);
echo "</pre>";

在此示例中，每个值都保存在 $post 子数组中，由“verdi”索引。

希望有帮助。