Salvar dados dos Inputs clonados pelo OnClick

[Richard.Ribeiro 0]

Boa tarde Pessoal e minha primeira vez aqui. e gostaria de uma ajuda.

como posso salvar no banco o input adicionado pela função ONCLICK??

Encontrei essa ajuda  aqui no fórum "(formulario[0][quantidade]) para que os inputs adicionados não fiquem com mesmo nome, porém ainda não conseguir salvar no banco, estou salvando apenas o principal.

Resumindo, preciso salvar os pedidos de todos inputs e select adicionado pelo onlick.

 

 

  <div id="box" >

  <form id="teste"  method="post">
    <?php
      if(isset($_POST['acao'])){
        $tipo_material = $_POST['material'];
        $quantidade = $_POST['quantidade'];

        // salvar no banco de dados!
            $gravar = new Painel();
            $gravar->cadastrarItem($tipo_material,$quantidade);

            }
  ?>

  <div class="pedido">

    <label>Selecione Material:</label>
    <select name="formulario[0] [material]" id="material">  

--AQUI MOSTRA OS DADOS RETORNADOS POR UM CONSULTA AO BANCO COM FOREACH--

       </select>
    <input type="text" id="quantidade" name="formulario[0][quantidade]" placeholder="Digite a Quantidade" >
    <input type="submit" name="acao" value="Cadastrar!">
    </form>

</div><!--pedido-->
  </div><!--box-->

 

 

[William Bruno 1501]

vc transforma em um array:

 

<input type="text" id="quantidade" name="quantidade[]" placeholder="Digite a Quantidade" >

 

e ai no server-side, vc tem que iterar nesse array:

 

$quantidade1 = $_POST['quantidade'][0];

$quantidade2 = $_POST['quantidade'][1];

 

 

entendeu?

[Richard.Ribeiro 0]

Willian, por gentileza, OK transformando em array, MAS uma vez que não sei quantas vezes o usuário vai duplica o input "quantidade" e "material" como faço no PHP.. por que pode ter quantidade[0] ou quantidade[10]  em um único pedido

[Michael Granados 0]

Pelo que entendi, você quer que o usuário possa te enviar um pedido com vários materiais e um valor para cada um deles, certo? Algo como....

 

<?php

$dados = array(
  'materiais' => array(
    1 => 'cimento',
    2 => 'tijolo',
  ),
  'quantidades' => array(
    1 => '21',
    2 => '200',
  ),
);

?>

Ou ainda... para ficar mais fácil...

 

<?php

$dados = array(
  1 => array(
    'produto' => 'cimento',
    'quantidade' => '200',
  ),
  2 => array
    'produto' => 'tijolo',
    'quantidade' => '400',
  ),
);

?>

 

[Richard.Ribeiro 0]

Agradeço Pessoal pelas orientações.. resolvir usando JS.

  <div class="pedido">

    <label>Selecione Material:</label>
    <select name="material[]" id="material">
      <option selected disabled>--- Selecionte o Material ---</option>
  <?php
  $categoria = Painel::selectAll('tipo_material');
  foreach ($categoria as $key => $value) {
    ?>

  <option value="<?php echo $value ['descricao'];?>">
      <?php echo $value ['descricao']; ?>

  </option>

<?php } ?>

 

    </select>
    <input type="text" id="quantidade" name="qnt_solicitada[]" placeholder="Digite a Quantidade" >

 

  </div>

</div>
    <button type="button" name="button" class="clonador">Novo Item:</button>
<input type="submit" name="acao" value="Cadastrar!">
  </form>

 

 

 

 

 

 

 

<script  src="<?php echo INCLUDE_PATH_PAINEL ?>js/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){

      var elm_html = $('.pedido').html();   //faz uma cópia dos elementos a serem clonados.

      $(document).on('click', '.clonador', function(e){
          e.preventDefault();
          var i = $('.pedido').length;    //pega a quantidade de clones;
          var elementos = elm_html.replace(/\[[0\]]\]/g, '['+i+++']');  //substitui o valor dos index e incrementa++
          $('#cadastro').append(elementos);  //exibe o clone.
      });

  });
</script>

 

  <?php
  die();
  ?>
</div><!--box-content-->

[Michael Granados 0]

Se um dia você quiser adicionar um botão de remover o material, a lógica do seu script pode falhar. Recomendo deixar o contador de fora, assim como você fez com o elm_html e incrementá-lo separadamente...

$(document).ready(function(){
  var elm_html = $('.pedido').html();   //faz uma cópia dos elementos a serem clonados.
  var counter = 0;

  $(document).on('click', '.clonador', function(e){
    e.preventDefault();
    var elementos = elm_html.replace(/\[[0\]]\]/g, '[' + counter +']');  //substitui o valor dos index
    counter++; // incrementa o contador

    $('#cadastro').append(elementos);  //exibe o clone.
  });
});

Ah, e o removedor... é claro...

 

<div class="pedido">
  { ... }
  <button type="button" class="removedor">remover</button>
</div>

<script>
  $(document).on('click', '.removedor', function (event) {
    event.preventDefault();
    $(this).parents('.pedido').remove(); // navega até o pai com a classe pedido e remove ele inteiro
  });
</script>

Quando ao fato de chegar a informação no seu servidor com possibilidade de números faltando na chave, abstraia... você pode utilizar o foreach($_POST['material'] as $key => $value) do php para saber o que está chegando, onde o $key é a chave que você vai utilizar para saber o $_POST['quantidade'][$key] que você precisa. ;-) 

[Richard.Ribeiro 0]

Perfeito Michael, precisei do botão para remover... muito Obrigado pela ajuda.. Agradeço.