Created
June 3, 2021 15:04
-
-
Save MoisesTedeschi/b4ea3e62bde4c7d6cabfc2a55d76e342 to your computer and use it in GitHub Desktop.
Teste para add new input para um formulário que pode registrar vários usuários.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title></title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> | |
| <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> | |
| <style> | |
| * { | |
| .border-radius(0) !important; | |
| } | |
| #field { | |
| margin-bottom:20px; | |
| } | |
| .form-group input { | |
| width:100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row justify-content-center"> | |
| <div class="col-lg-10"> | |
| <div class="card"> | |
| <div class="card-body"> | |
| <h4 class="mt-0 header-title">Cadastrar | Novos Usuários</h4> | |
| <input type="hidden" name="count" value="1" /> | |
| <form> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <div class="form-group"> | |
| <input autocomplete="off" class="input" id="nome1" name="nome1" type="text" placeholder="Nome Completo"/> | |
| </div> | |
| </div> | |
| <div class="col-md-7"> | |
| <div class="form-group"> | |
| <input autocomplete="off" class="input" id="email-user1" name="email-user1" type="email" placeholder="Seu melhor e-mail" /> | |
| </div> | |
| </div> | |
| <div class="col-md-1 position-relative"> | |
| <button id="b1" class="btn add-novo" type="button">+</button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| $(document).ready(function(){ | |
| var next = 1; | |
| $(".add-novo").click(function(e){ | |
| e.preventDefault(); | |
| var addNew = "#nome" + next; | |
| var addRemove = "#nome" + (next); | |
| next = next + 1; | |
| var newIn = '<input autocomplete="off" class="input form-control" id="nome' + next + '" name="nome' + next + '" type="text">'; | |
| var newInput = $(newIn); | |
| var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-input" >-</button>'; | |
| var removeButton = $(removeBtn); | |
| $(addNew).after(newInput); | |
| $(addRemove).after(removeButton); | |
| $("#nome" + next).attr('data-source',$(addNew).attr('data-source')); | |
| $("#count").val(next); | |
| $('.remove-input').click(function(e){ | |
| e.preventDefault(); | |
| var fieldNum = this.id.charAt(this.id.length-1); | |
| var fieldID = "#nome" + fieldNum; | |
| $(this).remove(); | |
| $(fieldID).remove(); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment