.clone() not registering Select value in cloned DIV

Asked

Viewed 92 times

5

Good afternoon guys, I think it may be something really stupid, but I can’t identify why the clone that I make of my page to be able to print 2 ways, is not capturing SELECT value of my products, it only records the value in the first product and the others come with the value "default " of the SELECT. Follows an image of the problem and also my code:

inserir a descrição da imagem aqui

main.php:

 <div class="container-fluid seletor">
        <div class="wrap">
            <form action="pedido.php" method="POST" id="form-send">
                <div id="duplicata" class="duplicata" name="duplicata[]">
                    <div class="container" id="cabecalho">
                        <br>
                        <header class="cabecalho">
                            <div class="wrap-header">
                                <div class="imagem-header">
                                    <img src="imagens/logo_ip.png" alt="Logo Varejão Irmãos Patrocinio">
                                    <h1>Pedidos - Varejão Irmãos Patrocinio</h1>
                                </div>
                                <div class="dados-header">
                                    <div id="pedido">
                                        <b>ID do Pedido: </b>
                                        <input id="id-pedido" class="input-div" readonly="true" name="id_pedido">
                                    </div>


                                    <div id="loja">
                                        <b>Loja:</b> <input type="text" id="loja" name="loja" class="input-div"
                                            value="<?php echo $_SESSION['loja']; ?>" readonly="true">
                                    </div>

                                    <div id="data">
                                        <b>Data: </b>
                                        <input id="data-atual" class="input-div" readonly="true" name="data_atual">
                                    </div>
                                </div>

                            </div>
                        </header>
                    </div>

                    <div class="container" id="fornecedores">

                        <div class="title-padrao">
                            <h1 class="text-center">Fornecedor</h1>
                        </div>

                        <div class="fornecedores-wrap col-lg-12">
                            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 select_height text-center"
                                id="div_id_fornecedor">
                                <b>ID:</b>
                                <input id="fornecedor-id" class="font-pop input-div" name="fornecedor_id"
                                    readonly="true" required>
                            </div>

                            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-8 select_height" id="div_fornecedores">
                                <!-- selectpicker é o elemento que coloca o input e o select juntos -->

                                <b id="text-fornecedor">Selecione um fornecedor:</b>
                                <select class="selectpicker form-control" data-show-subtext="false"
                                    data-live-search="true" name="select_fornecedor[]" id="select_fornecedor"
                                    onchange="initFornecedores(this)" required>
                                    <?php
                                    echo '<option disabled selected hidden value="Selecione um fornecedor..." data-subtext="Selecione um fornecedor...">Selecione um fornecedor...</option>';
                                    foreach ($result1 as $item_fornecedores) {
                                        echo '<option data-subtext="' . $item_fornecedores['nome'] . '" value="'
                                        . $item_fornecedores['nome'] . '">' . $item_fornecedores['nome'] . '</option>';
                                    }
                                ?>
                                </select>
                                <input type="text" name="fornecedor_new_input" id="fornecedor_new_input"
                                    style="display: none" placeholder="Digite o nome do Fornecedor..." required>
                                <input type="checkbox" id="change_fornecedor" name="change_fornecedor"
                                    value="Fornecedor não cadastrado">&nbsp;
                                <label for="change_fornecedor" id="checkbox-fornecedor-text">Fornecedor
                                    não cadastrado</label>
                            </div>
                            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-3 text-center select_height"
                                id="div_cnpj_fornecedor">
                                <b>CNPJ</b>
                                <input name="cnpj" minlength="12" maxlength="14" class="font-pop" id="cnpj"
                                    value="00.000.000/0000-00" required>
                            </div>
                        </div>
                    </div>

                    <div class="container" id="produtos">
                        <div class="separator"></div>

                        <div class="title-padrao">
                            <h1 class="text-center">
                                Produtos
                            </h1>
                        </div>

                        <div id="allProducts">
                            <section id="all-section">

                                <div class="inform-produtos">

                                    <div class="primeira">
                                        <b>Item:</b>
                                    </div>

                                    <div class="segunda">
                                        <b>ID:</b>
                                    </div>

                                    <div class="terceira">
                                        <b>Selecione um produto:</b>
                                    </div>

                                    <div class="quarta">
                                        <b>Embalagem:</b>
                                    </div>

                                    <div class="quinta">
                                        <b>Preço:</b>
                                    </div>

                                    <div class="sexta">
                                        <b>Quantidade:</b>
                                    </div>

                                    <div class="setima">
                                        <b>Preço do Produto:</b>
                                    </div>
                                </div>

                                <div class="clone-prod" name="clone-prod[]">

                                    <div class="wrap-prod" name="wrap-prod[]">

                                        <div class="produtos-wrap" name="produtos-wrap[]">
                                            <div class="text-center select_height produto-padrao" id="primeiro-produto">
                                                <input type="text" class="index font-pop input-div" id="index_produto"
                                                    name="index_produto[]" value="1" readonly="true">
                                            </div>

                                            <div class="text-center select_height produto-padrao" id="segundo-produto">
                                                <input class="font-pop number_id_produto input-div" value=""
                                                    readonly="true" name="id_produto[]" required>
                                            </div>

                                            <div class="text-center select_height produto-padrao terceiro-produto"
                                                id="terceiro-produto">
                                                <select class="selectpicker form-control" data-show-subtext="false"
                                                    data-live-search="true" name="select_produtos[]"
                                                    id="select_produtos" onchange="initProdutos(this)" required>
                                                    echo '<option disabled selected hidden
                                                        value="Selecione um produto..."
                                                        data-subtext="Selecione um produto...">Selecione um produto...
                                                    </option>'
                                                    <?php
                                                foreach ($result2 as $item_produtos) {
                                                    echo '<option data-subtext="' . $item_produtos['desc_produto'] . '" value="'
                                                . $item_produtos['desc_produto'] . '">' . $item_produtos['desc_produto'] . '</option>';
                                                }
                                            ?>
                                                </select>
                                            </div>

                                            <div class="text-center select_height produto-padrao" id="quarto-produto">
                                                <input type="text" maxlength="2" class="edit-input font-pop"
                                                    name="embalagem[]" value="" required>
                                            </div>

                                            <div class="text-center select_height produto-padrao" id="quinto-produto">
                                                <input type="number" id="preco-input" name="preco[]"
                                                    oninput="this.value = Math.abs(this.value)" min="0"
                                                    class="edit-input font-pop" value="" required>
                                            </div>

                                            <div class="text-center select_height produto-padrao" id="sexto-produto">
                                                <input type="number" id="qtd-input"
                                                    oninput="this.value = Math.abs(this.value)" min="0"
                                                    class="edit-input font-pop" value="" name="quantidade-produto[]"
                                                    required>
                                            </div>

                                            <div class="text-center select_height produto-padrao" id="setimo-produto">
                                                <input class="font-pop preco-produto input-div" readonly="true"
                                                    name="preco-produto[]" required>
                                            </div>
                                        </div>

                                        <div class="text-center select_height produto-padrao oitavo-produto"
                                            id="div-remove">
                                            <button type="button"
                                                class="remover glyphicon glyphicon-remove button-produto"></button>
                                        </div>

                                    </div>

                                </div>

                            </section>
                            <div id="wrap-addbutton">
                                <button type="button" id="add-button"
                                    class="glyphicon glyphicon-plus-sign button-produto"></button>
                                <b>Adicione um produto...</b>
                            </div>
                        </div>

                    </div>

                    <div class="container" id="produto-total">
                        <div class="col-lg-12">
                            <div class="assinatura col-lg-9">
                                <div id="wrap-assinatura" class="text-center">
                                    <div id="assinatura"></div>
                                    <b>Assinatura</b>
                                </div>
                            </div>

                            <div class="preco-final col-lg-12 text-right">
                                <b>Preço Total:</b>
                                <br>
                                <input id="total" readonly="true" name="total_pedido" class="text-right input-div"
                                    value="R$ 0,00">
                            </div>
                        </div>
                    </div>

                    <div class="container" id="envia-formulario">

                        <input onclick="segundaVia()" type="button" id="segunda-via" value="Concluir Pedido"
                            data-toggle="modal" data-target="#myModal">

                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"
                                            aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="myModalLabel">Confirmação de Pedido</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p>Deseja concluir o pedido ?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="submit" class="btn btn-success" name="enviar" id="enviar-button"
                                            onclick="imprimir();">Concluir
                                        </button>
                                        <button type="button" class="btn btn-danger" id="cancelarVia"
                                            onclick="cancelaVia();" data-dismiss="modal">Cancelar</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>


            </form>
            <div id="pontilhado"></div>
        </div>

Jquery to add more products:

$(document).ready(function () {

    var clone = $(".clone-prod").html();
    $(document).on('click', '#add-button', addProd);

    $(document).on('click', '.remover', function () {

        if ($('.wrap-prod').length === 1) {
            $('.remover').attr('disabled', true);
            alert('Não é possivel remover o único produto do Pedido !');
        } else {
            $(this).parents('.wrap-prod').remove();
            ids();
            calculos();
        }
    });

    function addProd() {
        $('.clone-prod').append(clone);
        ids();
        $('.remover').attr('disabled', false);
    }

    function ids() {
        $("[name='index_produto[]']").each(function (i, e) {
            $(e).val(i + 1);
        });
    }

Jquery that clones and makes the "Second way":


function segundaVia() {
    var cont = $(".duplicata").clone();
    $(document).on('click', '#segunda-via', addVia);

    function addVia() {
        $(".container-fluid").append('<div id="cloneVia"></div>');
        $("#cloneVia").append(cont);
        $("#pontilhado").css("display", "block");
    }
}

Function print():

function imprimir() {
    window.print();
}
  • Where is the element with the class .duplicata that is being cloned? Put the full HTML part so you can try to reproduce the problem.

  • Sorry @Sam, I edited the question with the rest of the code.

  • And the function imprimir()?

  • I edited again adding the same.

1 answer

2


You need to pull the values of the cloned element selects to the clone selects.

After the line that makes cloning (var cont = $(".duplicata").clone();), change the values of the clone selects by going through each select of the cloned div, in this case, the div.duplicata:

cont.find("select").each(function(i){
   $(this).val($(".duplicata select:eq("+i+")").val());
});

The .each will go through each clone select and apply the same values as the original div selects based on the index (:eq("+i+")).

  • 1

    I put in the code here, tested it and it worked. Thank you so much for helping Sam, gave me a light at the end of the kkkk tunnel.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.