Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Untitled"
Bootstrap 4.1.1 Snippet by
muzikiii
4.1.1
jQuery
Preview
HTML
JS
View Full Screen
Fork
Fork this
487
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class="container"> <div class="row"> <div class="col-lg-12"> <h2>Story</h2> <div class="alert alert-secondary" role="alert"> A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="card"> <div class="card-body"> This is some text within a card body. </div> </div> <br> <nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3"> <a class="navbar-brand" href="#">Data</a> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" href="#scrollspyTopic1">Topic 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyTopic2">Topic 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyTopic3">Topic 3</a> </li> </ul> </nav> </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> <B> Common </B> </div> <div class="panel-body"> <div class="row"> <div class="col-lg-12"> <div class="form-row"> <div class="col-md-4 mb-3"> <label for="validationServer013">Name *</label> <input type="text" class="form-control" id="validationServer013" placeholder="name" required> </div> <div class="col-md-4 mb-3"> <label for="validationServer013">Tax No</label> <input type="text" class="form-control" id="validationServer013" placeholder="tax_no" required> </div> <div class="col-md-4 mb-3"> <label for="validationServer013">Tax Name</label> <input type="text" class="form-control" id="validationServer013" placeholder="tax_name" required> </div> </div> <div class="form-row"> <div class="col-md-4 mb-3"> <div class="form-group"> <label class="control-label" for="date">Type</label> <div class="form-check"> <div class="radio"><label><input type="radio" name="gender" value="male" required="true">AAA</label></div> <div class="radio"><label><input type="radio" name="gender" value="female" required="true">BBB</label></div> </div> </div> </div> <div class="col-md-4 mb-3"> <div class="form-group"> <label class="control-label" for="date">Orgazation Type</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="status" name="statusradio" value="Female" checked>Government </label> <label class="radio-inline"> <input type="radio" id="status" name="statusradio" value="Male">Organization </label> </div> </div> </div> </div> <!-- Country ----> <div class="form-row"> <div class="col-md-4 mb-3"> <div class="form-group"> <label class="control-label" for="Country">Country</label> <select class="form-control form-control-lg mb-3" aria-label=".form-select-lg example" id="country" required="true" name="country" disabled> <option selected value="THA">THA</option> <option value="LAO">LAO</option> <option value="OTH">OTHER</option> </select> </div> </div> </div> <!-- address ----> <div class="form-row"> <div class="col-md-8 mb-3"> <label for="validationServer013">Address *</label> <input type="text" class="form-control" id="validationServer013" placeholder="address_th" required> </div> </div> <!-- address ----> <div class="form-row"> <div class="col-md-4 mb-3"> <label for="validationServer013">Place</label> <input type="text" class="form-control" id="validationServer013" placeholder="" required> </div> <div class="col-md-2mb-3"> <label for="validationServer013">No</label> <input type="text" class="form-control" id="validationServer013" placeholder="" required> </div> <div class="col-md-2 mb-3"> <label for="validationServer013">Building</label> <input type="text" class="form-control" id="validationServer013" placeholder="" required> </div> <div class="col-md-1 mb-3"> <label for="validationServer013">Floor</label> <input type="text" class="form-control" id="validationServer013" placeholder="" required> </div> <div class="col-md-1 mb-3"> <label for="validationServer013">Room</label> <input type="text" class="form-control" id="validationServer013" placeholder="" required> </div> </div> </div> </div> </div> </div> <div class="panel panel-primary"> <div class="panel-heading" id="scrollspyTopic1"> <B> Topoic 1 </B> </div> <div class="panel-body"> <div class="row"> <div class="col-md-12 mb-3"> <div class="card"> <div class="card-body"> <h3 class="card-title">Common Data</h3> <h6 class="card-subtitle mb-2 text-muted">Common Data</h6> <div class="form-row"> <div class="col-md-2 mb-4"> <label for="validationServer013">Code *</label> <input type="text" class="form-control" id="validationServer013" placeholder="name" required> </div> <div class="col-md-1 mb-4"></div> <div class="col-md-3 mb-4"> <div class="form-group"> <label class="control-label" for="date">Status</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="status" name="statusradio1" value="true" checked>มีสิทธิ์ </label> <label class="radio-inline"> <input type="radio" id="status" name="statusradio1" value="false">ไม่มีสิทธิ์ </label> </div> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <!-- Form code begins --> <form method="post"> <div class="form-group"> <!-- Date input --> <label for="validationServer013">Medicare Date</label> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" disabled /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> <!-- Form code ends --> </div> </div> </div> <div class="form-row"> <div class="col-md-3 mb-4"> <div class="form-group"> <label class="control-label" for="date">Status 1</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="status1" name="statusradio2" value="Female" checked>มีสิทธิ์ </label> <label class="radio-inline"> <input type="radio" id="status1" name="statusradio2" value="Male">ไม่มีสิทธิ์ </label> </div> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <!-- Form code begins --> <form method="post"> <div class="form-group"> <!-- Date input --> <label for="validationServer013">Effective Date</label> <!-- <label for="dtpickerdemo" class="col-sm-4 control-label">Medicare Date</label>--> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> <!-- Form code ends --> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <form method="post"> <div class="form-group"> <label for="validationServer013">Expire Date</label> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <form method="post"> <div class="form-group"> <label for="validationServer013">Start Date 1</label> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> </div> </div> </div> <div class="form-row"> <div class="col-md-3 mb-4"> <div class="form-group"> <label class="control-label" for="date">Status 2</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="status2" name="statusradio3" value="Female" checked>มีสิทธิ์ </label> <label class="radio-inline"> <input type="radio" id="status2" name="statusradio3" value="Male">ไม่มีสิทธิ์ </label> </div> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <!-- Form code begins --> <form method="post"> <div class="form-group"> <!-- Date input --> <label for="validationServer013">Effective Date</label> <!-- <label for="dtpickerdemo" class="col-sm-4 control-label">Medicare Date</label>--> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> <!-- Form code ends --> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <!-- Form code begins --> <form method="post"> <div class="form-group"> <!-- Date input --> <label for="validationServer013">Expire Date</label> <!-- <label for="dtpickerdemo" class="col-sm-4 control-label">Medicare Date</label>--> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> <!-- Form code ends --> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <form method="post"> <div class="form-group"> <label for="validationServer013">Start Date 2</label> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> </div> </div> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="card"> <div class="card-body"> <h3 class="card-title">Contact</h3> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="card"> <div class="card-body"> <h3 class="card-title">Access</h3> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <div class="form-row"> <div class="col-md-3 mb-3"> <div class="form-group"> <label class="control-label" for="PayType">Type</label> </div> </div> <div class="col-md-2 mb-3"> <label for="validationServer013">Username</label> <input type="text" class="form-control" id="validationServer013" required> </div> <div class="col-md-2 mb-3"> <label for="validationServer013">Password</label> <input type="password" class="form-control" id="validationServer013" required> </div> <div class="col-md-4 mb-3"> <div class="form-group"> <!-- Date input --> <label for="validationServer013">Effective Date</label> <!-- <label for="dtpickerdemo" class="col-sm-4 control-label">Medicare Date</label>--> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <!-- Row 2 --> <div class="form-row"> <div class="col-md-3 mb-3"> <div class="form-group"> <label class="control-label" for="PayType">File</label> </div> </div> <div class="col-md-2 mb-3"> </div> <div class="col-md-2 mb-3"> <label for="validationServer013">Password</label> <input type="password" class="form-control" id="validationServer013" required> </div> <div class="col-md-4 mb-3"> </div> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="card"> <div class="card-body"> <h3 class="card-title">Finance</h3> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <div class="form-row"> <div class="col-md-2 mb-3"> <div class="form-group"> <label class="control-label" for="PayType">Type</label> <select class="form-control form-control-lg mb-3" aria-label=".form-select-lg example" id="PayType" required="true" name="PayType"> <option selected>NONE</option> <option value="AF">Transfer</option> <option value="AX">Cash</option> <option value="AS">Cheque</option> </select> </div> </div> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="card"> <div class="card-body"> <h3 class="card-title">Condition</h3> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <div class="form-row"> <div class="col-md-2 mb-3"> <label class="control-label" for="level">Level</label> <select class="form-control form-control-lg mb-3" aria-label=".form-select-lg example" id="level" required="true" name="level"> <option selected>select menu</option> <option value="AF">1</option> <option value="AX">2</option> <option value="AS">3</option> </select> </div> <div class="col-md-1 mb-3"></div> <div class="col-md-2 mb-3"> <label class="control-label" for="zone">Zone</label> <select class="form-control form-control-lg mb-3" aria-label=".form-select-lg example" id="zone" required="true" name="zone"> <option selected>select menu</option> <option value="AF">1</option> <option value="AX">2</option> <option value="AS">3</option> </select> </div> </div> <div class="form-row"> <div class="col-md-3 mb-3"> <div class="form-group"> <label class="control-label" for="date">AUTO</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="auto" name="auto" value="yes" checked>Yes </label> <label class="radio-inline"> <input type="radio" id="auto" name="auto" value="no">No</label> </div> </div> </div> <div class="col-md-4 mb-3"> <div class="form-group"> <label class="control-label" for="date">Strict</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="strict" name="strict" value="yes" checked>Yes </label> <label class="radio-inline"> <input type="radio" id="strict" name="strict" value="no">No</label> </div> </div> </div> <div class="col-md-4 mb-3"> <div class="form-group"> <label class="control-label" for="date">Show Name</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="showName" name="showName" value="yes" checked>Yes </label> <label class="radio-inline"> <input type="radio" id="showName" name="showName" value="no">No</label> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Topic 2 --> <div class="panel panel-primary"> <div class="panel-heading" id="scrollspyTopic2"> <B> TOPIC 2 </B> </div> <div class="panel-body"> <div class="row"> <div class="col-lg-12"> <div class="form-row"> <div class="col-md-3 mb-3"> <div class="form-group"> <label class="control-label" for="date">Type</label> <!-- Default checked radio --> <div class="form-check"> <div class="radio"><label><input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="aaaCheck">AAA</label></div> <div class="radio"><label><input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="bbbCheck">BBB</label></div> <div class="radio"><label><input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="cccCheck">CCC</label> <div id="ifCCC" style="visibility:hidden"> <input type="text" class="form-control" id="yes" placeholder="email"> </div> </div> </div> </div> </div> <div class="col-md-2 mb-3"> <div class="form-group"> <label for="validationServer013">Formal Record</label> <input type="text" class="form-control" id="validationServer013" placeholder="formal"> </div> </div> </div> </div> </div> </div> </div> <!-- End of Topic 2 --> <!-- Topic 3--> <div class="panel panel-primary"> <div class="panel-heading" id="scrollspyTopic3"> <B> TOPIC 3 </B> </div> <div class="panel-body"> <div class="row"> <div class="col-lg-12"> <div class="form-row"> <div class="col-md-12 mb-3"> <div class="card"> <div class="card-body"> <h3 class="card-title">Common Data</h3> <h6 class="card-subtitle mb-2 text-muted">Common Data</h6> <div class="form-row"> <div class="col-md-2 mb-3"> <label for="validationServer013">Code *</label> <input type="text" class="form-control" id="validationServer013" placeholder="name" required> </div> <div class="col-md-1 mb-3"></div> <div class="col-md-4 mb-3"> <div class="form-group"> <label class="control-label" for="date">Status</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="status" name="statusradio1" value="true" checked>มีสิทธิ์ </label> <label class="radio-inline"> <input type="radio" id="status" name="statusradio1" value="false">ไม่มีสิทธิ์ </label> </div> </div> </div> </div> <div class="form-row"> <div class="col-md-3 mb-4"> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> <label class="form-check-label" for="inlineCheckbox2">2</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> <label class="form-check-label" for="inlineCheckbox3">3</label> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <form method="post"> <div class="form-group"> <label for="validationServer013">Effective Date</label> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <form method="post"> <div class="form-group"> <label for="validationServer013">Expire Date</label> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> </div> </div> <div class="col-md-3 mb-4"> <div class="form-group"> <form method="post"> <div class="form-group"> <label for="validationServer013">Start Date</label> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> </div> </div> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="card"> <div class="card-body"> <h3 class="card-title">Contact</h3> <h6 class="card-subtitle mb-2 text-muted">Contact Detail</h6> <div class="form-row"> <div class="col-md-2 mb-3"> <div class="form-group"> <label class="control-label" for="PayType">General</label> </div> </div> <div class="col-md-3 mb-3"> <label for="validationServer013">Data 1</label> <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script> <div class='item1'> <input type="text" name="tel[]" placeholder="" class="form-control" id="tel1" > <button id="add1" class="btn btn-light btn-sm">+</button> </div> <div id="items1"></div> </div> <div class="col-md-3 mb-3"> <label for="validationServer013">Data 2</label> <div class='item2'> <input type="text" name="tel2[]" placeholder="" class="form-control" id="tel2"> <button id="add2" class="btn btn-light">+</button> </div> <div id="items2"></div> </div> <div class="col-md-3 mb-3"> <label for="validationServer013">Data 3</label> <div class='item3'> <input type="text" name="tel3[]" placeholder="" class="form-control" id="tel3"> <button id="add3" class="btn btn-light">+</button> </div> <div id="items3"></div> </div> </div> </div> </div> </div> <div class="col-md-12 mb-3"> <div class="card"> <div class="card-body"> <h3 class="card-title">Finance</h3> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <div class="form-row"> <div class="col-md-2 mb-3"> <label class="control-label" for="level">Bank</label> <select class="form-control form-control-lg mb-3" aria-label=".form-select-lg example" id="level" required="true" name="level"> <option selected>select menu</option> <option value="AF">1</option> <option value="AX">2</option> <option value="AS">3</option> </select> </div> </div> <div class="form-row"> <div class="col-md-2 mb-3"> <label for="validationServer013">No</label> <input type="text" class="form-control" id="validationServer013" placeholder="name" required> </div> <div class="col-md-4 mb-3"> <label for="validationServer013">Name</label> <input type="text" class="form-control" id="validationServer013" placeholder="tax_no" required> </div> <div class="col-md-3 mb-3"> <label for="validationServer013">Branch</label> <input type="text" class="form-control" id="validationServer013" placeholder="tax_name" required> </div> <div class="col-md-2 mb-3"> <label class="control-label" for="zone">Type</label> <select class="form-control form-control-lg mb-3" aria-label=".form-select-lg example" id="zone" required="true" name="zone"> <option selected>select menu</option> <option value="AF">1</option> <option value="AX">2</option> <option value="AS">3</option> </select> </div> </div> <div class="form-row"> <div class="col-md-10 mb-3"> <div class="form-group"> <label for="exampleFormControlTextarea1">Example textarea</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> </div> </div> <div class="form-row"> <div class="col-md-2 mb-3"> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">Status XXX </label> </div> </div> <div class="col-md-4 mb-3"> <div class="form-group"> <form method="post"> <div class="form-group"> <label for="validationServer013">Expire Date</label> <div class='col-sm-6 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> </div> </div> </div> </div> </div> </div> <button type="submit" class="btn btn-primary mb-2">Submit</button> </div> </div> </div> </div> </div> <!-- End of Topic 3 --> <!-- Topic 4 --> <div class="panel panel-primary"> <div class="panel-heading" id="scrollspyTopic4"> <B> TOPIC 4 </B> </div> <div class="panel-body"> <div class="row"> <div class="col-lg-12"> <div class="card"> <div class="card-body"> <h3 class="card-title">Common Data</h3> <h6 class="card-subtitle mb-2 text-muted">Common Data</h6> <div class="form-row"> <div class="col-md-2 mb-3"> <label for="validationServer013">Code *</label> <input type="text" class="form-control" id="validationServer013" placeholder="name" required> </div> <div class="col-md-1 mb-3"></div> <div class="col-md-4 mb-3"> <div class="form-group"> <label class="control-label" for="date">Status</label> <div class="radio"> <label class="radio-inline"> <input type="radio" id="status" name="statusradio1" value="true" checked>มีสิทธิ์ </label> <label class="radio-inline"> <input type="radio" id="status" name="statusradio1" value="false">ไม่มีสิทธิ์ </label> </div> </div> </div> </div> <div class="form-row"> <div class="col-md-3 mb-4"> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> <label class="form-check-label" for="inlineCheckbox2">2</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> <label class="form-check-label" for="inlineCheckbox3">3</label> </div> </div> </div> </div> </div> </div> </div> </div> <!-- End of Topic 4 --> </div>
function yesnoCheck() { if (document.getElementById('cccCheck').checked) { document.getElementById('ifCCC').style.visibility = 'visible'; } else document.getElementById('ifCCC').style.visibility = 'hidden'; } $(document).ready(()=>{ let template = ` <div class='item1'><input type="text" name="items1[]" placeholder="" class="form-control" id="tel1"/> <button class="remove btn btn-light">x</button></div>`; $("#add1").on("click", ()=>{ $("#items1").append(template); }) $("body").on("click", ".remove", (e)=>{ $(e.target).parent("div").remove(); }) let template2 = ` <div class='item2'><input type="text" name="items2[]" placeholder="" class="form-control" id="tel2"/> <button class="remove2 btn btn-light">x</button></div>`; $("#add2").on("click", ()=>{ $("#items2").append(template2); }) $("body").on("click", ".remove2", (e)=>{ $(e.target).parent("div").remove(); }) let template3 = ` <div class='item3'><input type="text" name="items3[]" placeholder="" class="form-control" id="tel3"/> <button class="remove3 btn btn-light">x</button></div>`; $("#add3").on("click", ()=>{ $("#items3").append(template3); }) $("body").on("click", ".remove3", (e)=>{ $(e.target).parent("div").remove(); }) });
Related:
See More
Free Template
Fresh Bootstrap Table
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76