3

Preciso clonar um Input text ao clicar em um botão "+" e depois passar o valor deste campo clonado via POST junto aos outros dados do formulário...

Estou utilizando uma função JavaScript para fazer os clones

<script>
function mais(campo1, campo2) { 
    var nova = document.getElementById("aqui");
    var novadiv = document.createElement("div");
    var nomediv = "div";
    novadiv.innerHTML = "<div class='col-md-10 col-sm-10'><br><input type='text' name='"+
    campo1+"' class='form-control' placeholder='Tipo de serviço...'/></div><div class='"+
    "'col-md-2 col-sm-2'><br><input type='text' name='"+campo2+"' class='form-control' placeholder='R$'/></div>";
    nova.appendChild(novadiv); 
}
</script>

Imagens de exemplo:

Input padrão

Input com clones

Agora eu preciso saber como fazer para pegar o valor dos campos clonados e passar via POST

O meu HTML é:

Novo Orçamento
<hr style="height:1px; border:none; color:#e9e9e9; background-color:#e9e9e9; margin-top: 5px; margin-bottom: 0px;"/>
<br>


<form method="post" action="gerarpdf.php" name='msgform'  target='_blank'>


<div class="col-md-3 col-sm-3">
    <label class="control-label mll">
        Nº do Orçamento                           
    </label>
    <input type="text" name="orcamento" class="form-control" placeholder="0000000" readonly="readonly"/>
</div>

<div class="col-md-3 col-sm-3">
    <label class="control-label mll">
        Data                 
    </label>
    <input type="text" name="data" class="form-control" placeholder="dd/MM/aaaa" value="<?php echo date('d/m/Y') ?>"/>
</div>

<div class="col-md-6 col-sm-6">
    <label class="control-label mll">
        Vendedor                            
    </label>

    <input type="text" name="vendedor" class="form-control" placeholder="Nome do vendedor..."/>
</div>

<div class="col-md-6 col-sm-6">
    <label class="control-label mll">
    <br>
        Cliente                             
    </label>

    <input type="text" name="cliente" class="form-control" placeholder="Nome do cliente..."/>
</div>

<div class="col-md-3 col-sm-3">
    <label class="control-label mll">
    <br>
        Contato                             
    </label>
    <input type="text" name="contato" class="form-control" placeholder="Nome do contato..."/>
</div>

<div class="col-md-3 col-sm-3">
    <label class="control-label mll">
    <br>
        Telefone                           
    </label>
    <input type="text" name="telefone" class="form-control" placeholder="(xx)-xxxx-xxxx"/>
</div>

<div class="col-md-12 col-sm-12">
<br>
<label class="control-label mll">
        Observações
    </label>
    <textarea rows="4" name="observacoes" class="form-control">
    </textarea>
</div>

<div id="servico">
<div class="col-md-10 col-sm-10">
    <label class="control-label mll">
    <br>
        Serviço                         
    </label>
    <input type="text" name="servico" class="form-control" placeholder="Tipo de serviço..."/>           
</div>

<div class="col-md-2 col-sm-2">
    <label class="control-label mll">
    <br>
        Valor                        
    </label>
    <input type="text" name="valor" class="form-control" placeholder="R$"/>         
</div>

<div id="aqui">
</div>

</div>

<div class="col-md-12 col-sm-12">
<br>
<input type="button" value="+" onclick="mais(servico.value, valor.value)"; class="btn btn-outlined btn-success"/>           
</div>



<div class="col-md-12 col-sm-12">
<br><br><br>
<center>
    <input type="button" value="Finalizar" onclick="fin()"; class="btn btn-outlined btn-primary"/>
    <a href="?page=orcamentos&op=all"><input type="button" value="Cancelar" class="btn btn-outlined btn-danger"/></a>
</center>
    <br><br>
</div>


</form>
4
  • 1
    Podes colocar o HTML todo desse formulário? estás a enviar por submit ou por ajax?
    – Sergio
    Commented 19/06/2015 às 6:08
  • @Sergio, postei o código...estou usando submit Commented 19/06/2015 às 6:13
  • Juntei o HTML á pergunta, podes apagar a resposta que deste. O novo campo que inseres deve ter o mesmo valor que o que já havia na página? ou queres que chegue ao PHP os valores de cada campo independentemente?
    – Sergio
    Commented 19/06/2015 às 6:25
  • Obrigado, isso mesmo eu preciso que os valores cheguem ao php independentemente... Commented 19/06/2015 às 6:28

1 Resposta 1

3

A parte que queres clonar é:

<div id="servico">
    <div class="col-md-10 col-sm-10">
        <label class="control-label mll">
            <br/>Serviço</label>
        <input type="text" name="servico" class="form-control" placeholder="Tipo de serviço..." />
    </div>
    <div class="col-md-2 col-sm-2">
        <label class="control-label mll">
            <br/>Valor</label>
        <input type="text" name="valor" class="form-control" placeholder="R$" />
    </div>
    <div id="aqui"></div>
</div>

Para enviares para o servidor inputs com o mesmo nome tens de ter [] no fim do name para o PHP tratar como array.

Sugiro usares o próprio HTML da página nessa função para clonar, e repara que uma vez que cada input deve ter o seu valor, a função não precisa de parametros (ie, deves tirar no HTML também para ficar somente onclick="mais()":

function mais() {
    var destino = document.getElementById("aqui");
    var novadiv = document.createElement("div");
    var conteudo = document.getElementById("servico");
    novadiv.innerHTML = conteudo.innerHTML;
    destino.appendChild(novadiv);
}

e depois no HTML mudar para:

<div id="servico">
    <div class="col-md-10 col-sm-10">
        <label class="control-label mll">
            <br/>Serviço</label>
        <input type="text" name="servico[]" class="form-control" placeholder="Tipo de serviço..." />
    </div>
    <div class="col-md-2 col-sm-2">
        <label class="control-label mll">
            <br/>Valor</label>
        <input type="text" name="valor[]" class="form-control" placeholder="R$" />
    </div>
</div>
<div id="aqui"></div>

Repara que coloquei o <div id="aqui"></div> fora de <div id="servico"> pois não precisa estar ali e ser clonado também.

jsFiddle: http://jsfiddle.net/qf2Lf914/

3
  • Cara, muito obrigado pela ajuda tão eficiente, só mais uma pergunta...e agora no PHP como separo esses valores do array $servico = $_POST['servico']; $valor = $_POST['valor']; Commented 19/06/2015 às 6:51
  • 1
    @Charles então quando fazes $servico = $_POST['servico']; a variável serviços vai ter uma array, não sei se queres gravar uma a uma ou como string... mas dá uma olhada aqui a um exemplo: pt.stackoverflow.com/q/56231/129
    – Sergio
    Commented 19/06/2015 às 6:58
  • 1
    finalmente consegui! Esse exemplo me ajudou. Muitíssimo obrigado pela sua ajuda, agora posso dormir tranquilo kkk até a próxima, valeu mesmo. Commented 19/06/2015 às 9:21

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 .