Array only shows one line

Asked

Viewed 83 times

0

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

NOTE: FOR ADDITIONAL MORE PRODUCT, IT WORKS. I CAN’T USE THE FOR TO GET ALL THE DATA.

Thank you

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

php

1 answer

1


DEMO

In your html you use id for the lines

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

only in the script the lines

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

and

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

refer to the 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>

was also corrected an error 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>
.........

Browser other questions tagged php

You are not signed in. Login or sign up in order to post.