0

Estou montando um sistema de pedidos online onde os itens serão adicionados dinamicamente conforme a necessidade do usuário com uma função em javascript, até ai está tudo funcionando, o problema está quando preciso remover uma das divs adicionadas, após a remoção, o forma não da submit de forma alguma, até tentei forçar o submit co javascript, mas os campos dos itens restantes não são passados por post.

Segue código:

<script type="text/javascript" src="assets/js/jquery-3.4.0.min.js"></script>
<script type="text/javascript">

var idContador = 0;

function exclui(id){
    var campo = $("#"+id.id);
    campo.hide(200);
}


$( document ).ready(function() {

    $("#btnAdicionaTelefone").click(function(e){
        e.preventDefault();
        var tipoCampo1 = "text";
        var tipoCampo2 = "number";
        var tipoCampo3 = "text";
        var tipoCampo4 = "text";
        adicionaCampo(tipoCampo1, tipoCampo2, tipoCampo3, tipoCampo4);
    })

    function adicionaCampo(tipo1, tipo2, tipo3, tipo4){

        idContador++;

        var idCampo1 = "campoExtra1"+idContador;
        var idCampo2 = "campoExtra2"+idContador;
        var idCampo3 = "campoExtra3"+idContador;
        var idCampo4 = "campoExtra4"+idContador;
        var idForm = "formExtra"+idContador;

        var where = "where tbproduto.status = 'A' order by tbproduto.descricao ";
        var html = "";

        html += "<div  class='form-group' id='"+idForm+"'>";

        html += "<div class='col-sm-4'> ";
        html += "   <select class='form-control' required id='"+idCampo1+"' name='produto[]' >";
        html += "       <option id='content_combo' value='' selected='selected'> Selecione um Produto </option>";
        html += "       <?php $result = $pdo->query('SELECT * from tbproduto "+where+" '); while ($row = $result->fetch(PDO::FETCH_OBJ)){ ?>";
        html += "       <option id='content_combo' value='<?php echo $row->guid; ?>'> <?php echo $row->descricao; ?> </option>";
        html += "       <?php } ?> ";
        html += "   </select>";
        html += "</div>";

        html += "<div class='col-sm-2'><input type='"+tipo2+"' id='"+idCampo2+"' onChange='alterar_div("+idContador+")' class='form-control novoCampo' name='qtdunitaria[]' placeholder='Quantidade'/></div>";
        html += "<div class='col-sm-2'><input type='"+tipo3+"' id='"+idCampo3+"' onChange='alterar_div("+idContador+");dindin("+idContador+");' class='form-control novoCampo' name='vlrunitario[]' step='0.01' min='0' placeholder='Valor Unitário'/></div>";
        html += "<div class='col-sm-3'><input type='"+tipo4+"' id='"+idCampo4+"' oninput='alterar_div("+idContador+")' class='form-control novoCampo' name='vlrtotalitem[]' readonly placeholder='Valor Total'/></div>";

        html += "<span class='input-group-btn'>";
        html += "<div class'col-lg-1'><button class='btn btn-danger' onclick='exclui("+idForm+");' type='button'><span class='fa fa-trash'></span></button></div>";
        html += "</span>";

        html += "</div>";

        $("#imendaHTML").append(html);
    }

    $(".btnExcluir").click(function(){
        console.log("clicou");
        $(this).slideUp(200);
    })

});

</script>

<!-- FILE UPLOAD STYLES -->
<link rel="stylesheet" href="assets/css/bootstrap-fileupload.min.css" />

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<form class="form-horizontal style-form" name="myForm" id="myForm" action="func_edit_pedcompra.php?acao=editar&guid=<?php echo $guid; ?>" method="post" enctype="multipart/form-data">

                    <div class="form-group col-lg-6">
                        <label class="col-sm-12 col-sm-12 control-label">Favorecido</label>   
                        <div class="col-lg-12 ">                      
                            <select class="form-control" required name="pessoa" >
                                <option id="content_combo" value="<?php echo $codpessoa; ?>" selected="selected"> --> <?php echo $nomepessoa; ?> </option>
                                <?php
                                //Selecciona as opiniões  
                                $grFab = $pdo->query("SELECT * FROM tbpessoa Where tbpessoa.status = 'A' and tbpessoa.guid != '$codpessoa' ORDER BY nome");
                                while ($row = $grFab->fetch(PDO::FETCH_OBJ)){
                                ?>
                                <option value="<?php echo $row->guid; ?>"> <?php echo $row->nome; ?> </option>
                                <?php } ?>
                            </select>
                        </div>
                    </div>

                    <div class="form-group col-lg-3">
                        <label class="col-sm-12 col-sm-12 control-label">Valor de Desconto</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" name="vlrdesconto" id="vlrdesconto" onKeyPress="return(moeda(this,'.',',',event))" step="0.01" min="0" placeholder="R$ Desconto" value="<?php echo formataFloatMoeda($vlrdesconto); ?>">
                        </div>
                    </div>

                    <div class="form-group col-lg-3">
                        <label class="col-sm-12 col-sm-12 control-label">Valor de Acréscimo </label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" name="vlracrescimo" id="vlracrescimo" onKeyPress="return(moeda(this,'.',',',event))" step="0.01" min="0" placeholder="R$ Acréscimo" value="<?php echo formataFloatMoeda($vlracrescimo); ?>">
                        </div>
                    </div>

                    <div class="form-group col-lg-12">
                        <label class="col-sm-12 col-sm-12 control-label">Observações do Produto</label>
                        <div class="col-sm-12">    
                            <textarea class="form-control" type="text" name="obs" id="obs" rows="3%" cols="3%" placeholder="Observações"><?php echo $obs; ?></textarea>   
                        </div>
                    </div>

                    <label class="col-sm-12"> Produtos do Pedido <div class="pull-right"><button type="button" class="btn btn-default" <a href="#" id="btnAdicionaTelefone" ><i class="fa fa-plus"></i> Adicionar Produto </a></button></div></label>
                    <div class="well col-lg-12">

                        <div class="col-lg-12">

                            <?php
                                $result = $pdo->query("SELECT tbpeditem.numitemped, tbpeditem.guid as guid, tbpeditem.vlrunitario as vlrunitario, tbpeditem.qtdunitaria as qtdunitaria, SUM((vlrunitario * qtdunitaria)) AS vlrtotalitem, tbproduto.descricao as descprod, tbproduto.guid as codprod, tbfichaprod.guid as fichaprod
                                from tbpeditem 
                                inner join tbproduto on tbproduto.guid = tbpeditem.produto
                                inner join tbfichaprod on tbfichaprod.tbpaiitem = tbpeditem.guid
                                where pedcompra = '$guid' 
                                group by tbpeditem.guid, tbproduto.descricao, tbproduto.guid, tbfichaprod.guid"); 
                                $i=0; while ($row = $result->fetch(PDO::FETCH_OBJ)){ 

                                $idCampo1 = "campoSalvo1".$i;
                                $idCampo2 = "campoSalvo2".$i;
                                $idCampo3 = "campoSalvo3".$i;
                                $idCampo4 = "campoSalvo4".$i;
                                $idForm = "formSalvo".$i;
                            ?>
                            <div  class='form-group' id='<?php echo $idForm; ?>'>

                                <!-- Campo oculto para envio de guid do item do pedido -->
                                <input type="hidden" name="guidpeditem[]" id="guidpeditem" value="<?php echo $row->guid; ?>" />
                                <input type="hidden" name="guidfichaprod[]" id="guidfichaprod" value="<?php echo $row->fichaprod; ?>" />

                                <div class='col-sm-4'>
                                    <select class='form-control' required id='<?php echo $idCampo1; ?>' name='produto[]' >
                                        <option id='content_combo' value="<?php echo $row->codprod; ?>" selected='selected'> <?php echo $row->descprod; ?> </option>
                                        <?php 
                                            $result2 = $pdo->query("SELECT * from tbproduto where tbproduto.status = 'A' and tbproduto.guid != '$row->codprod' "); 
                                            while ($row2 = $result2->fetch(PDO::FETCH_OBJ)){ 
                                        ?>
                                        <option id='content_combo' value='<?php echo $row2->guid; ?>'> <?php echo $row2->descricao; ?> </option>
                                        <?php 
                                            } 
                                        ?> 
                                    </select>
                                </div>

                                <div class='col-sm-2'>
                                    <input type='number' id='<?php echo $idCampo2; ?>' onChange='alterar_div2(<?php echo $i; ?>)' class='form-control novoCampo' name='qtdunitaria[]' placeholder='Quantidade' value="<?php echo $row->qtdunitaria; ?>" />
                                </div>

                                <div class='col-sm-2'>
                                    <input type='text' id='<?php echo $idCampo3; ?>' onChange='alterar_div2(<?php echo $i; ?>);' onKeyPress="return(moeda(this,'.',',',event))" class='form-control novoCampo' name='vlrunitario[]' step='0.01' min='0' placeholder='Valor Unitário' value="<?php echo formataFloatMoeda($row->vlrunitario); ?>" />
                                </div>

                                <div class='col-sm-3'>
                                    <input type='text' id='<?php echo $idCampo4; ?>' oninput='alterar_div2(<?php echo $i; ?>)' class='form-control novoCampo' name='vlrtotalitem[]' readonly placeholder='Valor Total' value="<?php echo formataFloatMoeda($row->vlrtotalitem); ?>" />
                                </div>

                                <span class='input-group-btn'>
                                    <div class="col-lg-1">
                                        <button class='btn btn-danger' onclick='removeSalvo("<?php echo $idForm; ?>");' type='button'><span class='fa fa-trash'></span></button>
                                    </div>
                                </span>

                            </div>

                            <?php
                                $i++;
                                }
                            ?>

                            <div id="imendaHTML" class="text-center"></div>
                        </div>

                    </div>

                <div class="col-lg-12"> 

                    <div class="form-group col-lg-6" align="right">
                        <button type="submit" id="cadastrar" value="Cadastrar" class="btn btn-default" onclick="document.getElementById('').submit()">Alterar</button>
                        <button type="reset" class="btn btn-warning">Resetar</button> 
                </form>
                    </div>

                    <div class="form-group col-lg-6" align="left">
                        <form class="form-horizontal style-form" action="admpedcompra.php" method="post" enctype="multipart/form-data">
                            <a href="admpedcompra.php"><input type="submit" value="Cancelar" class="btn btn-primary"/></a>
                        </form>
                    </div> 

                </div>

1 Resposta 1

0

O erro se dá porque você está escondendo um elemento com o atributo required, e com isso ele fica unfocusable (sem capacidade de receber foco). Ao tentar submeter o formulário, o navegador vai tentar dar o foco nesse elemento escondido resultando em erro, e consequentemente abortando o envio.

O problema está nessa linha:

campo.hide(200);

O .hide() esconde o elemento da página, porém ele continua no DOM, e o navegador irá buscá-lo no submit, mesmo ele estando escondido, pois está com required.

O certo era você remover o elemento do DOM com:

campo.remove();
1
  • 1
    Genial, deu certo, muito obrigado e desculpem o meu desconhecimento, não seu bom com javascript ainda.
    – user169262
    Commented 15/11/2019 às 18:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .