Problem to retrieve dynamically added array fields[]

Question

Hello, everybody!!

I have this script that adds fields dynamically in my form, but I can’t go through the values added by it, I can only get the first value of the field that already comes on the main screen.... Follow the code of the script:

$(function() {
$("#add").click(function() {
    var input =  '<div class="dias">'
        input +=    '<div class="form-group dias">'
        input +=        '<label class="col-md-4 control-label" for="Dia">Dia disponível</label>'
        input +=        '<div class="col-md-4">'
        input +=            '<select name="slcDia[]" class="form-control">'
        input +=                '<option value="Segunda">Segunda-Feira</option>'
        input +=                '<option value="Terça">Terça-Feira</option>'
        input +=                '<option value="Quarta">Quarta-Feira</option>'
        input +=                '<option value="Quinta">Quinta-Feira</option>'
        input +=                '<option value="Sexta">Sexta-Feria</option>'
        input +=                '<option value="Sabado">Sábado</option>'
        input +=            '</select>'
        input +=        '</div>'
        input +=        '<a href="#" id="deletar" class="btn btn-danger" role="button">Remover Dia</a>'

        input +=        '<label class="col-md-4 control-label" for="Turno">Turno</label>'
        input +=        '<div class="col-md-4">'
        input +=            '<label class="checkbox-inline" for="Turno-0"><input type="checkbox" name="chkTurno[]" value="Manha">Manhã</label>'
        input +=            '<label class="checkbox-inline" for="Turno-1"><input type="checkbox" name="chkTurno[]" value="Tarde">Tarde</label>'
        input +=            '<label class="checkbox-inline" for="Turno-2"><input type="checkbox" name="chkTurno[]" value="Noite">Noite</label>'
        input +=        '</div>'
        input +=    '</div>'
        input += '</div>';

    $("#campos").append(input);
    return false;
});

$('body').on('click', "#deletar",function() {
    $(this).parent('.dias').remove();
});

I’m going through the fields in php, that’s how I’m doing:

        $slcDia = $_POST['slcDia'];

    foreach ($slcDia as $slcDia) {
        echo $slcDia;
    }

And the main form, where calls the script to add the fields is this, practically the same as the one inside the script itself:

        <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/addcampo.js"></script>

    <form class="form-horizontal" action="index.php?pg=np&acao=ok" method="POST">
        <fieldset>
        <!-- Form Name -->
        <legend>Professores > Novo Professor</legend>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="Professores">Nome</label>  
            <div class="col-md-6">
                <input name="txtNome" type="text" placeholder="Professor" class="form-control input-md">
            </div>
        </div>

        <!-- Select Basic -->
        <div class="form-group">
        <label class="col-md-4 control-label" for="Dia">Dia disponível</label>
            <div class="col-md-4">
                <select name="slcDia[]" class="form-control">
                    <option value="Segunda-Feira">Segunda-Feira</option>
                    <option value="Terça-Feira">Terça-Feira</option>
                    <option value="Quarta-Feira">Quarta-Feira</option>
                    <option value="Quinta-Feira">Quinta-Feira</option>
                    <option value="Sexta-Feira">Sexta-Feria</option>
                    <option value="Sábado">Sábado</option>
                </select>
            </div>

            <a href="#" id="add" class="btn btn-primary" role="button">Adicionar Dia</a>

            <label class="col-md-4 control-label" for="Turno">Turno</label>
            <div class="col-md-4">
                <label class="checkbox-inline" for="Turno-0"><input type="checkbox" name="chkTurno[]" value="Manhã">Manhã</label>
                <label class="checkbox-inline" for="Turno-1"><input type="checkbox" name="chkTurno[]" value="Tarde">Tarde</label>
                <label class="checkbox-inline" for="Turno-2"><input type="checkbox" name="chkTurno[]" value="Noite">Noite</label>
            </div>
        </div>

        <div id="campos"></div>

        <!-- Button (Double) -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="Salvar"></label>
            <div class="col-md-8">
                <button type="submit" name="Salvar" class="btn btn-success">Salvar</button>
                <a href="index.php?pg=td" role="button" class="btn btn-danger">Cancelar</a>
            </div>
        </div>

        </fieldset>
    </form>

Does anyone know where the mistake might be?

Answer 1

The problems:

Initial problem: to use $slcDias as $slcDia

$slcDias = $_POST['slcDia'];

foreach ($slcDias as $slcDia) {
    echo $slcDia;
}

One more problem here: if one adds 3 new fields, you will get 3 id="deletar"

<a href="#" id="deletar"...

Another problem: with this code it will be confusing to know which check is from which:

<input type="checkbox" name="chkTurno[]" value="Manha">Manhã</label>
<input type="checkbox" name="chkTurno[]" value="Tarde">Tarde</label>
<input type="checkbox" name="chkTurno[]" value="Noite">Noite</label>

PHP only sends checkboxes that are ON, so their content can vary quite a bit. The way it is, you have no way of knowing which checkbox is which day. Ideally you would create an index in the JS for each of the blocks in the form and go to the application in a field hidden.

Possible solution:

$("#add").click(function() {
    var input =  '<div class="dias">'
    MeuIndice++; //crie essa variavel antes, na inicializacao
    ...
    input +=        '<div class="col-md-4">'
    input +=            '<input type="hidden" name="meuindice[]" value="'+MeuIndice+'">'
    input +=            '<select name="slcDia"'+MeuIndice+' class="form-control">'
    ...
    input +=            '<label class="checkbox-inline" for="Turno-0"><input type="checkbox" name="chkTurno'+MeuIndice+'[]" value="Manha">Manhã</label>'
    input +=            '<label class="checkbox-inline" for="Turno-1"><input type="checkbox" name="chkTurno'+MeuIndice+'[]" value="Tarde">Tarde</label>'
    input +=            '<label class="checkbox-inline" for="Turno-2"><input type="checkbox" name="chkTurno'+MeuIndice+'[]" value="Noite">Noite</label>'
    ...

So for every day you’ll have one meuindice[] different, and in this index will have the value to give a $_POST['chkTurno'.$meuindice[i]] to pick up the checkboxes only that day. This same concept can be applied to ID button.

PHP:

$meuindice = $_POST['meuindice'];

foreach ($meuindice as $i) {
   $slcDias = $_POST['slcDia'.$i];
   $checkboxes = $_POST['chkTurno'.$i];
   echo $slcDias;
   print_r( $checkboxes );
}

Don’t forget to update the original HTML:

<input type="hidden" name="meuindice[]" value="0">
<select name="slcDia0" class="form-control">
...
   <input type="checkbox" name="chkTurno0[]" value="Manhã">Manhã</label>
   <input type="checkbox" name="chkTurno0[]" value="Tarde">Tarde</label>
   <input type="checkbox" name="chkTurno0[]" value="Noite">Noite</label>