Javascript counter for php controller

Question

I have a form with dynamic inputs:

<form method="post" action="getDatabases/getCurso.php">                                            
                                    <div class="field_wrapper_curso">
                                        <div class="col-md-12 contentCurso">
                                            <div class="col-xs-4">                                                         
                                                <div class="form-group">

                                            <div class="col-xs-4">                                                         
                                                <div class="form-group">
                                                    <label>Curso</label>
                                                    <input type="text" class="form-control" name="field_curso_curso[]" value=""/>
                                                </div>
                                            </div>
                                            <div class="col-xs-2">                                                         
                                                <div class="form-group">
                                                    <label>Conclusão</label>
                                                    <select class="form-control" name="field_curso_conclusao">
                                                        <option></option>
                                                        <option>Concluido em:</option>
                                                        <option>Espero concluir em:</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-xs-1">                                                         
                                                <div class="form-group">
                                                    <label>Ano</label>
                                                    <input class="form-control" placeholder="Ano" name="field_curso_ano[]" value=""/>
                                                </div>   
                                            </div>

                                            <div class="col-xs-1">
                                                <p><br></p>
                                                <a href="javascript:newCurso(void(0));" class="btn btn-danger btn-circle remove_curso_button hide" title="Remove field"><span class=" glyphicon glyphicon-remove"></span></a>
                                            </div>
                                        </div>
                                      </div>  <!--/.field_wrapper_curso -->

                                        <input type="submit"/> 
                                    </form>  <!--/ formulario curso -->

The dynamic part is mounted by js:

<script type="text/javascript">   
        // Adicionar Cursos
        $(document).ready(function newCurso() {
            var maxFieldCurso = 50; //Input fields increment limitation
            var addButtonCurso = $('.add_curso_button'); //Add button selector
            var wrapperCurso = $('.field_wrapper_curso'); //Input field wrapper
            var contCurso = 1; //Initial field counter is 1

            $(addButtonCurso).click(function(){ //Once add button is clicked
                if(contCurso < maxFieldCurso){ //Check maximum number of input fields
                    console.log("aaa")
                    contCurso++; //Increment field counter
                    $('.contentCurso:last').clone().appendTo(wrapperCurso); // Add field html
                }
                if($('.contentCurso').length != 1) {
                  $('.remove_curso_button').removeClass('hide');
                }
            });
            $(wrapperCurso).on('click', '.remove_curso_button', function(e){ //Once remove button is clicked
                e.preventDefault();
                $(this).parent().parent().remove(); //Remove field html
                contCurso--; //Decrement field counter
                if($('.contentCurso').length == 1) {
                  $('.remove_curso_button').addClass('hide');
                }
            });   

    </script>

Now I need to build a controller in php that takes this data, as I’m using an array in each field, I’m doing so:

    $instituicao = $_POST['field_curso_instituicao'];
    $curso = $_POST['field_curso_curso'];
    $conclusao = $_POST['field_curso_conclusao'];
    $ano = $_POST['field_curso_ano'];

but I need to create a bond of for to run this data and store in the BD, and I want to use the counter contCurso function js for the same

Grossly, it would look something like this :

$queryBD = "insert into bd(instituicao,curso,conclusao,ano) values ("$instituicao","$curso","$conclusao","$ano")"

    for($i=0; $i= $contCurso; $i++){
      $queryBD;
}

What I want to know is this: How can I pass the value of the counter variable contCurso (javascript) for a for loop in a separate php controller?

Thank you

Answer 1

You can only include the value of the counter in a hidden field and use this, no?

<input type="hidden" id="inputContador" name="contador">

So instead of just increasing the variable, you use a function to increase the value of the counter already present on the page:

var addContador = function(){
    var acc = parseInt( $('#inputContador').val(), 10);
    console.log(acc);
    acc += 1;
    $('#inputContador').val(acc);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="contador" id="inputContador" value="0" />

<button onclick="addContador()">+1</button>