I have a jsp page created as follows:
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
<head>
<title>Register New Patient</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Reference Bootstrap files -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link type="text/css"
rel="stylesheet"
href="${pageContext.request.contextPath}/resources/css/background-color.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker").datepicker({dateFormat: 'dd/mm/yy'})
});
</script>
<style>
.error {color:red}
</style>
</head>
<body>
<h1>Registration</h1>
<hr>
<div>
<div id="registrationbox" style="margin-top: 50px;"
class="mainbox col-md-4 col-md-offset-4 col-sm-8 col-sm-offset-2">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">Register As Patient</div>
</div>
<div style="padding-top: 30px" class="panel-body">
<!-- Registration Form -->
<form:form action="${pageContext.request.contextPath}/register/processPatientRegistrationForm"
modelAttribute="mytonMedicalUser"
class="form-horizontal">
<!-- Place for messages: error, alert etc ... -->
<div class="form-group">
<div class="col-xs-15">
<div>
<!-- Check for registration error -->
<c:if test="${registrationError != null}">
<div class="alert alert-danger col-xs-offset-1 col-xs-10">
${registrationError}
</div>
</c:if>
</div>
</div>
</div>
<!-- User name -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<form:errors path="userName" cssClass="error" />
<form:input path="userName" placeholder="username (*)" class="form-control" />
</div>
<!-- Password -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<form:errors path="password" cssClass="error" />
<form:password path="password" placeholder="password (*)" class="form-control" />
</div>
<!-- Confirm Password -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<form:errors path="matchingPassword" cssClass="error" />
<form:password path="matchingPassword" placeholder="confirm password (*)" class="form-control" />
</div>
<!-- First name -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<form:errors path="firstName" cssClass="error" />
<form:input path="firstName" placeholder="first name (*)" class="form-control" />
</div>
<!-- Last name -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<form:errors path="lastName" cssClass="error" />
<form:input path="lastName" placeholder="last name (*)" class="form-control" />
</div>
<!-- Email -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<form:errors path="email" cssClass="error" />
<form:input path="email" placeholder="email (*)" class="form-control" />
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<form:errors path="gender" cssClass="error" />
<form:select path="gender" class="form-control">
<form:option value="male" label="Male" />
<form:option value="female" label="Female" />
</form:select>
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<form:errors path="dob" cssClass="error" />
<label for="datepicker">Enter Your Date of Birth (*):</label>
<input type="text" name="dob" id="datepicker">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<form:errors path="address" cssClass="error" />
<form:input path="address" placeholder="address (*)" class="form-control" />
</div>
<div style="margin-top: 10px" class="form-group">
<div class="col-sm-6 controls">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form:form>
</div>
</div>
</div>
</div>
</body>
</html>
How my datepicker is displayed
I know that it is something to do with the z-index of the datepicker... however I'm not sure how to change the z-index of the bootstrap datepicker within the tags, as editing the z-index is css related.
Is there a way I can do this within the tags or some other simple way so that it is shown in front of my text boxes?
Related
I am adding options dynamically in country select box.Options appears in select box and become selected on click but i want to get them in js as they are appended. If I console select box html in after they are appended. I only got option that is added in html not all other options that are append by js. I am not sure whats going wrong. Here is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
/>
<title>login</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css" />
<link rel="stylesheet" href="assets/css/style1.css" />
</head>
<body>
<div class="dashboard" style="text-align: center;">
<div class="wrapper">
<section id="nav-tabs">
<div class="container">
<div class="row justify-content-between">
<div class="col-8 p-0">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active p-11" id="nav-profil1-tab" data-toggle="tab" href="#nav-profil1" role="tab" aria-controls="nav-home" aria-selected="true"><span class="word-profile hide">Profile</span> 1</a>
</div>
</nav>
</div>
<div class="col-2 align-self-center">
<i class="fa fa-plus plus" aria-hidden="true"></i>
</div>
<div class="col-xs-2">
<i class="fa fa-cog text-white setting" aria-hidden="true"></i>
</div>
</div>
</div>
</section>
<section id="tabs">
<div class="container">
<div class="row" style="background-color: #013e77;">
<div class="col-xs-12 ">
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-profil1" role="tabpanel" aria-labelledby="nav-profil1-tab">
<form class="text-center profile" style="color: #757575;" action="#!">
<div class="form-row">
<div class="form-group col-12">
<select class="form-control prefer" id="exampleFormControlSelect1" name="preferred">
<option>Preferred Profile</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group col-6">
<input type="text" class="form-control fname" id="inputfname" placeholder="First Name" name="first_name" required>
<p class="fname-error text-danger hide"></p>
</div>
<div class="form-group col-6">
<input type="text" class="form-control lname" id="inputlname" placeholder="Last Name" name="last_name" required>
<p class="lname-error text-danger hide"></p>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control address" id="inputAddress" placeholder="Address" name="address" required>
<p class="address-error text-danger hide"></p>
</div>
<div class="form-group">
<input type="text" class="form-control apartment" id="inputAddress2" placeholder="Apartment, suite, etc. (optional)" name="apartment">
</div>
<div class="form-row">
<div class="form-group col-12">
<input type="text" class="form-control city" id="inputCity" placeholder="City" name="city" required>
<p class="city-error text-danger hide"></p>
</div>
<div class="form-group col-4">
<select id="inputCountry" class="form-control country" name="country">
<option>--Select Country--</option>
</select>
</div>
<div class="form-group col-4">
<select id="inputState" class="form-control states" name="state">
<option>--Select State --</option>
</select>
</div>
<div class="form-group col-4">
<input type="text" class="form-control zip" id="inputZip" placeholder="Zip code" name="zip" required>
<p class="zip-error text-danger hide"></p>
</div>
<div class="form-group col-12">
<input type="text" class="form-control phone" id="inputAddress" placeholder="Phone" name="phone" required>
<p class="phone-error text-danger hide"></p>
</div>
<div class="form-group col-12">
<input type="text" class="form-control card_num" id="inputAddress" placeholder="Card Number" name="card_num" required>
<p class="card_num-error text-danger hide"></p>
</div>
<div class="form-group col-12">
<input type="text" class="form-control card_name" id="inputAddress" placeholder="Name on Card" name="card_name" required>
<p class="card_name-error text-danger hide"></p>
</div>
<div class="form-group col-5">
<input type="date" class="form-control expiry" id="inputAddress" placeholder="Expiration Date" name="expiry" required>
<p class="expiry-error text-danger hide"></p>
</div>
<div class="form-group col-4">
<input type="text" class="form-control cvv" id="inputAddress" placeholder="CVV" name="cvv" required>
<p class="cvv-error text-danger hide"></p>
</div>
<div class="form-group col-3">
<button type="submit" class="btn btn-primary save">Save</button>
</div>
<div class="form-group col-4">
<button type="submit" class="btn btn-danger delete" data-id="">Delete</button>
</div>
<div class="form-group col-4">
<button type="submit" class="btn btn-primary update" data-id="">Update</button>
</div>
<div class="form-group col-4">
<button type="button" class="activate"><i class="fa fa-bolt" aria-hidden="true"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./Tabs -->
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="popup.js"></script>
</body>
</html>
Here is js:
/*----- Dashboard -----*/
appendCountries();
console.log($(".country").html());
/*------get countries from json-----*/
function appendCountries(){
$.getJSON('countries.json',function(result){
console.log(result.countries);
$.each(result.countries,function(index,country){
var option='<option value="'+country.id+"-"+country.name+'">'+country.name+'</option>';
$(".country").append(option);
});
});
}
Thanks in Advance!
I am stuck here please guide me what is the way to get options without adding any event on select box
This happens, because here is some asynchronously actions. If you call $('.country').html() after inserting options - it will show you generated html code. It is possible by two ways minimum:
Call $('.country').html() in the callback of $.getJSON after $.each(...).
As in my snippet - in processing of Promise of appendCountries, but firstly we should return it by adding return before $.getJSON.
appendCountries().then(() => {
console.log($(".country").html());
});
/*------get countries from json-----*/
function appendCountries(){
return $.getJSON('https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-name.json',
function(result){
// console.log(result);
$.each(result, function(index, country){
var option='<option value="'+index+"-"+country.country+'">'+country.country+'</option>';
$(".country").append(option);
});
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="countries" id="countriesSelect" class="country">
<option> -- select country -- </option>
</select>
How it will work? I want to know how javascript connect with html and div tag is correct. I didn't get which code is doing mistake.
<script type="text/javascript">
function validate()
{
if (document.myForm.name.value="") {
alert("should be fill");
document.myForm.name.focus();
return false;
}
return(true);
}
</script>
.container{background-color:gray;
width:550px;
height:650px;
align-content:center;
background: rgba(255, 255, 255, 0.1);}
h1{text-align:center;
color:darkslategray;
text-decoration-line:underline;}
input{width:100%}
#button{text-align:right;}
body {background-image:url("bg1.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css\custom.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>
login form
</title>
</head>
<body>
<div class="container">
<form method="post" name="myForm" onsubmit="return(validate());" data-toggle="validator">
<div class="form-group">
<h1><b><u>
Create an account
</u>
</h1>
<div class="row">
<div class="col-md-6">
First Name:
<input type="text" name="name" id="" value="" placeholder="First Name">
<span id="fnameerror" class="text-danger">
</span>
</div>
<div class="col-md-6">
Last Name:
<input type="text" name="lastname" id="lastname" placeholder="Last Name" >
<span id="lnameerror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
Company Name:
<input type="text" name="companyname" id="" placeholder="Company Name">
<span id="" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
Street address:
<input type="text" name="streetaddress" id="address" placeholder="Street address">
<span id="adderror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
Town/City:
<input type="text" name="city" id="city" placeholder="Town/City">
<span id="cityerror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
State/Country:
<input type="text" name="state" id="state" placeholder="State/Country">
<span id="stateerror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
Postcode/Zip:
<input type="text" name="zip" id="zip" placeholder="Postcode/Zip">
<span id="ziperror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
Phone:
<input type="text" name="Phone" id="phone" placeholder="Phone">
<span id="pherror" class="text-danger">
</span>
</div>
<div class="col-md-6">
Email:
<input type="emaill" name="Email" id="email" placeholder="Email">
<span id="emailerror" class="text-danger">
</span>
</div>
</div>
<div class="row">
<div class="col-md-1">
<input type="checkbox" name="checkbox" id="box" placeholder="">
<span id="boxerror" class="text-danger">
</span>
</div>
<div class="col-md-11">
Create an account
</div>
</div>
<div class="row" id="button">
<div class="col-md-12">
<button type="submit" value="submit">
<b>SignUp</b>
</button>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
you are using assignment operator in if (document.myForm.name.value = "")
Try with this code
function validate() {
if (document.forms["myForm"]["name"].value == "") {
alert("should be fill");
document.myForm.name.focus();
return false;
}
return (true);
}
You have missed equals to == in your comparison. For comparison is should be == double equals. Change it and it should work.
if (document.myForm.name.value == "") {
...
}
It seems that you haven't added the js file in the html file. Add the js file just above ending the body tag.
<script type="text/javascript" src="location to the file"><script>
Moreover in update the js code with:
function validate(e) {
e.preventDefault();
console.log(document.myForm.name.value);
if (document.myForm.name.value == "") {
alert("should be fill");
document.myForm.name.focus();
}
}
You also need to modify the form element.
<form method="post" name="myForm" onsubmit="validate(event);" data-toggle="validator">
I am having trouble with displaying required error messages in one of my pages.
HTML :
<div ng-form="editReservationForm">
<form id="edit-profile" novalidate name="editReservationForm" autocomplete="off" class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="reservation.employee.firstName">First Name<sup>*</sup></label>
<div class="controls">
<input class="span4" name="reservation.employee.firstName" placeholder="First Name" ng-model="reservation.employee.firstName" disabled />
</div> <!-- /controls -->
</div> <!-- /control-group -->
<div class="control-group">
<label class="control-label" for="reservation.employee.lastName">Last Name<sup>*</sup></label>
<div class="controls">
<input class="span4" name="reservation.employee.lastName" placeholder="Last Name" ng-model="reservation.employee.lastName" disabled />
</div> <!-- /controls -->
</div>
<div class="control-group">
<label class="control-label" for="reservation.reservedFrom">Reserved From<sup>*</sup></label>
<div class="controls input-group date" data-provide="datepicker">
<input class="form-control" type="text" name="startDate" core-date-picker ng-model="reservation.reservedFrom" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<span style="color:red">{{errMessageFrom}}</span>
</div> <!-- /controls -->
</div> <!-- /control-group -->
<div class="control-group">
<label class="control-label" for="reservation.reservedTill">Reserved Till<sup>*</sup></label>
<div class="controls input-group date" data-provide="datepicker">
<!--<input type="text" style="width:150px" class="span4" name="reservedTill" placeholder="Reserved Till" data-ng-model="reservation.reservedTill"
validator="required" required-error-message="Date is required" valid-method="watch" id="endDate" ng-change='checkErr()' />-->
<input class="form-control" type="text" name="EndDate" core-date-picker ng-model="reservation.reservedTill" ng-change='checkErr()' id="endDate1" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<span style="color:red">{{errMessageTo}}</span>
</div> <!-- /controls -->
</div> <!-- /control-group -->
<!--DATE PICKER-->
<div class="control-group">
<label class="control-label" for="reservation.account.name" >Account Name<sup>*</sup></label>
<div class="controls">
<select ng-model="reservation.account.id" required>
<option ng-repeat="p in accounts" value="{{p.id}}" required>{{p.name}}</option>
</select>
</div> <!-- /controls -->
</div> <!-- /control-group -->
<!--<div class="control-group">
<label class="control-label" for="reservation.poc.name">POC Name</label>
<div class="controls">
<select ng-model="reservation.poc.id">
<option ng-repeat="p in pocs" value="{{p.id}}">{{p.name}}</option>
</select>
</div> <!-- /controls -->
<!--</div>--> <!-- /control-group -->
<div class="control-group">
<label class="control-label" for="reservation.remark" >Remarks : <sup>*</sup></label>
<div class="controls">
<input type="text" required id="remarksText" class="span4" name="reservation.remark" placeholder="Enter your remarks here" ng-model="reservation.remark" />
</div> <!-- /controls -->
</div> <!-- /control-group -->
<div class="form-actions">
<button type="button" class="btn btn-primary" validation-submit="editReservationForm" ng-click="updateReservation()">Save</button>
<button ng-click="cancel()" class="btn">Cancel</button>
</div> <!-- /form-actions -->
</fieldset>
</form>
</div>
I have added the required tag along with all input fields but upon click of 'Save' button, the error messages that show 'This field is required' is not shown. The function is not getting called though.
I need help in finding the cause of this issue.
Keep the novalidate in the <form> tag.
Try changing required to ng-required="true".
ng-required works with ng-model. So make sure that ng-model exists in your input tag. (additional info)
Try adding
<span style="color:red" ng-show="editReservationForm.inputFieldName.$invalid && editReservationForm.inputFieldName.$touched">
Required field.
</span>
where inputFieldName is the respective name attribute.
This adds for better effect although you'll need to import angular-animate.min.js and add it as a dependency too.
I add few input fields & labels in bootstrap.
Then i add jQuery/javascript code to add & remove dynamically features.The script works fine.
But these dynamically inserted HTML elements are not displaying with proper alignment.
Please check image given below
I think,i put some elements in wrong position.
please suggest me about bringing proper alignment back.
Here is the source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Add/Remove</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-inline" role="form">
<div class="form-group" id="parent_div">
<div class="row form-group child_div">
<div class="col-xs-12 col-lg-3">
<label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
<div class="input-group" style="">
<select class="form-control " id="employeetype" onchange="updateText('')">
<option value="" disabled="" selected="">Select Job Type</option>
<option value="10">1</option>
<option value="10">2</option>
<option value="10">3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-lg-3">
<label for="form-input-col-xs-3" class="wb-inv">Date:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-xs-12 col-lg-3">
<label for="form-input-col-xs-3" class="wb-inv">Amount:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder=".00" />
<span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
</div>
</div>
<div class="form-group ">
<div class="input-group">
<input class="btn btn-danger deleteButton" type="button" value="-" />
</div>
</div>
</div>
</div>
<label for="day" class="col-xs-2 control-label"></label>
<input class="btn btn-success " type="button" id="create_button" value="+" />
</form>
</div>
<script type="text/javascript">
$('#create_button').click(function() {
var html = $('.child_div:first').parent().html();
$(html).insertBefore(this);
});
$(document).on("click", ".deleteButton", function() {
$(this).closest('.child_div').remove();
});
</script>
</body>
</html>
please let me know if any further information is required.
Thanks :)
So here's the complete html with some style to fix the alignment:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Add/Remove</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
div.child_div:first-child {
margin-top: 0px;
padding-top: 0px;
}
div.child_div {
width: 615px;
}
div.job-position {
width: 220px;
}
div.job-type {
width: 180px;
}
div.job-amount {
width: 180px;
}
div.form-group {
padding-top: 25px;
}
input#create_button {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<form class="form-inline" role="form">
<div class="form-group" id="parent_div">
<div class="row form-group child_div">
<div class="col-xs-12 col-lg-3 job-position">
<label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
<div class="input-group" style="">
<select class="form-control " id="employeetype" onchange="updateText('')">
<option value="" disabled="" selected="">Select Job Type</option>
<option value="10">1</option>
<option value="10">2</option>
<option value="10">3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-lg-3 job-date">
<label for="form-input-col-xs-3" class="wb-inv">Date:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-xs-12 col-lg-3 job-amount">
<label for="form-input-col-xs-3" class="wb-inv">Amount:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder=".00" />
<span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
</div>
</div>
<div class="form-group ">
<div class="input-group">
<input class="btn btn-danger deleteButton" type="button" value="-" />
</div>
</div>
</div>
</div>
<input class="btn btn-success " type="button" id="create_button" value="+" />
</form>
</div>
<script type="text/javascript">
$('#create_button').click(function() {
var html = $('.child_div:first').parent().html();
$(html).insertBefore(this);
});
$(document).on("click", ".deleteButton", function() {
$(this).closest('.child_div').remove();
});
</script>
</body>
</html>
You still have two problems though:
The page allows you to delete the last item. The code should handle this situation. The problem is, if the last item is deleted, you can't create a new one from the first item.
Load the page, click add, remove the first item, then click add again, you get multiple green buttons. You should fix that.
Remove this line:
<label for="day" class="col-xs-2 control-label"></label>
It doesn't seem to have any purpose, yet it causes the mis-alignment.
Another issue you have is the red button is aligned to the top with the other divs. Add padding-top to that div should push it down to line up with the other fields and buttons.
You wrote:
$('#create_button').click(function() {
var html = $('.child_div:first').parent().html();
$(html).insertBefore(this);
});
That takes the contents of child-div's parent (i.e. the content of #parent-div) and appends it before this. In the case of the click handler - which is assigned to #create_button - this is the button itself. If you use insertBefore(this) in that context you are inserting your content between the label and the button.
<label for="day" class="col-xs-2 control-label"></label>
<!-- You just inserted a code block here! -->
<input class="btn btn-success " type="button" id="create_button" value="+" />
I'm pretty sure that's not what you intended to do.
P.S. be careful about copying code this way. The elements you're copying have IDs attached, but IDs should be unique across any given document.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Add/Remove</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container">
<form class="form-inline" role="form">
<div class="col-lg-2">
<label for="day" class="col-xs-2 control-label"></label>
<input class="btn btn-success " type="button" id="create_button" value="+" />
</div>
<div class="col-lg-10">
<div class="form-group" id="parent_div ">
<div class="row child_div col-lg-12">
<div class="col-lg-4">
<label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
<div class="input-group" style="">
<select class="form-control " id="employeetype" onchange="updateText('')">
<option value="" disabled="" selected="">Select Job Type</option>
<option value="10">1</option>
<option value="10">2</option>
<option value="10">3</option>
</select>
</div>
</div>
<div class="col-lg-4">
<label for="form-input col-xs-3" class="wb-inv">Date:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-lg-3">
<label for="form-input-col-xs-3" class="wb-inv">Amount:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder=".00" />
<span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
</div>
</div>
<div class="col-lg-1">
<div class="input-group">
<input class="btn btn-danger deleteButton" type="button" value="-" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript">
var html = $('.form-group').html();
$('#create_button').on("click", function() {
$('.form-group').append(html);
});
$(document).on("click", ".deleteButton", function() {
$(this).closest('.child_div').remove();
});
</script>
I create a timpicker with input group addon.
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepickermailingtoupsummary" type="text"
style=" position: relative;"> <span
class="input-group-addon"><i
class="glyphicon glyphicon-time"></i></span>
</div>
But it returns
Can you I get same height.
You just forget to pply bootstrap class form-control to the input field. Just add the class as:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepickermailingtoupsummary" type="text" class="form-control" style=" position: relative;" />
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
JSfiddle Demo
You need to add the class form-control to your input:
<input id="timepickermailingtoupsummary" type="text" class="form-control">
And there are 3 class sizes as well.
body {
padding-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2 class="well well-sm">Default</h2>
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepickermailingtoupsummary" type="text" class="form-control"> <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
<hr>
<h2 class="well well-sm">Small</h2>
<div class="input-group bootstrap-timepicker timepicker input-group-sm">
<input type="text" class="form-control"> <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
<hr>
<h2 class="well well-sm">Large</h2>
<div class="input-group bootstrap-timepicker timepicker input-group-lg">
<input type="text" class="form-control"> <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</div>
This will help you..
Demo: http://jsfiddle.net/qW2wL/142/
<div class="input-append bootstrap-timepicker-component">
<input type="text" class="timepicker-value input-small" value="12:42 PM">
<span class="add-on">
<i class="icon-time"></i>
</span>
</div>