<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <!-- page content --> <div class="right_col" role="main"> <div class=""> <div class="page-title"> <div class="logo_left"> <img src="images/MaidenNameCom_final_logo_EB_750x125px.png" style="height:40px"> </div> <div class="title_left"> <h3>User Info </h3> </div> <div class="title_right"> <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> </div> </div> <div class="clearfix"></div> <div class="row"> <div class="container"> <div class="row"> <div class="col-md-12"> <div data-role="dynamic-fields"> <div class="form-inline"> <div class="form-group"> <label class="sr-only" for="field-name">Field Name</label> <input type="text" class="form-control" id="field-name" placeholder="Field Name"> </div> <span>-</span> <div class="form-group"> <label class="sr-only" for="field-value">Field Value</label> <input type="text" class="form-control" id="field-value" placeholder="Field Value"> </div> <button class="btn btn-danger" data-role="remove"> <span class="glyphicon glyphicon-remove"></span> </button> <button class="btn btn-primary" data-role="add"> <span class="glyphicon glyphicon-plus"></span> </button> </div> <!-- /div.form-inline --> </div> <!-- /div[data-role="dynamic-fields"] --> </div> <!-- /div.col-md-12 --> </div> <!-- /div.row --> </div> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel"> <div class="x_title"> <h2>Primary Info <small>Add Names</small></h2> <ul class="nav navbar-right panel_toolbox"> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Settings 1</a> </li> <li><a href="#">Settings 2</a> </li> </ul> </li> <li><a class="close-link"><i class="fa fa-close"></i></a> </li> </ul> <div class="clearfix"></div> </div> <div class="x_content"> <br /> <form class="form-horizontal form-label-left input_mask"> <div class="form-group"> <label class="col-sm-2 control-label">Name</label> <div class="col-sm-10"> <input type="text" class="form-control"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Phone</label> <div class="col-sm-10"> <div class="phone-list"> <div class="input-group phone-input"> <span class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="type-text">Type</span> <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a class="changeType" href="javascript:;" data-type-value="phone">Phone</a></li> <li><a class="changeType" href="javascript:;" data-type-value="fax">Fax</a></li> <li><a class="changeType" href="javascript:;" data-type-value="mobile">Mobile</a></li> </ul> </span> <input type="hidden" name="phone[1][type]" class="type-input" value="" /> <input type="text" name="phone[1][number]" class="form-control" placeholder="+1 (999) 999 9999" /> </div> </div> <button type="button" class="btn btn-success btn-sm btn-add-phone"><span class="glyphicon glyphicon-plus"></span> Add Phone</button> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback"> <input type="text" class="form-control has-feedback-left" id="inputSuccess2" placeholder="First Name"> <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span> </div> <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback"> <input type="text" class="form-control" id="inputSuccess3" placeholder="Last Name"> <span class="fa fa-user form-control-feedback right" aria-hidden="true"></span> </div> <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback"> <input type="text" class="form-control has-feedback-left" id="inputSuccess4" placeholder="Email"> <span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span> </div> <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback"> <input type="text" class="form-control" id="inputSuccess5" placeholder="Phone"> <span class="fa fa-phone form-control-feedback right" aria-hidden="true"></span> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Default Input</label> <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control" placeholder="Default Input"> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Disabled Input </label> <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control" disabled="disabled" placeholder="Disabled Input"> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Read-Only Input</label> <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control" readonly placeholder="Read-Only Input"> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Date Of Birth <span class="required">*</span> </label> <div class="col-md-9 col-sm-9 col-xs-12"> <input class="date-picker form-control col-md-7 col-xs-12" required="required" type="text"> </div> </div> <div class="ln_solid"></div> <div class="form-group"> <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3"> <button type="submit" class="btn btn-primary">Cancel</button> <button type="submit" class="btn btn-success">Submit</button> </div> </div> </form> <form> <div class="form-group multiple-form-group" data-max=3> <label>Multiple inputs (with data-max=3)</label> <div class="form-group input-group"> <input type="text" name="multiple[]" class="form-control"> <span class="input-group-btn"><button type="button" class="btn btn-default btn-add">+ </button></span> </div> </div> <div class="form-group multiple-form-group"> <label>Multiple selects</label> <div class="form-group input-group"> <select name="multiple[]" class="form-control"> <option value="">Default select</option> <option value="">Option 1</option> <option value="">Option 2</option> </select> <span class="input-group-btn"><button type="button" class="btn btn-default btn-add">+ </button></span> </div> </div> <div class="form-group multiple-form-group"> <label>Multiple textareas</label> <div class="form-group input-group"> <textarea name="multiple[]" class="form-control" rows="3"></textarea> <span class="input-group-btn"><button type="button" class="btn btn-default btn-add">+ </button></span> </div> </div> </form> </div> </div> <div class="x_panel"> <div class="x_title"> <h2>Form Design <small>different form elements</small></h2> <ul class="nav navbar-right panel_toolbox"> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Settings 1</a> </li> <li><a href="#">Settings 2</a> </li> </ul> </li> <li><a class="close-link"><i class="fa fa-close"></i></a> </li> </ul> <div class="clearfix"></div> </div> <div class="x_content"> <br /> <form id="demo-form2" data-parsley-validate class="form-horizontal form-label-left"> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">First Name <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <input type="text" id="first-name" required="required" class="form-control col-md-7 col-xs-12"> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">Last Name <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <input type="text" id="last-name" name="last-name" required="required" class="form-control col-md-7 col-xs-12"> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="third-name">Third Name <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <input type="text" id="third-name" name="last-name" required="required" class="form-control col-md-7 col-xs-12"> </div> </div> <div class="input_fields_wrap"> <button class="add_field_button">Add More Fields</button> <div><input type="text" name="mytext[]"></div> </div> <input type="hidden" name="count" value="1" /> <div class="control-group" id="fields"> <label class="control-label" for="field1">Nice Multiple Form Fields</label> <div class="controls" id="profs"> <form class="input-append"> <div id="field"><input autocomplete="off" class="input" id="field1" name="prof1" type="text" placeholder="Type something" data-items="8"/><button id="b1" class="btn add-more" type="button">+</button></div> </form> <br> <small>Press + to add another form field :)</small> </div> </div> <div class="form-group"> <label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Middle Name / Initial</label> <div class="col-md-6 col-sm-6 col-xs-12"> <input id="middle-name" class="form-control col-md-7 col-xs-12" type="text" name="middle-name"> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Gender</label> <div class="col-md-6 col-sm-6 col-xs-12"> <div id="gender" class="btn-group" data-toggle="buttons"> <label class="btn btn-default" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default"> <input type="radio" name="gender" value="male">   Male   </label> <label class="btn btn-primary" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default"> <input type="radio" name="gender" value="female"> Female </label> </div> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Date Of Birth <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <input id="birthday" class="date-picker form-control col-md-7 col-xs-12" required="required" type="text"> </div> </div> <div class="ln_solid"></div> <div class="form-group"> <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3"> <button type="submit" class="btn btn-primary">Cancel</button> <button type="submit" class="btn btn-success">Submit</button> </div> </div> </form> </div> </div> </div> </div> <div class="row"> <div class="col-md-6 col-xs-12"> <div class="x_panel"> <div class="x_title"> <h2>Form Design <small>different form elements</small></h2> <ul class="nav navbar-right panel_toolbox"> <li><a class="collapse-link"><i class="fa fa-user"></i></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Settings 1</a> </li> <li><a href="#">Settings 2</a> </li> </ul> </li> <li><a class="close-link"><i class="fa fa-close"></i></a> </li> </ul> <div class="clearfix"></div> </div> <div class="x_content"> <br /> <form class="form-horizontal form-label-left input_mask"> <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback"> <input type="text" class="form-control has-feedback-left" id="inputSuccess2" placeholder="First Name"> <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span> </div> <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback"> <input type="text" class="form-control" id="inputSuccess3" placeholder="Last Name"> <span class="fa fa-user form-control-feedback right" aria-hidden="true"></span> </div> <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback"> <input type="text" class="form-control has-feedback-left" id="inputSuccess4" placeholder="Email"> <span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span> </div> <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback"> <input type="text" class="form-control" id="inputSuccess5" placeholder="Phone"> <span class="fa fa-phone form-control-feedback right" aria-hidden="true"></span> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Default Input</label> <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control" placeholder="Default Input"> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Disabled Input </label> <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control" disabled="disabled" placeholder="Disabled Input"> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Read-Only Input</label> <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control" readonly placeholder="Read-Only Input"> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Date Of Birth <span class="required">*</span> </label> <div class="col-md-9 col-sm-9 col-xs-12"> <input class="date-picker form-control col-md-7 col-xs-12" required="required" type="text"> </div> </div> <div class="ln_solid"></div> <div class="form-group"> <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3"> <button type="submit" class="btn btn-primary">Cancel</button> <button type="submit" class="btn btn-success">Submit</button> </div> </div> </form> </div> </div> <div class="x_panel"> <div class="x_title"> <h2>Star Rating</h2> <ul class="nav navbar-right panel_toolbox"> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Settings 1</a> </li> <li><a href="#">Settings 2</a> </li> </ul> </li> <li><a class="close-link"><i class="fa fa-close"></i></a> </li> </ul> <div class="clearfix"></div> </div> <div class="x_content"> <h4>Star Ratings<small> Hover and click on a star</small></h4> <div> <div class="starrr stars"></div> You gave a rating of <span class="stars-count">0</span> star(s) </div> <p>Also you can give a default rating by adding attribute data-rating</p> <div class="starrr stars-existing" data-rating='4'></div> You gave a rating of <span class="stars-count-existing">4</span> star(s) </div> </div> <div class="x_panel"> <div class="x_title"> <h2>Registration Form <small>Click to validate</small></h2> <ul class="nav navbar-right panel_toolbox"> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Settings 1</a> </li> <li><a href="#">Settings 2</a> </li> </ul> </li> <li><a class="close-link"><i class="fa fa-close"></i></a> </li> </ul> <div class="clearfix"></div> </div> <div class="x_content"> <!-- start form for validation --> <form id="demo-form" data-parsley-validate> <label for="fullname">Full Name * :</label> <input type="text" id="fullname" class="form-control" name="fullname" required /> <label for="email">Email * :</label> <input type="email" id="email" class="form-control" name="email" data-parsley-trigger="change" required /> <label>Gender *:</label> <p> M: <input type="radio" class="flat" name="gender" id="genderM" value="M" checked="" required /> F: <input type="radio" class="flat" name="gender" id="genderF" value="F" /> </p> <label>Hobbies (2 minimum):</label> <p style="padding: 5px;"> <input type="checkbox" name="hobbies[]" id="hobby1" value="ski" data-parsley-mincheck="2" required class="flat" /> Skiing <br /> <input type="checkbox" name="hobbies[]" id="hobby2" value="run" class="flat" /> Running <br /> <input type="checkbox" name="hobbies[]" id="hobby3" value="eat" class="flat" /> Eating <br /> <input type="checkbox" name="hobbies[]" id="hobby4" value="sleep" class="flat" /> Sleeping <br /> <p> <label for="heard">Heard us by *:</label> <select id="heard" class="form-control" required> <option value="">Choose..</option> <option value="press">Press</option> <option value="net">Internet</option> <option value="mouth">Word of mouth</option> </select> <label for="message">Message (20 chars min, 100 max) :</label> <textarea id="message" required class="form-control" name="message" data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100" data-parsley-minlength-message="Come on! You need to enter at least a 20 caracters long comment.." data-parsley-validation-threshold="10"></textarea> <br/> <span class="btn btn-primary">Validate form</span> </form> <!-- end form for validations --> </div> </div> </div> <br /> <br /> <h2 align="center">Dynamically Add or Remove input fields in PHP with JQuery</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="Enter your Name" class="form-control name_list" /></td> <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td> </tr> </table> <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" /> </div> </form> </div> <div class="col-md-6 col-xs-12"> <div class="x_panel"> <div class="x_title"> <h2>Form Basic Elements <small>different form elements</small></h2> <ul class="nav navbar-right panel_toolbox"> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Settings 1</a> </li> <li><a href="#">Settings 2</a> </li> </ul> </li> <li><a class="close-link"><i class="fa fa-close"></i></a> </li> </ul> <div class="clearfix"></div> </div> <div class="x_content"> <br /> <form class="form-horizontal form-label-left"> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Default Input</label> <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control" placeholder="Default Input"> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Disabled Input </label> <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control" disabled="disabled" placeholder="Disabled Input"> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Read-Only Input</label> <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control" readonly placeholder="Read-Only Input"> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Date Of Birth <span class="required">*</span> </label> <div class="col-md-9 col-sm-9 col-xs-12"> <textarea class="form-control" rows="3" placeholder='rows="3"'></textarea> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Password</label> <div class="col-md-9 col-sm-9 col-xs-12"> <input type="password" class="form-control" value="passwordonetwo"> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">AutoComplete</label> <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" name="country" id="autocomplete-custom-append" class="form-control col-md-10"/> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Select</label> <div class="col-md-9 col-sm-9 col-xs-12"> <select class="form-control"> <option>Choose option</option> <option>Option one</option> <option>Option two</option> <option>Option three</option> <option>Option four</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Select Custom</label> <div class="col-md-9 col-sm-9 col-xs-12"> <select class="select2_single form-control" tabindex="-1"> <option></option> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> <option value="AZ">Arizona</option> <option value="CO">Colorado</option> <option value="ID">Idaho</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NM">New Mexico</option> <option value="ND">North Dakota</option> <option value="UT">Utah</option> <option value="WY">Wyoming</option> <option value="AR">Arkansas</option> <option value="IL">Illinois</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="OK">Oklahoma</option> <option value="SD">South Dakota</option> <option value="TX">Texas</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Select Grouped</label> <div class="col-md-9 col-sm-9 col-xs-12"> <select class="select2_group form-control"> <optgroup label="Alaskan/Hawaiian Time Zone"> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> </optgroup> <optgroup label="Pacific Time Zone"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ">Arizona</option> <option value="CO">Colorado</option> <option value="ID">Idaho</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NM">New Mexico</option> <option value="ND">North Dakota</option> <option value="UT">Utah</option> <option value="WY">Wyoming</option> </optgroup> <optgroup label="Central Time Zone"> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> <option value="IL">Illinois</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="OK">Oklahoma</option> <option value="SD">South Dakota</option> <option value="TX">Texas</option> <option value="TN">Tennessee</option> <option value="WI">Wisconsin</option> </optgroup> <optgroup label="Eastern Time Zone"> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="IN">Indiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="OH">Ohio</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WV">West Virginia</option> </optgroup> </select> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Select Multiple</label> <div class="col-md-9 col-sm-9 col-xs-12"> <select class="select2_multiple form-control" multiple="multiple"> <option>Choose option</option> <option>Option one</option> <option>Option two</option> <option>Option three</option> <option>Option four</option> <option>Option five</option> <option>Option six</option> </select> </div> </div> <div class="control-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Input Tags</label> <div class="col-md-9 col-sm-9 col-xs-12"> <input id="tags_1" type="text" class="tags form-control" value="social, adverts, sales" /> <div id="suggestions-container" style="position: relative; float: left; width: 250px; margin: 10px;"></div> </div> </div> <div class="form-group"> <label class="col-md-3 col-sm-3 col-xs-12 control-label">Checkboxes and radios <br> <small class="text-navy">Normal Bootstrap elements</small> </label> <div class="col-md-9 col-sm-9 col-xs-12"> <div class="checkbox"> <label> <input type="checkbox" value=""> Option one. select more than one options </label> </div> <div class="checkbox"> <label> <input type="checkbox" value=""> Option two. select more than one options </label> </div> <div class="radio"> <label> <input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios"> Option one. only select one option </label> </div> <div class="radio"> <label> <input type="radio" value="option2" id="optionsRadios2" name="optionsRadios"> Option two. only select one option </label> </div> </div> </div> <div class="form-group"> <label class="col-md-3 col-sm-3 col-xs-12 control-label">Checkboxes and radios <br> <small class="text-navy">Normal Bootstrap elements</small> </label> <div class="col-md-9 col-sm-9 col-xs-12"> <div class="checkbox"> <label> <input type="checkbox" class="flat" checked="checked"> Checked </label> </div> <div class="checkbox"> <label> <input type="checkbox" class="flat"> Unchecked </label> </div> <div class="checkbox"> <label> <input type="checkbox" class="flat" disabled="disabled"> Disabled </label> </div> <div class="checkbox"> <label> <input type="checkbox" class="flat" disabled="disabled" checked="checked"> Disabled & checked </label> </div> <div class="radio"> <label> <input type="radio" class="flat" checked name="iCheck"> Checked </label> </div> <div class="radio"> <label> <input type="radio" class="flat" name="iCheck"> Unchecked </label> </div> <div class="radio"> <label> <input type="radio" class="flat" name="iCheck" disabled="disabled"> Disabled </label> </div> <div class="radio"> <label> <input type="radio" class="flat" name="iCheck3" disabled="disabled" checked> Disabled & Checked </label> </div> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">Switch</label> <div class="col-md-9 col-sm-9 col-xs-12"> <div class=""> <label> <input type="checkbox" class="js-switch" checked /> Checked </label> </div> <div class=""> <label> <input type="checkbox" class="js-switch" /> Unchecked </label> </div> <div class=""> <label> <input type="checkbox" class="js-switch" disabled="disabled" /> Disabled </label> </div> <div class=""> <label> <input type="checkbox" class="js-switch" disabled="disabled" checked="checked" /> Disabled Checked </label> </div> </div> </div> <div class="ln_solid"></div> <div class="form-group"> <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3"> <button type="submit" class="btn btn-primary">Cancel</button> <button type="submit" class="btn btn-success">Submit</button> </div> </div> </form> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <div data-role="dynamic-fields"> <div class="form-inline"> <div class="form-group"> <label class="sr-only" for="field-name">Field Name</label> <input type="text" class="form-control" id="field-name" placeholder="Field Name"> </div> <span>-</span> <div class="form-group"> <label class="sr-only" for="field-value">Field Value</label> <input type="text" class="form-control" id="field-value" placeholder="Field Value"> </div> <button class="btn btn-danger" data-role="remove"> <span class="glyphicon glyphicon-remove"></span> </button> <button class="btn btn-primary" data-role="add"> <span class="glyphicon glyphicon-plus"></span> </button> </div> <!-- /div.form-inline --> </div> <!-- /div[data-role="dynamic-fields"] --> </div> <!-- /div.col-md-12 --> </div> <!-- /div.row --> </div>

html, body { padding-top: 20px; } [data-role="dynamic-fields"] > .form-inline + .form-inline { margin-top: 0.5em; } [data-role="dynamic-fields"] > .form-inline [data-role="add"] { display: none; } [data-role="dynamic-fields"] > .form-inline:last-child [data-role="add"] { display: inline-block; } [data-role="dynamic-fields"] > .form-inline:last-child [data-role="remove"] { display: none; }

$(function() { // Remove button click $(document).on( 'click', '[data-role="dynamic-fields"] > .form-inline [data-role="remove"]', function(e) { e.preventDefault(); $(this).closest('.form-inline').remove(); } ); // Add button click $(document).on( 'click', '[data-role="dynamic-fields"] > .form-inline [data-role="add"]', function(e) { e.preventDefault(); var container = $(this).closest('[data-role="dynamic-fields"]'); new_field_group = container.children().filter('.form-inline:first-child').clone(); new_field_group.find('input').each(function(){ $(this).val(''); }); container.append(new_field_group); } ); });