I have designed a contact form, I tried to make it responsive but I am stuck. I have tried with css but it's still not responsive. Even panel panel-heading also looks awkward in my responsive mode. I tried to put a toggle on navbar to make it collapse but it's not working. I have imported external bootstrap.min.css and bootstrap.min.js in my code. please help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet" ">
<!-- Favicon -->
<link rel="shortcut icon " href="img/favicon.ico ">
<style>
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 400;
face: Calibri;
}
.panel-footer {
padding: 20px 20px;
margin-bottom: 10px;
background-color: #fff;
border-top: 0px solid #ddd;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 80px !important;
}
.close {
float: right;
font-size: 31px;
margin-left: 22px;
color: black;
}
button.close {
padding: 1;
padding-top: 1px;
padding-right: 5px;
font-weight: 700px
background-color: black;
}
.underline {
text-decoration: underline;
}
.form-control{
border-color: blue;
}
.panel-default {
border-color: black;
}
}
</style>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js "></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container ">
<a href="# " class="navbar-brand ">
<img src="logo1.jpg " height="48 " width="202 " class="pull-left "></a>
<center> <p class="navbar-text "> Ticker </p></center>
<p class="navbar-text pull-left "> <a href=" " ></a></p>
<p class="navbar-text pull-right ">Logout</p>
</div>
</div>
<br/><br/><br/><br/><br />
<div class="container ">
<div class="row ">
<div class="col-sm-12 col-md-6 ">
<h4 id="main " style='color: #4CAEE3';>HT /Create </h4><br />
</div>
</div>
<br />
<form class="form-horizontal " id="myform ">
<h4 ><center><font style="color: #0000ff;font-weight: 700; face: Calibri; ">New </font></center></h4>
<form class="form-horizontal ">
<div class="panel panel-default ">
<button type="button " class="close " data-dismiss="modal ">
<font color="black "> <a href="hrtoolkit.html ">
<span class="underline " id="u ">×</span></a></font> </button>
<div class="form-body ">
<br />
<div class="row ">
<div class="col-md-12 ">
<div class="col-md-4 ">
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "> ID<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="emp " required placeholder="if " oninvalid="this.setCustomValidity( 'ID Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">First Name<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="fname " required placeholder="First Name " oninvalid="this.setCustomValidity( 'First Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Gender<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<select class="form-control " required placeholder="Gender " oninvalid="this.setCustomValidity( 'Gender Required') " oninput="this.setCustomValidity( '') " />
<option hidden value=" ">Gender</option>
<option value="male ">Male</option>
<option value="female ">Female</option>
<option value="other ">Other</option>
</select>
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOJ<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="doj " required placeholder="DOJ " required oninvalid="this.setCustomValidity( 'DOJ Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="font-weight: 700; ">eMail</span><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="email " class="form-control " id="eMail " pattern="^[\w.+\-]+#infinitumglobal\.com$ " required placeholder="eMail " oninvalid="this.setCustomValidity(
'Email ID Required format example#infinitumglobal.com') "
oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Middle Name</label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="mname " placeholder="Middle Name ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOB<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="dob " required placeholder="DOB " oninvalid="this.setCustomValidity( 'DOB Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="desg " required placeholder="Designation " oninvalid="this.setCustomValidity( 'Designation Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Last Name<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="lname " required placeholder="Last Name " oninvalid="this.setCustomValidity( 'Last Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="panel-footer text-right ">
<button type="submit " id="btnSave " class="btn btn-default pull-right " style="background-color: #90EE90; ">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</body>
</html>
you have to add the script that I added
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Take a look here:https://www.w3schools.com/bootstrap/default.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet" ">
<!-- Favicon -->
<link rel="shortcut icon " href="img/favicon.ico ">
<style>
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 400;
face: Calibri;
}
.panel-footer {
padding: 20px 20px;
margin-bottom: 10px;
background-color: #fff;
border-top: 0px solid #ddd;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 80px !important;
}
.close {
float: right;
font-size: 31px;
margin-left: 22px;
color: black;
}
button.close {
padding: 1;
padding-top: 1px;
padding-right: 5px;
font-weight: 700px
background-color: black;
}
.underline {
text-decoration: underline;
}
.form-control{
border-color: blue;
}
.panel-default {
border-color: black;
}
}
</style>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js "></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container ">
<a href="# " class="navbar-brand ">
<img src="logo1.jpg " height="48 " width="202 " class="pull-left "></a>
<center> <p class="navbar-text "> Ticker </p></center>
<p class="navbar-text pull-left "> <a href=" " ></a></p>
<p class="navbar-text pull-right ">Logout</p>
</div>
</div>
<br/><br/><br/><br/><br />
<div class="container ">
<div class="row ">
<div class="col-sm-12 col-md-6 ">
<h4 id="main " style='color: #4CAEE3';>HT /Create </h4><br />
</div>
</div>
<br />
<form class="form-horizontal " id="myform ">
<h4 ><center><font style="color: #0000ff;font-weight: 700; face: Calibri; ">New </font></center></h4>
<form class="form-horizontal ">
<div class="panel panel-default ">
<button type="button " class="close " data-dismiss="modal ">
<font color="black "> <a href="hrtoolkit.html ">
<span class="underline " id="u ">×</span></a></font> </button>
<div class="form-body ">
<br />
<div class="row ">
<div class="col-md-12 ">
<div class="col-md-4 ">
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "> ID<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="emp " required placeholder="if " oninvalid="this.setCustomValidity( 'ID Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">First Name<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="fname " required placeholder="First Name " oninvalid="this.setCustomValidity( 'First Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Gender<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<select class="form-control " required placeholder="Gender " oninvalid="this.setCustomValidity( 'Gender Required') " oninput="this.setCustomValidity( '') " />
<option hidden value=" ">Gender</option>
<option value="male ">Male</option>
<option value="female ">Female</option>
<option value="other ">Other</option>
</select>
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOJ<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="doj " required placeholder="DOJ " required oninvalid="this.setCustomValidity( 'DOJ Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="font-weight: 700; ">eMail</span><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="email " class="form-control " id="eMail " pattern="^[\w.+\-]+#infinitumglobal\.com$ " required placeholder="eMail " oninvalid="this.setCustomValidity(
'Email ID Required format example#infinitumglobal.com') "
oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Middle Name</label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="mname " placeholder="Middle Name ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOB<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="dob " required placeholder="DOB " oninvalid="this.setCustomValidity( 'DOB Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="desg " required placeholder="Designation " oninvalid="this.setCustomValidity( 'Designation Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Last Name<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="lname " required placeholder="Last Name " oninvalid="this.setCustomValidity( 'Last Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="panel-footer text-right ">
<button type="submit " id="btnSave " class="btn btn-default pull-right " style="background-color: #90EE90; ">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</body>
</html>
This should do it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet" ">
<!-- Favicon -->
<link rel="shortcut icon " href="img/favicon.ico ">
<style>
.form-group{
padding: 15px;
}
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 400;
face: Calibri;
}
.panel-footer {
padding: 20px 20px;
margin-bottom: 10px;
background-color: #fff;
border-top: 0px solid #ddd;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 80px !important;
}
.close {
float: right;
font-size: 31px;
margin-left: 22px;
color: black;
}
button.close {
padding: 1;
padding-top: 1px;
padding-right: 5px;
font-weight: 700px
background-color: black;
}
.underline {
text-decoration: underline;
}
.form-control{
border-color: blue;
}
.panel-default {
border-color: black;
}
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a href="#" class="navbar-brand ">
<img src="https://www.icon.com.mt/wp-content/themes/icon/img/logo.svg" height="30" width="202" class="pull-left "></a>
<center> <p class="navbar-text pull-right"> Ticker </p></center>
<p class="navbar-text pull-right"> <a href="" >Banner</a></p>
<p class="navbar-text pull-right">Logout</p>
</div>
</div>
<br/><br/><br/><br/><br />
<div class="container ">
<div class="row ">
<div class="col-sm-12 col-md-6 ">
<h4 id="main " style='color: #4CAEE3';>HT /Create </h4><br />
</div>
</div>
<br />
<form class="form-horizontal " id="myform ">
<h4 ><center><font style="color: #0000ff;font-weight: 700; face: Calibri; ">New </font></center></h4>
<form class="form-horizontal ">
<div class="panel panel-default ">
<button type="button " class="close " data-dismiss="modal ">
<font color="black "> <a href="hrtoolkit.html ">
<span class="underline " id="u ">×</span></a></font> </button>
<div class="form-body ">
<br />
<div class="row ">
<div class="col-md-12 ">
<div class="col-md-4 ">
<div class="row ">
<div class="form-group">
<label class="control-label col-md-4 "> ID<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="emp " required placeholder="if " oninvalid="this.setCustomValidity( 'ID Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">First Name<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="fname " required placeholder="First Name " oninvalid="this.setCustomValidity( 'First Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Gender<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<select class="form-control " required placeholder="Gender " oninvalid="this.setCustomValidity( 'Gender Required') " oninput="this.setCustomValidity( '') " />
<option hidden value=" ">Gender</option>
<option value="male ">Male</option>
<option value="female ">Female</option>
<option value="other ">Other</option>
</select>
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOJ<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="doj " required placeholder="DOJ " required oninvalid="this.setCustomValidity( 'DOJ Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="font-weight: 700; ">eMail</span><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="email " class="form-control " id="eMail " pattern="^[\w.+\-]+#infinitumglobal\.com$ " required placeholder="eMail " oninvalid="this.setCustomValidity(
'Email ID Required format example#infinitumglobal.com') "
oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Middle Name</label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="mname " placeholder="Middle Name ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOB<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="dob " required placeholder="DOB " oninvalid="this.setCustomValidity( 'DOB Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="desg " required placeholder="Designation " oninvalid="this.setCustomValidity( 'Designation Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Last Name<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="lname " required placeholder="Last Name " oninvalid="this.setCustomValidity( 'Last Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="panel-footer text-right ">
<button type="submit " id="btnSave " class="btn btn-lg pull-right " style="background-color: #90EE90; ">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet" ">
<!-- Favicon -->
<link rel="shortcut icon " href="img/favicon.ico ">
<style>
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 400;
face: Calibri;
}
.panel-footer {
padding: 20px 20px;
margin-bottom: 10px;
background-color: #fff;
border-top: 0px solid #ddd;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 80px !important;
}
.close {
float: right;
font-size: 31px;
margin-left: 22px;
color: black;
}
button.close {
padding: 1;
padding-top: 1px;
padding-right: 5px;
font-weight: 700px
background-color: black;
}
.underline {
text-decoration: underline;
}
.form-control{
border-color: blue;
}
.panel-default {
border-color: black;
}
}
</style>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js "></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container ">
<a href="# " class="navbar-brand ">
<img src="logo1.jpg " height="48 " width="202 " class="pull-left "></a>
<center> <p class="navbar-text "> Ticker </p></center>
<p class="navbar-text pull-left "> <a href=" " ></a></p>
<p class="navbar-text pull-right ">Logout</p>
</div>
</div>
<br/><br/><br/><br/><br />
<div class="container ">
<div class="row ">
<div class="col-sm-12 col-md-6 ">
<h4 id="main " style='color: #4CAEE3';>HT /Create </h4><br />
</div>
</div>
<br />
<form class="form-horizontal " id="myform ">
<h4 ><center><font style="color: #0000ff;font-weight: 700; face: Calibri; ">New </font></center></h4>
<form class="form-horizontal ">
<div class="panel panel-default ">
<button type="button " class="close " data-dismiss="modal ">
<font color="black "> <a href="hrtoolkit.html ">
<span class="underline " id="u ">×</span></a></font> </button>
<div class="form-body ">
<br />
<div class="row ">
<div class="col-md-12 ">
<div class="col-md-4 ">
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "> ID<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="emp " required placeholder="if " oninvalid="this.setCustomValidity( 'ID Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">First Name<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="fname " required placeholder="First Name " oninvalid="this.setCustomValidity( 'First Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Gender<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<select class="form-control " required placeholder="Gender " oninvalid="this.setCustomValidity( 'Gender Required') " oninput="this.setCustomValidity( '') " />
<option hidden value=" ">Gender</option>
<option value="male ">Male</option>
<option value="female ">Female</option>
<option value="other ">Other</option>
</select>
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOJ<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="doj " required placeholder="DOJ " required oninvalid="this.setCustomValidity( 'DOJ Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="font-weight: 700; ">eMail</span><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="email " class="form-control " id="eMail " pattern="^[\w.+\-]+#infinitumglobal\.com$ " required placeholder="eMail " oninvalid="this.setCustomValidity(
'Email ID Required format example#infinitumglobal.com') "
oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<!--<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>-->
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Middle Name</label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="mname " placeholder="Middle Name ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOB<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="dob " required placeholder="DOB " oninvalid="this.setCustomValidity( 'DOB Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="desg " required placeholder="Designation " oninvalid="this.setCustomValidity( 'Designation Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<!--<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>-->
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Last Name<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="lname " required placeholder="Last Name " oninvalid="this.setCustomValidity( 'Last Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<!--<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>-->
<div class="panel-footer text-right ">
<button type="submit " id="btnSave " class="btn btn-default pull-right " style="background-color: #90EE90; ">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</body>
</html>
The issue was with "row" which you have added with style= "visibility: hidden". Use "display" property of CSS to show/hide any component in HTML. Visibility CSS property hides the visibility of HTML tag but the area covered by component still remains as it is.
I have added all such "row" in comments and the issue was resolved. Hope this helps you.
Related
I'm trying to make a rating system, ten images of numbers, (1, 2, 3... and so on), and I'd like to know how could I put to those images a value, (1, 2, 3... respectively), inside of a form, so when user click on submit, I can get in PHP the value from the pic selected.
Basically I don't know how to make it know which image is being selected in.
<div class="col-md-6 col-sm-4 col-md-3 order-md-1 offset-md-3">
<h4 class="mb-3">Rate system</h4>
<form class="needs-validation" method="POST" action="test.php">
<div class="row">
<div class="col-md-12 mb-3">
<label for="firstName">Name</label>
<input type="text" class="form-control" placeholder="Gustavo" name="name" required>
<div class="invalid-feedback">
Is a name is necessary.
</div>
</div>
<div class="col-md-12 mb-3">
<img class="d-block mx-auto mb-1" src="1.png">
<img class="d-block mx-auto mb-1" src="2.png">
<img class="d-block mx-auto mb-1" src="3.png">
<img class="d-block mx-auto mb-1" src="4.png">
<img class="d-block mx-auto mb-1" src="5.png">
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">¡Go!</button>
</form>
</div>
</div>
You need to set value for star after clicking on star symbol & change as well as data-star attribute value for selected stars. After selected stars will highlighted as play with some CSS code with help of :nth-child(number) function.
$(document).on('click', '.list-star li', function(){
$(this).parent().attr('data-star', Number($(this).index())+1);
$('#setRating').val(Number($(this).index())+1);
});
.list-star li{
color: #999;
margin-right: 0px!important;
cursor: pointer;
padding: 0px 3px;
font-size: 20px;
line-height: 1.1;
}
[data-star="1"] li:nth-child(1),
[data-star="2"] li:nth-child(1), [data-star="2"] li:nth-child(2),
[data-star="3"] li:nth-child(1), [data-star="3"] li:nth-child(2), [data-star="3"] li:nth-child(3),
[data-star="4"] li:nth-child(1), [data-star="4"] li:nth-child(2), [data-star="4"] li:nth-child(3), [data-star="4"] li:nth-child(4),
[data-star="5"] li {
color: tomato;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container py-3">
<div class="row justify-content-center">
<div class="col-md-5 col-sm-10">
<h4 class="mb-3">Rate system</h4>
<form class="needs-validation" method="POST" action="test.php">
<div class="row">
<div class="col-md-12 mb-3">
<label for="firstName">Name</label>
<input type="text" class="form-control" placeholder="Gustavo" name="name" required>
<div class="invalid-feedback">Is a name is necessary.</div>
</div>
<div class="col-md-12 mb-3">
<ul class="list-inline list-star" data-star="0">
<li class="list-inline-item">★</li>
<li class="list-inline-item">★</li>
<li class="list-inline-item">★</li>
<li class="list-inline-item">★</li>
<li class="list-inline-item">★</li>
</ul>
<input type="number" name="rating" placeholder="Rating Value" id="setRating" readonly>
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Go!</button>
</form>
</div>
</div>
</div>
Use <input> tag and set its value either by js or php. Give each img an id and add onclick listener that changes the input value, which will collect the form at the end ;)
trying to call a javascript function from a PHP web request ( if statement )but it fails tried to check if another script will run and when a test echo'<sciprt>alert('Called Succeed')</script>'; it worked and I thought if I write the whole function in the web request code block well solve the problem but it didn't, so what I'm missing here? where is the bug?
Snippet:-
<?
include("..\include\basket-module.php");
// notifications //
include("..\\include\\notif-module.php");
// module //
include("..\\include\\Insert-module.php");
$count = $_POST['productscount']
?>
<html>
<head>
<title>Project - new Draft</title>
<meta charset="utf-8">
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap4 Library and Font-awesome with Custom CSS -->
<link rel="stylesheet" type="text/css" href="..\Styles\profile.css">
<link rel="stylesheet" type="text/css" href="..\Styles\newdraft.css">
<link rel="stylesheet" type="text/css" href="..\Styles\newproduct.css">
<link rel="stylesheet" type="text/css" href="..\Styles\navegationbar.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap4 Library and Font-awesome with Custom CSS End-->
<!-- including custom javascript -->
<script src="..\js\functions\js.js"></script>
<script>
function myFunction(){
var formscount = <?php echo(json_encode($productscount)); ?>;
if (formscount > 0) {
active="";
for (i=0; i < formscount; i++) {
var str='active'
if (i > 0){
str = ''
}
$('#demo').append($('<div class="carousel-item '+str+'"> <div class="card product-form" style="border: solid 1px #86377b !important;"><div class="card-body"> <img src="..\\upload\\panadol.png" style="width:205px; height:205px;"> <div class="row justify-content-center"> <a name="img-upload-btn" id="img-btn" class="btn btn-primary btn-block" style="height:35px; background-color:#86377b !important;" href="#" role="button">إضافة صورة</a> </div> <hr /> <div class="card-text" style="font-family: hana; font-size:23px; color:black;"> <div class="row" style=" flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group product-name-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px; ">إسم المنتج</div> <input type="text" class="form-control product-name-input" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;" autocomplete="off" placeholder="إسم المنتج"> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group dosage-form-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">نوع العبوة</div> <select class="custom-select" onchange="yesnoCheck(this);" id="medictype" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;"> <option selected>نوع الدواء</option> <option value="1">أدوية</option><i class="fas fa-capsules"></i> <option value="2">مستلزمات الام والطفل</option> <option value="4">معدات طبية</option> <option value="4">بروتينات ومكملات غذائية</option> </select> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group productqty-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">الكمية</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="الكمية"></input> </div> </div> </div> <hr /> <div class="row" style="flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group stock-code-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">كود المنتج</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="الكود"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group chemicalcom-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">التركيبة الكيميائية</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="التركيبة الكيميائية"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group concentration-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">التركيز</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="تركيز الدواء"></input> </div> </div> </div> <hr /> <div class="row" style="flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group packsize-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">حجم العلبة</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="حجم العلبة"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group mandate-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">تاريخ الإنتاج</div> <input type="date" id="mandate_#" name="mandate1" class="mandate-input" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group expdate-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">تاريخ الإنتهاء</div> <input type="date" id="expdate_#" name="expdate1" class="expdate-input" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;"></input> </div> </div> </div> <div class="row" style="flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group sale-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">الخصم</div> <select class="custom-select" onchange="yesnoCheck(this);" id="medictype" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;"> <option selected>الخصم على المنتج</option> <option value="1">نعم</option><i class="fas fa-capsules"></i> <option value="2">لا</option> </select> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group discou-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">قيمة الخصم</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="قيمة مئوية"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group bounsfor-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">القطع المخصومة</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="على كل (10) قطع"></input> </div> </div> </div> <hr /> <center> <nav class="navbar counter justify-content-center" style="width:70vh; background-color:#86377b;"> <a class="navbar-brand" style="font-family:tahoma; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">'+i+' / '+formscount+'</a> </nav> </center> </div></div></div></div>')); event.preventDefault()
}
}
}
</script>
<!-- Fontawseome Kit -->
<script src="https://kit.fontawesome.com/d75f59893e.js" crossorigin="anonymous"></script>
</head>
<body>
<?
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
echo '<script> myFunction(); </script>';
}
?>
<!-- Bootstrap Jquery JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Bootstrap Jquery JavaScripts -->
<!-- Bootstrap Jquery JavaScripts Ends -->
<!-- navegtion bar bootstrap 4 -->
<?php include("..\\home\\navbar.php"); ?>
<!-- basket sidebar -->
<?php include("..\\home\\basket.php"); ?>
<!-- Main Products Form -->
<center>
<div class="card justify-content-center cont">
<div class="card-body">
<div class="card-text">
<nav class="navbar header justify-content-center">
<a class="navbar-brand" style="font-family:hana; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">إدخال المنتجات</a>
</nav>
<hr />
<center>
<div id="demo" class="carousel slide" data-interval="false" style="height:50vh;">
<!-- The slideshow -->
<div class="carousel-inner canner">
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev d-none d-md-block" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon grow" style="filter:invert(100%); height:50vh; position:relative; left:-4vh;"></span>
</a>
<a class="carousel-control-next d-none d-md-block" href="#demo" data-slide="next">
<span class="carousel-control-next-icon grow" style="filter:invert(100%); height:50vh; position:relative; right:-4vh;"></span>
</a>
</div>
</center>
</div>
</div>
</div>
</center>
</body>
</html>
Here is my code:
$('#hitung').click(function() {
var count = $('.item').length;
var locality = 'id-ID';
var luas = $('.tinggi' + count).val() * $('#lebar' + count).val();
console.log(luas);
var dayasebar = luas / 12.5 * 2;
var hasil = dayasebar / 2.5;
var harga = Math.ceil(hasil) * 120000;
var title = $('#title-temp').text();
var color = document.querySelector('input[name="color"]:checked').value;
var color_title = document.querySelector('input[name="color"]:checked ~ label h4').innerHTML;
$('#luas').html('<p>Luas: ' + luas + ' meter ²</p>');
$('#hasil').html('<p>' + Math.ceil(hasil) + ' Kaleng ' + Math.ceil(hasil) * 5 + ' Kg | Rp ' + harga.toLocaleString(locality, {}) + '</p>');
$('#color').html('<div class="row"><div class="col-xs-6 col-md-4" style="height: 50px; float: left; background-color: ' + color + '; display: block;text-align: center;"></div><div class="col-xs-6 col-md-8"><h4 style="text-transform: capitalize; font-weight: bold; margin-top:0">' + title + '</h4><p>' + color_title + '</p></div></div>');
$('.panel-footer').css('display', 'block');
});
$('#tambah').click(function() {
var count = $('.item').length;
var id = 'Item[' + count + ']';
var item = $('.item:first').clone();
// item.find('input:first').attr('id', id);
item.find('.tinggi' + count + ':first').attr('id', 'tinggi' + count);
item.find('#title:first').attr('for', id)
.html('Dinding ' + (1 + count));
item.appendTo('#fieldset');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="fieldset">
<div class="panel panel-default item" style="background-color: #f2f2f2;border-radius: 0;border: 0;">
<div class="panel-body">
<h3 id="title" style="text-transform: uppercase; font-weight: bold; text-decoration: underline; margin-bottom: 25px" class="text-center">Dinding 1</h3>
<form>
<div class="row text-left">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Tinggi</label>
<input type="text" id="tinggi1" name="tinggi" class="form-control new-input tinggi">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Lebar</label>
<input type="text" id="lebar1" name="lebar" class="form-control new-input">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Pilih Warna</label>
<div class="row">
<div class="col-md-12">
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group1">
<input type="radio" name="color" id="color1" class="input-hidden" value="blue" data-name="Hello" style="visibility:hidden; display: none;" />
<label for="color1" style="display: block;">
<span style="width: 100%; background-color: blue; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 1</h4>
</span>
</label>
</div>
</div>
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group2">
<input type="radio" name="color" id="color2" class="input-hidden" value="lightblue" style="visibility:hidden; display: none;" />
<label for="color2" style="display: block;">
<span style="width: 100%; background-color: lightblue; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 2</h4>
</span>
</label>
</div>
</div>
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group3">
<input type="radio" name="color" id="color3" class="input-hidden" value="brown" style="visibility:hidden; display: none;" />
<label for="color3" style="display: block;">
<span style="width: 100%; background-color: brown; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 3</h4>
</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="panel-footer quite-white-tip bg-pink text-white" style="display: none">
<h3 style="text-transform: uppercase; text-decoration: underline; font-weight: 600">Kebutuhan Cat Anda</h3><br>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="media">
<div class="row">
<div class="col-md-5">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-responsive" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt="...">
</a>
</div>
</div>
<div class="col-md-7">
<div class="media-body text-left">
<div id="color" style="display: block; clear: both; width: 100%;"></div><br>
<div id="luas"></div>
<div id="hasil"></div>
<div id="title-temp" style="display: none;">Warna</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" id="tambah" class="btn btn-sm btn-link">Add</button><br>
<button type="button" id="hitung" class="btn btn-lg btn-success">COUNT</button>
<br><br>
When I press COUNT button, the code working fine, all the result placed well on where I want it to be shown. But I still missing one feature, append the item class. When I append or add or clone item class, the calculation is not working due to the id or name of each input are same. I tried using [] for the input but still don't know how to count it and place all the result each just like the original element.
$('#hitung').click(function() {
var count = $('.item').length;
var locality = 'id-ID';
var luas = $('#tinggi' + count).val() * $('#lebar' + count).val();
var dayasebar = luas / 12.5 * 2;
var hasil = dayasebar / 2.5;
var harga = Math.ceil(hasil) * 120000;
var title = $('#title-temp').text();
var color = $('input[name=color]').css('backgroundColor');
var color_title =$('input[name=color] ~ label h4').text();
$('#luas').html('<p>Luas: ' + luas + ' meter ²</p>');
$('#hasil').html('<p>' + Math.ceil(hasil) + ' Kaleng ' + Math.ceil(hasil) * 5 + ' Kg | Rp ' + harga.toLocaleString(locality, {}) + '</p>');
$('#color').html('<div class="row"><div class="col-xs-6 col-md-4" style="height: 50px; float: left; background-color: ' + color + '; display: block;text-align: center;"></div><div class="col-xs-6 col-md-8"><h4 style="text-transform: capitalize; font-weight: bold; margin-top:0">' + title + '</h4><p>' + color_title + '</p></div></div>');
$('.panel-footer').css('display', 'block');
});
$('#tambah').click(function() {
var count = $('.item').length;
var id = 'Item[' + count + ']';
var item = $('.item:first').clone();
// item.find('input:first').attr('id', id);
item.find('.tinggi' + count + ':first').attr('id', 'tinggi' + count);
item.find('#title:first').attr('for', id)
.html('Dinding ' + (1 + count));
item.appendTo('#fieldset');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="fieldset">
<div class="panel panel-default item" style="background-color: #f2f2f2;border-radius: 0;border: 0;">
<div class="panel-body">
<h3 id="title" style="text-transform: uppercase; font-weight: bold; text-decoration: underline; margin-bottom: 25px" class="text-center">Dinding 1</h3>
<form>
<div class="row text-left">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Tinggi</label>
<input type="text" id="tinggi1" name="tinggi" class="form-control new-input tinggi">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Lebar</label>
<input type="text" id="lebar1" name="lebar" class="form-control new-input">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Pilih Warna</label>
<div class="row">
<div class="col-md-12">
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group1">
<input type="radio" name="color" id="color1" class="input-hidden" value="blue" data-name="Hello" style="visibility:hidden; display: none;" />
<label for="color1" style="display: block;">
<span style="width: 100%; background-color: blue; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 1</h4>
</span>
</label>
</div>
</div>
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group2">
<input type="radio" name="color" id="color2" class="input-hidden" value="lightblue" style="visibility:hidden; display: none;" />
<label for="color2" style="display: block;">
<span style="width: 100%; background-color: lightblue; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 2</h4>
</span>
</label>
</div>
</div>
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group3">
<input type="radio" name="color" id="color3" class="input-hidden" value="brown" style="visibility:hidden; display: none;" />
<label for="color3" style="display: block;">
<span style="width: 100%; background-color: brown; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 3</h4>
</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="panel-footer quite-white-tip bg-pink text-white" style="display: none">
<h3 style="text-transform: uppercase; text-decoration: underline; font-weight: 600">Kebutuhan Cat Anda</h3><br>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="media">
<div class="row">
<div class="col-md-5">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-responsive" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt="...">
</a>
</div>
</div>
<div class="col-md-7">
<div class="media-body text-left">
<div id="color" style="display: block; clear: both; width: 100%;"></div><br>
<div id="luas"></div>
<div id="hasil"></div>
<div id="title-temp" style="display: none;">Warna</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" id="tambah" class="btn btn-sm btn-link">Add</button><br>
<button type="button" id="hitung" class="btn btn-lg btn-success">COUNT</button>
<br><br>
I've got a little problem, I'm trying to have a simple image which you can click on and it will be checked or unchecked.
I found some bootstrap code online and tried it out on my project. Sadly, the code doesn't seem to work like it's suppose to on my localhost.
HTML:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
<h3>Bootstrap image checkbox(multiple)</h3>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
</div>
CSS:
.nopad {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
}
.image-checkbox input[type="checkbox"] {
display: none;
}
.image-checkbox-checked {
border-color: #4783B0;
}
.image-checkbox .fa {
position: absolute;
color: #4A79A3;
background-color: #fff;
padding: 10px;
top: 0;
right: 0;
}
.image-checkbox-checked .fa {
display: block !important;
}
JavaScript:
$(".image-checkbox").each(function () {
if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
$(this).addClass('image-checkbox-checked');
}
else {
$(this).removeClass('image-checkbox-checked');
}
});
// sync the state to the input
$(".image-checkbox").on("click", function (e) {
$(this).toggleClass('image-checkbox-checked');
var $checkbox = $(this).find('input[type="checkbox"]');
$checkbox.prop("checked",!$checkbox.prop("checked"))
e.preventDefault();
});
How it is suppose to look: codepen
My results: results
As you can see the checkbox isn't working and the positions are off.
I'm a beginner and I apologize for any confusion given.
Is there something that I'm doing wrong?
Please try this whole example, from your example it seems like that you haven't added some necessary css and jquery
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<style class="cp-pen-styles">.nopad {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
}
.image-checkbox input[type="checkbox"] {
display: none;
}
.image-checkbox-checked {
border-color: #4783B0;
}
.image-checkbox .fa {
position: absolute;
color: #4A79A3;
background-color: #fff;
padding: 10px;
top: 0;
right: 0;
}
.image-checkbox-checked .fa {
display: block !important;
}</style></head><body>
<!--
Image Checkbox Bootstrap template for multiple image selection
https://www.prepbootstrap.com/bootstrap-template/image-checkbox
-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
<h3>Bootstrap image checkbox(multiple)</h3>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
<input name="image[]" value="" type="checkbox">
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
<input name="image[]" value="" type="checkbox">
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
<input name="image[]" value="" type="checkbox">
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
<input name="image[]" value="" type="checkbox">
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
<input name="image[]" value="" type="checkbox">
<i class="fa fa-check hidden"></i>
</label>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>// image gallery
// init the state from the input
$(".image-checkbox").each(function () {
if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
$(this).addClass('image-checkbox-checked');
} else {
$(this).removeClass('image-checkbox-checked');
}
});
// sync the state to the input
$(".image-checkbox").on("click", function (e) {
$(this).toggleClass('image-checkbox-checked');
var $checkbox = $(this).find('input[type="checkbox"]');
$checkbox.prop("checked", !$checkbox.prop("checked"))
e.preventDefault();
});
//# sourceURL=pen.js
</script>
</body>
</html>
Code:
<div class="col-md-3">
<div class="custom-control custom-checkbox image-checkbox">
<input type="checkbox" class="custom-control-input" id="input1">
<label class="custom-control-label" for="input1">
<img src="https://dummyimage.com/600x400/f48024/000" alt="#" class="img-fluid">
<span >Custom Message</span>
</label>
</div>
</div>
<div class="col-md-3">
<div class="custom-control custom-checkbox image-checkbox">
<input type="checkbox" class="custom-control-input" id="input12">
<label class="custom-control-label" for="input12">
<img src="https://dummyimage.com/600x400/f48024/000" alt="#" class="img-fluid">
<span >Custom Message</span>
</label>
</div>
</div>
<div class="col-md-3">
<div class="custom-control custom-checkbox image-checkbox">
<input type="checkbox" class="custom-control-input" id="input13">
<label class="custom-control-label" for="ck1a">
<img src="https://dummyimage.com/600x400/f48024/000" alt="#" class="img-fluid">
<span >Custom Message</span>
</label>
</div>
</div>
<div class="col-md-3">
<div class="custom-control custom-checkbox image-checkbox">
<input type="checkbox" class="custom-control-input" id="input13">
<label class="custom-control-label" for="ck1a">
<img src="https://dummyimage.com/600x400/f48024/000" alt="#" class="img-fluid">
<span >Custom Message</span>
</label>
</div>
</div>
Result would be similar to this:
Original copied: https://iqbalfn.github.io/bootstrap-image-checkbox/
I have here a user profile. I have the html and css code perfect the way I want it.
But what I need now is to combine my html and css together. But I am not sure how to. Because without the css it changes the display of the user profile.
Could someone help me please?
$(function() {
$('#profile-image1').on('click', function() {
$('#profile-image-upload').click();
});
});
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px solid #03b1ce;
}
.tital {
font-size: 16px;
font-weight: 500;
}
.bot-border {
border-bottom: 1px #f8f8f8 solid;
margin: 5px 0 5px 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs
</h2>
<div class="col-md-7 ">
<div class="panel panel-default">
<div class="panel-heading">
<h4>User Profile</h4>
</div>
<div class="panel-body">
<div class="box box-info">
<div class="box-body">
<div class="col-sm-6">
<div align="center"> <img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
<input id="profile-image-upload" class="hidden" type="file">
<div style="color:#999;">click here to change profile image</div>
<!--Upload Image Js And Css-->
</div>
<br>
<!-- /input-group -->
</div>
<div class="col-sm-6">
<h4 style="color:#00b1b1;">Prasad Shankar Huddedar </h4>
</span>
<span><p>Aspirant</p></span>
</div>
<div class="clearfix"></div>
<hr style="margin:5px 0 5px 0;">
<div class="col-sm-5 col-xs-6 tital ">First Name:</div>
<div class="col-sm-7
col-xs-6 ">Prasad</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Middle Name:</div>
<div class="col-sm-
7"> Shankar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Last Name:</div>
<div class="col-sm-
7"> Huddedar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
<div class="col-sm-7">15 Jun 2016</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
<div class="col-
sm-7">11 Jun 1998</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
<div class="col-
sm-7">Shirdi</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
<div class="col-sm-
7">Indian</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Relition:</div>
<div class="col-sm-
7">Hindu</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
</div>
</div>
All You Need To Do Is Rap It In <style> ADD CODE HERE </style>
Just wrap the CSS in <style> tags.
Example
<style> /* Note the opening style tag */
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border:2px solid #03b1ce;
}
.tital {
font-size:16px;
font-weight:500;
}
.bot-border {
border-bottom:1px #f8f8f8 solid;
margin:5px 0 5px 0;
}
</style> /* When you're done with the CSS, close the style tag. */
You can keep it exactly where you already have it in your HTML. Here is the exact code you'd use:
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<div class="col-md-7 ">
<div class="panel panel-default">
<div class="panel-heading">
<h4>User Profile</h4>
</div>
<div class="panel-body">
<div class="box box-info">
<div class="box-body">
<div class="col-sm-6">
<div align="center">
<img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
<input id="profile-image-upload" class="hidden" type="file">
<div style="color:#999;">click here to change profile image</div>
<!--Upload Image Js And Css-->
</div>
<br>
<!-- /input-group -->
</div>
<div class="col-sm-6">
<h4 style="color:#00b1b1;">Prasad Shankar Huddedar</h4>
<span><p>Aspirant</p></span>
</div>
<div class="clearfix"></div>
<hr style="margin:5px 0 5px 0;">
<div class="col-sm-5 col-xs-6 tital">First Name:</div>
<div class="col-sm-7
col-xs-6 ">Prasad</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital">Middle Name:</div>
<div class="col-sm-
7"> Shankar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital">Last Name:</div>
<div class="col-sm-7"> Huddedar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
<div class="col-sm-7">15 Jun 2016</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
<div class="col-sm-7">11 Jun 1998</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
<div class="col-sm-7">Shirdi</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
<div class="col-sm-7">Indian</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Relition:</div>
<div class="col-sm-7">Hindu</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#profile-image1').on('click', function() {
$('#profile-image-upload').click();
});
});
</script>
</div>
<style>
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px solid #03b1ce;
}
.tital {
font-size: 16px;
font-weight: 500;
}
.bot-border {
border-bottom: 1px #f8f8f8 solid;
margin: 5px 0 5px 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px solid #03b1ce;
}
.tital {
font-size: 16px;
font-weight: 500;
}
.bot-border {
border-bottom: 1px #f8f8f8 solid;
margin: 5px 0 5px 0
}
</style>
<script>
$(function() {
$('#profile-image1').on('click', function() {
$('#profile-image-upload').click();
});
});
</script>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs
</h2>
<div class="col-md-7 ">
<div class="panel panel-default">
<div class="panel-heading">
<h4>User Profile</h4>
</div>
<div class="panel-body">
<div class="box box-info">
<div class="box-body">
<div class="col-sm-6">
<div align="center"> <img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
<input id="profile-image-upload" class="hidden" type="file">
<div style="color:#999;">click here to change profile image</div>
<!--Upload Image Js And Css-->
</div>
<br>
<!-- /input-group -->
</div>
<div class="col-sm-6">
<h4 style="color:#00b1b1;">Prasad Shankar Huddedar </h4>
</span>
<span><p>Aspirant</p></span>
</div>
<div class="clearfix"></div>
<hr style="margin:5px 0 5px 0;">
<div class="col-sm-5 col-xs-6 tital ">First Name:</div>
<div class="col-sm-7
col-xs-6 ">Prasad</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Middle Name:</div>
<div class="col-sm-
7"> Shankar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Last Name:</div>
<div class="col-sm-
7"> Huddedar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
<div class="col-sm-7">15 Jun 2016</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
<div class="col-
sm-7">11 Jun 1998</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
<div class="col-
sm-7">Shirdi</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
<div class="col-sm-
7">Indian</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Relition:</div>
<div class="col-sm-
7">Hindu</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
</div>
</div>
Put your css code in <style></style> tag and js in <script></script> tag. That's it