"Dynamic Form Fields - Add & Remove BS3"
Bootstrap 3.1.0 Snippet by SaraKaoru

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <div class='container'> <div class="row"> <div class="col-sm-9 col-sm-offset-3 form-box"> <div class="form-top"> <div class="form-top-left"> <h3>Gymboree特價團</h3> <p>Gymboree自由團，湊免運下單，匯率33.5，國際運費5元/g。目前清倉區再四折，很划算喔</p> </div> <div class="form-top-right"> <i class="fa fa-envelope"></i> </div> </div> <div class="form-bottom contact-form"> <form role="form" action="assets/contact.php" method="post"> <div class="form-group"> <label for="contact-nickname">FB暱稱</label> <input name="nickname" placeholder="FB暱稱" class="contact-nickname form-control" id="contact-nickname" type="text"> </div> <div class="form-group"> <label for="contact-name">真實姓名</label> <input name="name" placeholder="真實姓名" class="contact-name form-control" id="contact-name" type="text"> </div> <div class="form-group"> <label for="contact-email">Email</label> <input name="email" placeholder="Email..." class="contact-email form-control" id="contact-email" type="text"> </div> <div class="form-group"> <label for="contact-tel">聯絡電話</label> <input name="tel" placeholder="聯絡電話" class="contact-tel form-control" id="contact-tel" type="text"> </div> <div class="form-group"> <label for="contact-addr">EZ門市服務代號+門市店名 or 收件地址</label> <textarea name="addr" placeholder="取件門市或地址" class="contact-addr form-control" id="contact-addr"></textarea> </div> <div class="form-group" id="detail" > <label for="detail">明細</label> <div class="entry"> <div class="col-xs-3" style="padding-left:0"> <input class="form-control" name="itemname[]" type="text" placeholder="item name" /> </div> <div class="col-xs-2 has-feedback"> <input class="form-control" name="size[]" type="text" placeholder="size" /> </div> <div class="col-xs-2 has-feedback"> <input class="form-control" name="color[]" type="text" placeholder="color" /> </div> <div class="col-xs-4 has-feedback"> <input class="form-control" name="url[]" type="text" placeholder="url" /> </div> <div class="col-xs-1 has-feedback"> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> </div> </div> <div class="form-group"> <label for="exampleInputFile">購物車截圖</label> <input name="myFile" type="file" class="form-control-file" id="exampleInputFile"> <small class="text-muted">上傳購物車截圖.</small> </div> <button type="button" class="btn btn-primary" onclick="getformcontext(); return false;">送出</button> </form> <div id="output"></div> </div> </div> </div> </div> </body>
.entry:not(:first-of-type) { margin-top: 10px; } .glyphicon { font-size: 12px; } col-xs-1,col-xs-2,.col-xs-3,col-xs-4{ padding-left:10px;padding-right:10px; }
$(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('#detail'), currentEntry = $(this).parents('.entry:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('.entry:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span class="glyphicon glyphicon-minus"></span>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.entry:first').remove(); e.preventDefault(); return false; }); }); function getformcontext(){ alert('sent'); }

Related: See More

Paper Dashboard Angular
Bootstrap 4 Animated Dynamic Form
Dynamic Sortable Tables
login-form

Questions / Comments: