1

Como posso fazer um formulário em que tem uma ccaixa de texto do tipo numero, e conforme o numero que eu introduzir aparece grupos de caixa de texto para preencher nesse mesmo formulário?

Exemplo:

Caixa de texto (numero de dias) = 4

<div>
<input type="date" name="data[]">
<input type="time" name="hinicio[]">
<input type="time" name="hfim[]">
</div>

<div>
<input type="date" name="data[]">
<input type="time" name="hinicio[]">
<input type="time" name="hfim[]">
</div>

<div>
<input type="date" name="data[]">
<input type="time" name="hinicio[]">
<input type="time" name="hfim[]">
</div>

<div>
<input type="date" name="data[]">
<input type="time" name="hinicio[]">
<input type="time" name="hfim[]">
</div>

Outro exemplo:

Caixa de texto (numero de dias) = 1

<div>
<input type="date" name="data[]">
<input type="time" name="hinicio[]">
<input type="time" name="hfim[]">
<div>

Isto sem fazer refresh à pagina, e no fim enviar todo o formulário inckuido a caixa de texto numero de dias Estou a trabalhar com php (Codeigniter)

1

1 Resposta 1

2

Usando jQuery você pode fazer um loop for e criar quantos inputs precisar. Veja um exemplo:

$(document).ready(function() {
  var $txtQuantidade = $('#txtQuantidade');
  var $btnAdicionar = $('#btnAdicionar');
  var $divForm = $('#divForm');

  $btnAdicionar.on('click', function() {
    var qtde = $txtQuantidade.val();
    console.log(qtde);
    var html = '';

    for (var i = 0; i < qtde; i++) {
      html += '<div>';
      html += '<input type="date" id="txtData_' + i + '" name="data[]">';
      html += '<input type="time" id="txtHoraIni_' + i + '" name="hinicio[]">'
      html += '<input type="time" id="txtHoraFim_' + i + '" name="hfim[]">';
      html += '<div>';
    }

    $divForm.html(html);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtQuantidade" />
<input type="button" id="btnAdicionar" value="Adicionar" />
<div id="divForm"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .