Problem to retrieve dynamically added array [] fields

Question

Problem to retrieve dynamically added array [] fields

Navigation

#1 by (5 votes)

1

Hello, everyone !!

I have this script that adds fields dynamically in my form, but I can not go through the values added by it, I can only get the first value of the field that already comes in the main screen. p>

$(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 running the fields in php, that's how I'm doing:

        $slcDia = $_POST['slcDia'];

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

And the main form, where it calls the script to add the fields, is almost 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 error might be?

php jquery

asked by anonymous 19.04.2014 / 06:15

1 answer

Pass parameters by jquery to controller Sort array of objects [duplicate]

score 5 · Accepted Answer

The problems:

Starting problem: using $slcDias as $slcDia

$slcDias = $_POST['slcDia'];

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

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

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

Another problem: with this code it will be a mess to know which check is from whom:

<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 the checkboxes that are ON, so their index can vary a lot. As it is, you have no way of knowing which checkbox is on which day. Ideally you would create an index in the JS for each of the form blocks and move to the application in a hidden field.

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 each day you will have a meuindice[] different, and in this index will have the value to give a $_POST['chkTurno'.$meuindice[i]] to get the checkboxes only that day. This same concept can be applied to ID of the button.

PHP:

$meuindice = $_POST['meuindice'];

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

Do not 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>