Array only shows one line

0

Personal I have the following code, only it appears only the first line when I click send, and I want it to appear all as I add more products.

NOTE: FOR MORE ADDITIONAL PRODUCT, IT WORKS. I CAN NOT USE THE FOR TO TAKE ALL THE DATA.

Thank you

Follow the Code.

<!--CODIGO PHP PARA QUE PEGA OS DADOS-->

  for( $i=0; $i<count($_POST['NOME_PRODUTO_COMPRA']); $i++ )
{
    echo 'Nome produto: '.$_POST['NOME_PRODUTO_COMPRA'][$i].'--';
    echo 'Quantidade Produto: '.$_POST['QUANTIDADE_PRODUTO'][$i].'--';
    echo 'valor produto: '.$_POST['VALOR_PRODUTO'][$i].'--';

}

<!--CODIGO JS PARA adicionais mais linhas-->

$(function () {
  function removeCampo() {
  $(".removerCampo").unbind("click");
  $(".removerCampo").bind("click", function () {
     if($("tr.linhas").length > 1){
    $(this).parent().parent().remove();
     }
  });
  }
 
  $(".adicionarCampo").click(function () {
  novoCampo = $("tr.linhas:first").clone();
  novoCampo.find("input").val("");
  novoCampo.insertAfter("tr.linhas:last");
  removeCampo();
  });
});
<div id="tudo">
<table border="0" cellpadding="2" cellspacing="4">
  
 
  <tr><td class="bd_titulo" width="10">Qtde</td><td class="bd_titulo">Produto</td><td class="bd_titulo">Valor R$</td></tr>
  <tr class="linhas">
    <td>
      <select style="width: 80px;" name="QUANTIDADE_PRODUTO[]" >
                <option value="1" selected >1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                
              </select>


    </td>
    <td>
       <select name="NOME_PRODUTO_COMPRA[]" class="textfield_single_outro" id="NOME_PRODUTO_COMPRA"  >
                                                          <option value="" selected>Selecione o Produto</option>
                                                          <option value="Produto1" selected>Produto1</option>
                                                          <option value="Produto2" selected>Produto2</option>
                                                          
                              
              </select>
    </td>

    <td><input type="text" name="VALOR_PRODUTO[]" style="text-align:center"  /></td>
   
    <td><a href="#" id="removerCampo" title="Remover linha"><img src="https://image.freepik.com/icones-gratis/sinal-de-menos_318-59392.jpg"border="0" style="width: 7%;"/></a></td>
    <tr><td colspan="4">
        <a href="#" id="adicionarCampo" title="Adicionar item"><img src="https://image.freepik.com/icones-gratis/sinal-de-mais_318-40643.jpg"border="0" style="width: 3%;" /></a>
  </td></tr>

  </tr>
     
</table>
</div>
    
asked by anonymous 22.06.2017 / 21:19

1 answer

1

DEMO

In your html you use id for lines

<a href="#" id="removerCampo" ....... E <a href="#" id="adicionarCampo"

Only in the script the lines

$(".removerCampo").unbind("click"); $(".removerCampo").bind("click", function () {

and

$(".adicionarCampo").click(function () {

refer to classes .removerCampo and .adicionarCampo

Script

$(function () {
  function removeCampo() {
    $(".removerCampo").unbind("click");
    $(".removerCampo").bind("click", function () {
       if($("tr.linhas").length > 1){
        $(this).parent().parent().remove();
       }
    });
  }

  $(".adicionarCampo").click(function () {
    novoCampo = $("tr.linhas:first").clone();
    novoCampo.find("input").val("");
    novoCampo.insertAfter("tr.linhas:last");
    removeCampo();
  });
});

HTML

<form method="post" name="form" action="">
<div id="tudo">
<table border="0" cellpadding="2" cellspacing="4">

  <tr><td class="bd_titulo" width="10">Qtde</td>
  <td class="bd_titulo">Produto</td>
  <td class="bd_titulo">Valor R$</td></tr>

  <tr class="linhas">
    <td>
        <select style="width: 80px;" name="QUANTIDADE_PRODUTO[]" >
                <option value="1" selected >1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
              </select>            
    </td>
    <td>
       <select name="NOME_PRODUTO_COMPRA[]" class="textfield_single_outro" id="NOME_PRODUTO_COMPRA"  >
         <option value="" selected>
            Selecione o Produto</option>
         <option value="Produto1">
            Produto1</option>
         <option value="Produto2">
            Produto2</option>                        
      </select>
    </td>
    <td><input type="text" name="valor[]" style="text-align:center" /></td>
    <td><a href="#" class="removerCampo" title="Remover linha"><img src="https://image.freepik.com/icones-gratis/sinal-de-menos_318-59392.jpg"border="0" style="width: 7%;"/></a></td>
  </tr>
  <tr><td colspan="4">
        <a href="#" class="adicionarCampo" title="Adicionar item"><img src="https://image.freepik.com/icones-gratis/sinal-de-mais_318-40643.jpg"border="0" style="width: 3%;" /></a>
    </td></tr>
  <tr>
        <td align="right" colspan="4"><input type="submit" id="btn-cadastrar" value="Cadastrar" /></td>
  </tr> 
</table>
</div>
</form>
  

An error was also corrected in the table structure, the last <tr> out of place and also in the second select that all options were as selected

But you can also use id

Script

$(function () {
  function removeCampo() {
    $("#removerCampo").unbind("click");
    $("#removerCampo").bind("click", function () {
       if($("tr.linhas").length > 1){
        $(this).parent().parent().remove();
       }
    });
  }

  $(".adicionarCampo").click(function () {
    novoCampo = $("tr.linhas:first").clone();
    novoCampo.find("input").val("");
    novoCampo.insertAfter("tr.linhas:last");
    removeCampo();
  });
});

HTML

    ..........
<a href="#" id="removerCampo" title="Remover linha"><img src="https://image.freepik.com/icones-gratis/sinal-de-menos_318-59392.jpg"border="0" style="width: 7%;"/></a>
..........
<a href="#" id="adicionarCampo" title="Adicionar item"><img src="https://image.freepik.com/icones-gratis/sinal-de-mais_318-40643.jpg"border="0" style="width: 3%;" /></a>
.........
    
26.06.2017 / 19:30