Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Form dynamic bootstrap
Hallo semuanya,
saya sedang belajar membuat form input dengan menggunakan bootstrap. Form sudah berhasil di buat. tinggal fungsi dinamik nya dengan menggunakan jquery. Jadi idenya adalah kita bisa menambah form input dengan jumlah tertentu (dalam hal ini saya mau coba bikin kasus cuma bisa nambah 5 input saja).
Ini kode html nya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Contact Form">
<meta name="author" content="Handy Rusydi">
<title>Contact Fom</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/navbar-fixed-top.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.form-group {
margin-bottom: 8px;
}
</style>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Contact Form</a>
</div>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<p>You can request your repeat medication online or by posting or dropping in your repeat medication card.</p>
<p>Our staff are not permitted to accept verbal request for medication at any time. This policy is in place to:</br>
1. Ensure maximum patient safety</br>
2. Ensure that patients are aware of the medications they are requesting</br>
3. Reduce the risk of prescribing of incoreect or unnecessary medications</br>
4. Ensure accurate records of patient medication requests are retained</br>
5. Minimise human error</br>
</p>
<p>We aim to have all prescription requests within 3 working days. Please do not attend practice to collect your prescription before this.</p>
<p>
<p>To request your prescription please complete this form:</p>
<h1 style="color:blue; margin-bottom:20px">Repeat Prescription Request</h2>
<form role="form" id="feedbackForm" data-toggle="validator" data-disable="false">
<div class="row">
<div class="col-xs-9 col-sm-6 col-md-6">
<div class="form-group">
<label class="control-label" for="First Name">First Name(Required)</label></br>
<input type="text" class="form-control" placeholder="First Name" required="required" data-error="First Name is required.">
<div class="help-block with-errors"></div>
<label class="control-label" for="Date of Birth">Date of Birth (Required)</label></br>
<input type="date" class="form-control" placeholder="Date of Birth" required="required" data-error="Date of Birth is required.">
<div class="help-block with-errors"></div>
<label class="control-label" for="E-mail">E-mail (Required)</label></br>
<input type="email" class="form-control" placeholder="E-mail" required="required" data-error="E-mail is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-xs-9 col-sm-6 col-md-6">
<div class="form-group">
<label class="control-label" for="surname">Surname (Required)</label></br>
<input type="text" class="form-control" placeholder="Surname" required="required" data-error="Surname is required.">
<div class="help-block with-errors"></div>
<label class="control-label" for="Phone Number">Phone Number (Required)</label></br>
<input type="tel" class="form-control" placeholder="Phone Number" required="required" data-error="Phone Number is required.">
<div class="help-block with-errors"></div>
<label class="control-label" for="GMS No">GMS No</label></br>
<input type="text" class="form-control" placeholder="GMS No">
</div>
</div>
</div>
<h2 style="color:blue; margin-top:20px">Repeat Item Request</h2>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="form-group">
<label class="control-label" for="Item Name">Item Name (Required)</label></br>
<input type="text" class="form-control" placeholder="Item 1 Name" required="required" data-error="Item Name is required.">
<div class="help-block with-errors"></div>
<label class="control-label" for="Item Name">Item Name</label></br>
<input type="text" class="form-control" placeholder="Item 2 Name">
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="form-group">
<label class="control-label" for="Dose">Dose (Required)</label></br>
<input type="text" class="form-control" placeholder="Dose" required="required" data-error="Dose is required.">
<div class="help-block with-errors"></div>
<label class="control-label" for="Dose">Dose</label></br>
<input type="text" class="form-control" placeholder="Dose">
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="form-group">
<label class="control-label" for="Quantity">Quantity (Required)</label></br>
<input type="text" class="form-control" placeholder="Quantitiy" required="required" data-error="Quantity is required.">
<div class="help-block with-errors"></div>
<label class="control-label" for="Quantity">Quantity</label></br>
<input type="text" class="form-control" placeholder="Quantity">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4" id="medicine">
<div class="form-group" id="item">
<label class="control-label" for="Item Name">Item Name</label></br>
<input type="text" class="form-control" placeholder="Item Name">
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4" id="medicine">
<div class="form-group" id="item">
<label class="control-label" for="Dose">Dose</label></br>
<input type="text" class="form-control" placeholder="Dose">
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4" id="medicine">
<div class="form-group" id="item">
<label class="control-label" for="Quantity">Quantity</label></br>
<input type="text" class="form-control" placeholder="Quantity">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">
<button id="add" type="button" class="btn btn-primary">Add Another Item</button>
<button id="remove" type="button" class="btn btn-danger">Remove Item</button>
</div>
</div></br>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="g-recaptcha" data-sitekey="6LfKURIUAAAAAO50vlwWZkyK_G2ywqE52NU7YO0S"></div>
</div>
</div></br>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
</form>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script src="js/validator.js"></script>
<script src="js/button.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</body>
</html>
dan ini kode javascriptnya
$(function(){
$("#remove").click(function(){
$("#item").remove();
});
});
$(function(){
$("#add").click(function(){
$("#item").clone().appendTo("#medicine");
});
});
ketika menambahkan item yang bisa di tambahkan cuma satu kolom saja. Bagaimana caranya ya agar bisa tiga kolom bisa di masukkan secara berbarengan?
bingung karena di kode bootstrap ada class, apa bisa di pakai dua class? sepertinya kalau pake id cuma bisa di pake satu. trims
0
1 Jawaban:
Jawaban Terpilih
berhasil. ternyata bungkus id nya di atas.
http://galerigis.tech/contact-form/
captcha error karena site key dan site secret dari google.
ini kode lengkapnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Contact Form">
<meta name="author" content="Handy Rusydi">
<title>Contact Fom</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/navbar-fixed-top.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.form-group {
margin-bottom: 8px;
}
</style>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Contact Form</a>
</div>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<p>You can request your repeat medication online or by posting or dropping in your repeat medication card.</p>
<p>Our staff are not permitted to accept verbal request for medication at any time. This policy is in place to:</br>
1. Ensure maximum patient safety</br>
2. Ensure that patients are aware of the medications they are requesting</br>
3. Reduce the risk of prescribing of incoreect or unnecessary medications</br>
4. Ensure accurate records of patient medication requests are retained</br>
5. Minimise human error</br>
</p>
<p>We aim to have all prescription requests within 3 working days. Please do not attend practice to collect your prescription before this.</p>
<p>
<p>To request your prescription please complete this form:</p>
<h1 style="color:blue; margin-bottom:20px">Repeat Prescription Request</h2>
<form role="form" id="feedbackForm" data-toggle="validator" data-disable="false">
<div class="row">
<div class="col-xs-9 col-sm-6 col-md-6">
<div class="form-group">
<label class="control-label" for="First Name">First Name(Required)</label></br>
<input type="text" class="form-control" placeholder="First Name" required="required" data-error="First Name is required.">
<div class="help-block with-errors"></div>
<label class="control-label" for="Date of Birth">Date of Birth (Required)</label></br>
<input type="date" class="form-control" placeholder="Date of Birth" required="required" data-error="Date of Birth is required.">
<div class="help-block with-errors"></div>
<label class="control-label" for="E-mail">E-mail (Required)</label></br>
<input type="email" class="form-control" placeholder="E-mail" required="required" data-error="E-mail is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-xs-9 col-sm-6 col-md-6">
<div class="form-group">
<label class="control-label" for="surname">Surname (Required)</label></br>
<input type="text" class="form-control" placeholder="Surname" required="required" data-error="Surname is required.">
<div class="help-block with-errors"></div>
<label class="control-label" for="Phone Number">Phone Number (Required)</label></br>
<input type="tel" class="form-control" placeholder="Phone Number" required="required" data-error="Phone Number is required.">
<div class="help-block with-errors"></div>
<label class="control-label" for="GMS No">GMS No</label></br>
<input type="text" class="form-control" placeholder="GMS No">
</div>
</div>
</div>
<h2 style="color:blue; margin-top:20px">Repeat Item Request</h2>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="form-group">
<label class="control-label" for="Item Name">Item Name (Required)</label></br>
<input type="text" class="form-control" placeholder="Item 1 Name" required="required" data-error="Item Name is required.">
<div class="help-block with-errors"></div>
<label class="control-label" for="Item Name">Item Name</label></br>
<input type="text" class="form-control" placeholder="Item 2 Name">
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="form-group">
<label class="control-label" for="Dose">Dose (Required)</label></br>
<input type="text" class="form-control" placeholder="Dose" required="required" data-error="Dose is required.">
<div class="help-block with-errors"></div>
<label class="control-label" for="Dose">Dose</label></br>
<input type="text" class="form-control" placeholder="Dose">
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="form-group">
<label class="control-label" for="Quantity">Quantity (Required)</label></br>
<input type="text" class="form-control" placeholder="Quantitiy" required="required" data-error="Quantity is required.">
<div class="help-block with-errors"></div>
<label class="control-label" for="Quantity">Quantity</label></br>
<input type="text" class="form-control" placeholder="Quantity">
</div>
</div>
</div>
<div class="row">
<div id="medicine">
<div id="item">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="form-group">
<label class="control-label" for="Item Name">Item Name</label></br>
<input type="text" class="form-control" placeholder="Item Name">
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="form-group">
<label class="control-label" for="Dose">Dose</label></br>
<input type="text" class="form-control" placeholder="Dose">
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="form-group">
<label class="control-label" for="Quantity">Quantity</label></br>
<input type="text" class="form-control" placeholder="Quantity">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">
<button id="add" type="button" class="btn btn-primary">Add Another Item</button>
<button id="remove" type="button" class="btn btn-danger">Remove Item</button>
</div>
</div></br>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="g-recaptcha" data-sitekey="6LfKURIUAAAAAO50vlwWZkyK_G2ywqE52NU7YO0S"></div>
</div>
</div></br>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
</form>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script src="js/validator.js"></script>
<script src="js/button.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</body>
</html>
0