How to add input fields to a form

Question

I have a form and need to add fields/rows to it. My code adds the input fields, but I can't get the values after submit the form.

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>

If form is submited, dump the content.

$post = array();

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

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

 }

The jQuery code, that adds and clones the input field:

$(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()
            })

    });
});

If button is submited, run this var dump: var_dump($_POST);

Problem is that I can't fetch the data on the field added, only on the first entry, is there a way to fetch the data of the added fields?

Answer 1

If you look at navigator debugger when doing post, all variables are there, as you named it with brackets []. As said here Multiple inputs with same name through POST in php , your POST values are defined into an Array for each variable name. So, your code is working, but you might prefer to have a multidimensional array to save data:

$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>";

In this example, every value is saved on a $post subarray, indexed by 'verdi'.

Hope it helps.