Clone Input text and pass the value of cloned input via POST

Question

I need to clone an Input text by clicking on a "+" button and then pass the value of this cloned field via POST to the other form data...

I’m using a Javascript function to make the 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>

Sample images:

Now I need to know how to get the value of the cloned fields and pass via POST

My HTML is:

New Budget

<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>

Answer 1

The part you want to clone is:

<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>

To send inputs with the same name to the server you must have [] at the end of name for PHP to treat as array.

I suggest you use the page’s own HTML in this function to clone, and note that since each input must have its value, the function does not need parameters (ie, you should take it in HTML too to stay only 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);
}

and then in HTML change to:

<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>

Notice I put the <div id="aqui"></div> out of <div id="servico"> because you don’t have to be there and be cloned too.

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