Popular a select generated by javascript

Navigation
1

I am copying fields from a form with javascript, but in this form two input are select and option are generated from the result of a query . When copies are created, query does not run, so select comes with no options to be selected.

HTML / PHP

                            How was it paid? 

                       <?php 

                        $sql="SELECT 'tpid', 'descricao' FROM 'tp_pagto'";
                        $query = $mysqli->query($sql);
                        while($row=mysqli_fetch_row($query))
                        {?>

                        <option value="<?php echo $row[0]; ?>"><?php echo $row[1];?></option>


                    <?php }?>

JS 

//CLONA O CAMPO DE DESPESAS DA PAGINA NOVA VIAGEM
$(document).ready(function(){
    var next = 1;
    $(".add-more").click(function(e){
        e.preventDefault();
        var addto = "#outra_dcentro" + next;
        var addRemove = "#outra_dcentro" + (next);
        next = next + 1;
        var newIn = '<input autocomplete="off" class="input form-control" id="outra_ddec' + next + '" name="outra_ddec' + next + '" type="text" placeholder="Qual a despesa?" data-items="8"/><input autocomplete="off" class="input form-control" id="outra_dvalor' + next + '" name="outra_dvalor' + next + '" type="text" placeholder="Qual o valor?" data-items="8"/><select class="form-control" id="outra_dpago' + next + '" name="outra_dpago' + next + '"><option disabled selected>Esta pago?</option><option value="nao">Não</option><option value="sim">Sim</option></select><select class="form-control" id="outra_dtppago' + next + '" name="outra_dtppago' + next + '"><option disabled selected>Como foi pago?</option><?php $sql="SELECT 'tpid', 'descricao' FROM 'tp_pagto'"; $query = $mysqli->query($sql); while($row=mysqli_fetch_row($query)) {?> <option value="<?php echo $row[0]; ?>"><?php echo $row[1];?></option><?php }?></select><input autocomplete="off" class="input form-control" id="outra_dnf' + next + '" name="outra_dnf' + next + '" type="text" placeholder="Numero da NF" data-items="8"/><input autocomplete="off" class="input form-control" id="outra_dforn' + next + '" name="outra_dforn' + next + '" type="text" placeholder="Fornecedor?" data-items="8"/><select class="form-control" id="outra_dcentro' + next + '" name="outra_dcentro' + next + '"><option disabled selected>Selecione o centro de custo</option><?php $sql="SELECT 'centroid', 'descricao' FROM 'centro'";$query = $mysqli->query($sql);while($row=mysqli_fetch_row($query)){?><option value="<?php echo $row[0]; ?>"><?php echo $row[1];?></option><?php }?>';
        var newInput = $(newIn);
        var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
        var removeButton = $(removeBtn);
        $(addto).after(newInput);
        $(addRemove).after(removeButton);
        $("#outra_dcentro" + next).attr('data-source',$(addto).attr('data-source'));
        $("#outra_dcentro").val(next);  

            $('.remove-me').click(function(e){
                e.preventDefault();
                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#outra_ddec" + fieldNum;
                $(this).remove();
                $(fieldID).remove();

                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#outra_dvalor" + fieldNum;
                $(this).remove();
                $(fieldID).remove();

                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#outra_dpago" + fieldNum;
                $(this).remove();
                $(fieldID).remove();

                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#outra_dtppago" + fieldNum;
                $(this).remove();
                $(fieldID).remove();

                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#outra_dnf" + fieldNum;
                $(this).remove();
                $(fieldID).remove();

                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#outra_dforn" + fieldNum;
                $(this).remove();
                $(fieldID).remove();

                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#outra_dcentro" + fieldNum;
                $(this).remove();
                $(fieldID).remove();
            });
    });  


});

Here in JS the% variable contains% all the code of the same inputs, including the select / option with the problem among others, NewIn is changed and then added the new fields.

I imagine that I can not run a query by javascript, but I can pass the php array containing the option values for JS? Or is there a more efficient way to do this?

    
asked by anonymous 23.02.2017 / 18:40

1 answer

1

Return the array as json in a php file 

<?php 
header('Content-Type: application/json');

$sql="SELECT 'tpid', 'descricao' FROM 'tp_pagto'";
$query = $mysqli->query($sql);

echo json_encode($query)
?>

Receive the contents of this array by an ajax request and populate the select ( Jquery ) 

var select = $("#selectlistas"); 

$.ajax({ 
    url: 'urldophp.php', 
    type: 'POST', 
    success: function(dados){ 
        $.each(dados, function(index, dado){ 
            var campo1 = dado.campo1; 
            var campo2= dado.campo2; 
            select.append($('<option>', {
                value: campo1, 
                text:  campo2 
                })); 
        }); 
    } 
});
    
23.02.2017 / 18:54
How to use ssl with php? [closed] How to change the state of a ToggleButton in java?