Inserir vários campos dinamicamente

Ariel Oliveira · Outubro 10, 2017

Fala galera! Estou com uma dúvida... Preciso criar uma página que insira campos dinamicamente. Pesquisando na web, achei vários códigos que mostram como adicionar campos dinamicamente, porém, em todos os exemplos eu vejo ele adicionando apenas um tipo de campo. Na página que eu preciso criar tem que ter a opção de adicionar três tipos de campo, sendo eles input dos tipos: text, radio e checkbox. Ou seja, na página tem que conter a opção para adicionar qualquer um dos três, basta eu selecionar o tipo de campo que desejo adicionar e ele criará, eu consigo fazer isso para apenas um tipo de input, mas ao tentar duplicar o código para alterar o tipo de input ele simplesmente buga. Enfim, segue o meu código atual:

 <html>  
      <head>  
           <title>Formulário teste</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <div class="container">  
                <br />  
                <br />  
                <h2 align="center">Criando Formulário</h2>  
                <div class="form-group">  
                     <form name="add_name" id="add_name">  
                          <div class="table-responsive">  
                               <table class="table table-bordered" id="dynamic_field">  
                                    <tr>  
                                         <td><input type="text" name="name[]" placeholder="" class="form-control name_list" /></td>  
                                         <td><button type="button" name="add" id="add" class="btn btn-success">Adicionar Mais</button></td>  

                                    </tr>  
                               </table>  
                               <input type="button" name="submit" id="submit" class="btn btn-info" value="Submeter" />  
                          </div>  
                     </form>  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="name[]" placeholder="" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
      $('#submit').click(function(){            
           $.ajax({  
                url:"name.php",  
                method:"POST",  
                data:$('#add_name').serialize(),  
                success:function(data)  
                {  
                     alert(data);  
                     $('#add_name')[0].reset();  
                }  
           });  
      });  
 });  
 </script>