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

Navigation
3

I need to clone an input text by clicking a "+" button and then pass the value of this cloned field via POST next 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>
    
asked by anonymous 19.06.2015 / 08:06

1 answer

3

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 an array.

I suggest you use the page HTML itself in this function to clone, and note that since each input must have its value, the function does not need any parameters (ie, you should take HTML as well to only get 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 the HTML switch 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 that I put <div id="aqui"></div> out of <div id="servico"> because it does not have to be there and be cloned too.

jsFiddle: link

    
19.06.2015 / 08:34
Write input button in ASP.NET C # Problem with table width