1

Tenho um formulário onde tem:

=f.input :name     , label: false , placeholder: "Nome do amigo"      , input_html:{class: "form__input"} , required: true

=f.input :email    , label: false , placeholder: "Email do amigo"     , input_html:{class: "form__input"} , required: true

Do lado tem um ícone +, onde se o usuário clicar nele, a dupla de campos (nome e email) aparecem vazios embaixo mais uma vez, para um novo cadastro. Alguém me ajuda a fazer isso?

7
  • 1
    Seja bem vinda ao site StackOverFlow. Post seu código usando a formatação para código, assim fica mais legível.
    – durtto
    10/12/2015 às 18:30
  • Seu código postado está completo? Verifique para que possamos ajudar.
    – durtto
    10/12/2015 às 18:31
  • Se postasse um código ajudaria a gente a entender a dúvida. Eu entendi que existem dois inputs. Mas não ficou claro pra mim o que o "+" faria.
    – Paulo
    10/12/2015 às 18:31
  • É um ícone pra adicionar mais um amigo 10/12/2015 às 18:32
  • 1
    Pretendes adicionar campos dinamicamente ?
    – Edilson
    10/12/2015 às 18:34

4 Respostas 4

2

Você pode colocar os os elementos que você deseja clonar dentro de um fieldset, assim:

<fielset id="group">
    <label for="nome">Nome do amigo</label>
    <input type="text" required classs="form__input" name="nome"/>

    <label for="email">E-mail do amigo</label>
    <input type="text" required classs="form__input" name="email"/>
</fielset>

JavaScript:

var n = 0;
function addNovo(){
    var element = document.getElementById("group")
    var copy= document.cloneNode(element);
    n++;

    copy.getElementsByTagName('label')[0].htmlFor= 'nome'+n;
    copy.getElementsByTagName('input')[0].id= 'nome'+n;
    copy.getElementsByTagName('label')[1].htmlFor= 'email'+n;
    copy.getElementsByTagName('input')[1].id= 'email'+n;

    element.parentNode.appendChild(copy);   
}

Depois é so colocar no evento click a chamada da função onclick="addNovo() no seu botão que contem o +.

0

Você pode usar javascript pra isso. Ao clicar no botão, vc pode fazer (é só um exemplo, tem que adaptar ao seu código):

function add() {
    var x = '<input type="text" placeholder: "Nome do amigo" required /> <input type="text" placeholder: "Email do amigo" required />'; // colocar código html aqui.
    document.getElementById('id_form').innerHTML += x; // id_form id do seu formulário.
}

Aí, é só modificar a função add() pra ela se adaptar ao seu código. Coloque um id pro seu formulário. Essa função add() será chamada no onclick do botão "+".

0

Veja se te atende.

var counter = 1;
jQuery('a.add-author').click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><input type="text" name="first_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td></tr>');
    jQuery('table.authors-list').append(newRow);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<table class="authors-list">
  <tr><td>author's first name</td><td>author's last name</td></tr>
  <tr><td><input type="text" name="first_name" /></td><td><input type="text" name="last_name" /></td></tr>
</table>
<a href="#" title="" class="add-author">Add Author</a>

0

Montei este fiddle baseado em bootstrap

http://jsfiddle.net/gildonei/ougkLo46/

HTML

<form id="form-teste">
  <div class="row clone">
    <div class="col-xs-12 col-sm-12 col-lg-5 col-md-5">
      <label for="PessoaEmail0EmailTipoId">Tipo de E-mail</label>
        <select name="data[PessoaEmail][0][email_tipo_id]" required="required" id="PessoaEmail0EmailTipoId" class="form-control">
          <option value="">Tipo de email</option>
          <option value="1">Pessoal</option>
          <option value="2" selected="selected">Profissional</option>
        </select>
    </div>
    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
        <label for="PessoaEmail0DsEmail">Endereço de E-mail</label>
        <input name="data[PessoaEmail][0][ds_email]" placeholder="Email" maxlength="255" required="required" class="email valid form-control" type="email" id="PessoaEmail0DsEmail"><i></i>
    </div>
    <div class="col-xs-12 col-sm-12 col-lg-1 col-md-1">
    <label>&nbsp;</label>
      <button type="button" title="remover" class="btn button-remove btn-danger col-md-12">
        <i class="fa fa-remove"></i>
      </button>
    </div>
  </div>
  <div class="row">&nbsp;</div>
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
      <button type="button" class="btn button-more btn-success pull-right">
        <i class="fa fa-plus-circle"></i> Mais
      </button>
    </div>
  </div>
</form>

JAVASCRIPT

var nrQtdProduto = 0;
$(function() {

  $('.button-more').click(function() {
    var $objDivProduto = $(this).parent().parent().parent().children('.clone');
    nrQtdProduto = $(this).parent().parent().parent().children('.row').length - 1;

    $objDivProduto
      .clone()
      .removeClass('clone')
      .find('input:text, input.email').each(function(k, v) {
        var strName = $(v).attr('name');
        var strId = $(v).attr('id');

        $(this)
          .attr('name', strName.replace(0, nrQtdProduto))
          .attr('id', strId.replace(0, nrQtdProduto));

        if ($(this).attr('type') != 'hidden') {
          $(this).val('');
        }

      })
      .end()
      .insertAfter($objDivProduto);

    removeElement();
  });

});

function removeElement() {
  // -------------------------------------------------------
  // INICIO DO CÓDIGO DE REMOVER NOVO TELEFONE, EMAIL ...
  // -------------------------------------------------------
  $('.button-remove').click(function() {

    nrQtdProduto = $(this).parent().parent().parent().children('.row').length - 1;

    if (nrQtdProduto == 1) {
      showAlert('Erro', 'Você deve ter ao menos um campo para cadastro.');

      return;
    }

    if (confirm('Deseja realmente remover a linha ?')) {
      var objRemove = $(this).parent().parent();
      objRemove.hide("slow");
    }
  });
}

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 .