currently i am trying to to a calendar using the full calendar plugin. Here is my code,
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, jsEvent, view){
window.location = "testing.php";
},
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Currently, when i click on a date, the calendar redirect me to the test.php (which is what i wanted). Here nows the tricky part. How do i code it in a way that, For example, when the user pressed on january 10th, the details( which is in the database) will be echo out to that php. (testing.php).
Any suggestion on how my testing.php file should be done? sorry in advance if i happen to ask a stupid question.
To add on , it is somehow a feature which is similar to this http://www.w3schools.com/php/php_ajax_database.asp thank you in advance for any helpful tips.
You would probably need to append the start date as a url parameter in your window.location
...
select: function(start, end, jsEvent, ){
window.location = "testing.php?start=" + start;
},
Then on the php side you'd $_GET['start']
On the other hand, you could make an ajax post request in the select function.
I used a modal to pop-up when selecting a date from the calendar from which I supplied required values.
Script
select: function (start, end, allDay) {
$('#eventTitle').val('');
$('#eventStart').val('');
$('#eventEnd').val('');
$('#eventDescription').val('');
$('#eventType').val('');
$('#eventStart').val('');
$('#eventEnd').val('');
$('#myModal').modal();
$('#eventStart').val(moment(start).format('YYYY-MM-DD, HH:mm:ss'));
$('#eventEnd').val(moment(end).format('YYYY-MM-DD, HH:mm:ss'));
HTML
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create Event</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group"><div class="col-sm-12">
<label class="label bg-primary">Title</label> <input type="text" name="eventTitle" id="eventTitle" class="form-control" />
</div>
</div>
<div class="form-group"><div class="col-sm-12">
<label class="label bg-primary">Description</label> <textarea name="eventDescription" id="eventDescription" class="form-control" rows="5"></textarea>
</div>
</div>
<div class="form-group"><div class="col-sm-6">
<label class="label bg-primary">Event Reason</label> <select id="eventType" class="form-control" name="event_type">
<option value="">---Select One---</option>
<option value="meeting">Meeting</option>
<option value="reminder">Reminder</option>
<option value="holiday">Holiday</option>
<option value="vacation">Vacation</option>
<option value="anniversary">Anniversary</option>
<option value="unsched">Unscheduled Leave</option>
<option value="sickleave">Sick Leave</option>
</select>
</div>
</div>
<label class="label bg-primary">Event Type</label>
<div class="form-group"><div class="col-sm-6">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active" >
<input type="radio" id="optionsRadio" name="quality[25]" checked="checked" value="false" /> Timed
</label>
<label class="btn btn-default" >
<input type="radio" id="optionsRadio" name="quality[25]" value="true" /> All Day
</label>
</div>
</div>
</div>
<div class="col-lg-pull-2">
<div class="col-sm-6">
<div class="form-group"><label class="label bg-primary">Start Date</label>
<div class="input-group date" id="datetimepicker1" >
<input type="text" class="form-control" id="eventStart"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-pull-2">
<div class="col-sm-6"><input type="text" class="form-control hidden" id="eventHide"/>
<div class="form-group"><label class="label bg-primary">End Date</label>
<div class="input-group date" id="datetimepicker2">
<input type="text" class="form-control" id="eventEnd"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer"><button type="Submit" class="btn bg-primary" id="event_submit" onClick="addEvent()"><span><i class="glyphicon glyphicon-check"></i></span> Submit</button>
<button type="Reset" class="btn btn-default" data-dismiss="modal"><span><i class="glyphicon glyphicon-erase"></i></span> Close</button>
</div>
</div>
</div>
</div>
Note : Above code using Modal require bootstrap plug-ins
Related
My Datepicker in modal does not work on server but works properly on localhost. Below is my html and js code:
Html:
<div class="modal fade" id="CreateAppointmentModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Create Appointment</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="CreateAppointmentBody">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
JS
$(document).on("click", ".AppointmentItem", function () {
var row = $(this).closest("tr");
idOfCust = row.find("td:first-child").text();
var url = '/Home/Create_AppointmentAdmin';
console.log(url);
$('#CreateAppointmentModal').modal('show');
$('#CreateAppointmentBody').load(url);
});
$('#CreateAppointmentModal').on('shown.bs.modal', function (e) {
console.log('Entered');
$('.daterangepicker').css('z-index', '1600');
$(".daterangepicker").datepicker({
dateFormat: 'dd-mm-yy',
//onSelect: PopulateDropDown,
minDate: 0
});
});
Modal Body:
<div class="alert" role="alert" id="alertBox" style="display:none">
</div>
<div class="row">
<div class="col-md-12">
<form asp-action="Create_AppointmentAdmin" autocomplete="off">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input asp-for="Userid" type="hidden" id="CustId" />
<div class="form-group">
<label asp-for="AppointmentDay" class="control-label">Appointment Day</label>
<input asp-for="AppointmentDay" class="form-control daterangepicker" id="Calendar_Admin" type="text" autocomplete="off"/>
<span asp-validation-for="AppointmentDay" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="AppointmentTime" class="control-label">Appointment Time</label>
<select asp-for="AppointmentTime" class="form-control" id="AppointmentTime">
<option value="">Select</option>
</select>
<span asp-validation-for="AppointmentTime" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Comment" class="control-label">Comments</label>
<input asp-for="Comment" class="form-control" id="Comment" />
<span asp-validation-for="Comment" class="text-danger"></span>
</div>
<div class="form-group">
<input type="button" value="Create Appointment" class="btn btn-success" id="CreateAppointmentAdmin" />
</div>
</form>
</div>
</div>
Have tried multiple solutions availabe here but none seem to work.
Is there some mistake that I am doing? The same code seems to work fine on server when it is a full fledged page.
Any solution to this issue?
function getOption(){
var select = document.getElementById("dynamic-select");
if(select.options.length > 0) {
var option = select.options[select.selectedIndex];
alert("Text: " + option.text + "\nValue: " + option.value);
} else {
window.alert("Select box is empty");
}
}
function addOption(){
var select = document.getElementById("dynamic-select");
select.options[select.options.length] = new Option('New Element', '0', false, false);
}
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<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>
<style>
.pac-container {
z-index: 10000 !important;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Shipping Method</h2>
<form>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optradio" checked>Deliver To *</label>
</div>
</div>
<div class="form-group">
<select id="dynamic-select">
<option value="None">Select Shipping</option>
</select>
</div>
<div class="form-group">
<a data-toggle="modal" data-target="#myModal">Add Delivery Address</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Add your Delivery Details</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address</h3>
</div>
<div class="panel-body">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text" class="form-control">
<br>
<div id="address">
<div class="row">
<div class="col-md-6">
<label class="control-label">Street address</label>
<input class="form-control" id="street_number">
</div>
<div class="col-md-6">
<label class="control-label">Route</label>
<input class="form-control" id="route">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">City</label>
<input class="form-control field" id="locality">
</div>
<div class="col-md-6">
<label class="control-label">State</label>
<input class="form-control" id="administrative_area_level_1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Zip code</label>
<input class="form-control" id="postal_code">
</div>
<div class="col-md-6">
<label class="control-label">Country</label>
<input class="form-control" id="country">
</div>
</div>
</div>
<button type="submit" onclick="addOption()">Add NEW</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I'm new to Javascript and in this example, basically I have created a Shipping Method Page. In the "ADD Delivery Address" link, on clicking there is a address form which needs to be filled out and after pressing the ADD NEW button, all the address form data should appear in the select menu option like in the picture below. But I'm unable to do so. Can someone please enlighten me on his. It would be a immense help to me. Thank you
This is line bug, id newopt don't exist in html.
var newopt = $('#newopt').val();
I have been stuck on this issue since a week. I am not able to validate bootstrap modal using jQuery validator function. I have searched lots of stuff, also I have used exactly the same method as mentioned in here: How to correctly validate a modal form . I have been using django framework. Here is my HTML code:
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<form class="form-horizontal" id="myForm" role="form" action="{% url 'apply:add' %}" method="POST">
{% csrf_token %}
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Apply Leave
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div class="form-group">
<label class="control-label col-sm-3" for="e_id">Employee-Id</label>
<div class="col-sm-9">
<select class="form-control" id="e_id" name="e_id" class="required">
{% for entry in emp_data %}
<option value="{{ entry.emp_id }}">{{ entry.emp_id }} - {{ entry.emp_name}} </option>
{% endfor %}
</select>
</div>
</div>
<style>
.datepicker {
z-index: 1600 !important;
border-color: black;
}
</style>
<div class="form-group">
<label class=" control-label col-sm-3" for="s_dt">Start Date</label>
<div class="col-sm-9" >
<input type='text' class="form-control" id="s_dt" placeholder="Start Date" name="s_dt"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="e_dt">End Date</label>
<div class="col-sm-9" >
<input type='text' class="form-control" id="e_dt" placeholder="End Date" name="e_dt" require/>
</div>
</div>
<p class="col-sm-9 col-sm-offset-3" > Enter Start Date = End Date if leave is applied for a single day </br></p>
<div class="form-group">
<label class="col-sm-3 control-label" for="l_type">Leave Type</label>
<div class="col-sm-9">
<select class="form-control" id="l_type" name="l_type">
<option value="S">Sick Leave</option>
<option value="V">Vacation Leave</option>
<option value="M">Maternity Leave</option>
<option value="P">Paternity Leave</option>
<option value="C">Casual Leave</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="desc">Description</label>
<div class="col-sm-9">
<textarea class="form-control" id="desc" rows="3"></textarea>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
</button>
<button type="submit" class="btn btn-primary" name="save" id="save" value="Save changes" data-dismiss="modal">
Save changes
</button>
</div>
</form>
</div>
</div>
</div>
</div>
Here is my javascript:
$(function() {
$("#myForm").validate({
rules: {
s_dt: "required",
e_dt: "required"
},
messages: {
s_dt: "Please provide a date",
e_dt: "Please provide a date"
}
});
});
Thanks in advance..
By using jquery clone() i am repeating div section of my document. This div also contains bootstrap datepicker. But, cloned div's datepicker won't work. I am using this datepicker https://eonasdan.github.io/bootstrap-datetimepicker/
Note: In code snippet add multiple files in choose file option then only you will see extra datepicker's.
/* Depending on number of documents description box and datepicker will repeat */
$("#docsUpload").change(function() {
$("#multiShow").empty(); // removes child elements
var ele = document.getElementById($(this).attr('id'));
var result = ele.files;
var ff = result[0];
$("#ff").html("<strong> File Name : </strong>"+ ff.name);
for(var x = 0;x< result.length-1;x++){
var fle = result[x+1];
$('#multiShow').append("<div class='row'> <div class='col-sm-3'></div> <div class='col-sm-6'><hr>");
$('#multiShow').append(" <strong> File Name : </strong>"+fle.name);
$('#multiShow').append("</div><div class='col-sm-3'></div></div>");
$("#selectAll").clone(true).prop({ id:'thisisid_'+x}).appendTo('#multiShow');
}
});
/* depending on selection box type of date changes */
$(document).ready(function(){
$(".static").show(); // always display on page load
$(".period").on('change',function(changeEvent){ //selection box value changed
// var realId = $(".period").closest("div[id]").attr("id"); //get id
var realId = $(changeEvent.target).closest("div[id]").attr("id");
$('#'+realId+' .dateSelector').hide();
//alert('#'+realId+' '+'.dateSelector'); // display id only show 'selectAll'
var operation = '.'+this.value;
$('#'+realId+' '+operation).show();
}); // on period change
}); // document ready state
/* Format of datepicker */
$(document).ready(function(){
$('.datetimepicker1').datetimepicker({
format : "DD/MM/YYYY"
});
$('.datetimepicker2').datetimepicker({
format : "MM/YYYY"
});
$('.datetimepicker3').datetimepicker({
format : 'YYYY'
});
$('.datetimepicker5').datetimepicker({
format : 'YYYY'
});
$('.datetimepicker7').datetimepicker({
format : 'YYYY'
});
$('.datetimepicker9').datetimepicker({
format : "DD/MM/YYYY"
});
$('.datetimepicker10').datetimepicker({
format : "DD/MM/YYYY"
});
});
.dateSelector{
display: none;
}
h1{
color:#2F4F4F;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
<div class="container-fluid">
<form name="dataSubmit" action="<?php echo base_url('client/store'); ?>"
method="POST" enctype="multipart/form-data" onsubmit="return validateForm()">
<hr/>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<label for="upload">Upload Files : </label>
<input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" />
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<span id="ff"></span>
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div id="selectAll">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<input type="text" style="margin:5px 0px;" name="describe[]" class="form-control" placeholder="What this file about?" required="" />
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="upload"> Select Type & Date of document below: </label>
</div>
</div>
<div class="col-sm-3"></div>
</div> <!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-2">
<div class="form-group">
<select name="period" class="period">
<option value="static" selected="selected">Static</option>
<option value="monthly">Monthly</option>
<option value="quaterly">Quaterly</option>
<option value="semester">Semester</option>
<option value="yearly">Yearly</option>
<option value="other">Other</option>
</select>
</div>
</div>
<!-- begin : datepicker -->
<div class="col-sm-4 dateSelector static">
<div class="input-group date datetimepicker1">
<input type="text" name="staticDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<div class="col-sm-4 dateSelector monthly">
<div class="input-group date datetimepicker2">
<input type="text" name="monthlyDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<div class="dateSelector quaterly">
<div class="col-sm-2">
<select name="periodQuater[]">
<option value="first">January - March</option>
<option value="second">April - June</option>
<option value="third">July - September</option>
<option value="fourth">October - December</option>
</select><br/><br/>
</div>
<div class="col-sm-2">
<div class="input-group date datetimepicker3">
<input type="text" name="quaterlyDate" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector semester">
<div class="col-sm-2">
<select name="periodSemester[]">
<option value="semfirst">April - September </option>
<option value="semsecond">October - March</option>
</select><br/><br/>
</div>
<div class="col-sm-2">
<div class="input-group date datetimepicker5">
<input type="text" name="semesterDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector yearly">
<div class="col-sm-2">
<div class="input-group date datetimepicker7">
<input type="text" name="yearDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector other">
<div class="col-sm-2">
<div class="input-group date datetimepicker9">
<input type="text" name="otherDateF[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div> <br/></div>
<div class="col-sm-2">
<div class="input-group date datetimepicker10">
<input type="text" name="otherDateS[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div></div>
</div>
<div class="col-sm-3"></div>
</div> <!-- .row for selector-->
</div> <!-- #selectAll -->
<div id="multiShow"> </div>
<!-- end : datepicker -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6 form-group">
<br/>
<button type="submit" class="btn btn-primary form-control"> Submit </button>
</div>
<div class="col-sm-3"></div>
</div>
</form>
</div> <!-- .container -->
After cloning date picker to DOM you must have to do following things to bind date-picker to the newly created elements i recommend to apply same class to all datepicker inputs and than do same as follow to bind datepicker.
You can also read this documentation for more information
$('.datepicker').datepicker('update');
$("#docsUpload").change(function() {
debugger;
$("#multiShow").empty(); // removes child elements
var ele = document.getElementById($(this).attr('id'));
var result = ele.files;
var ff = result[0];
$("#ff").html("<strong> File Name : </strong>"+ ff.name);
for(var x = 0;x< result.length-1;x++){
var fle = result[x+1];
$('#multiShow').append("<div class='row'> <div class='col-sm-3'></div> <div class='col-sm-6'><hr>");
$('#multiShow').append(" <strong> File Name : </strong>"+fle.name);
$('#multiShow').append("</div><div class='col-sm-3'></div></div>");
$("#selectAll").clone().prop({ id:'thisisid_'+x}).appendTo('#multiShow');
}
$('.dpstatic').datetimepicker({
format : "DD/MM/YYYY"
});
$('.dpmonthly').datetimepicker({
format : "MM/YYYY"
});
$('.dpquaterly').datetimepicker({
format : 'YYYY'
});
$('.dpsemester').datetimepicker({
format : 'YYYY'
});
$('.dpyearly').datetimepicker({
format : 'YYYY'
});
$('.dpother').datetimepicker({
format : "DD/MM/YYYY"
});
$('.dpother').datetimepicker({
format : "DD/MM/YYYY"
});
});
/* depending on selection box type of date changes */
$(document).ready(function(){
$(".static").show(); // always display on page load
$("body").on('change','.period',function(changeEvent){ //selection box value changed
// var realId = $(".period").closest("div[id]").attr("id"); //get id
var realId = $(changeEvent.target).closest("div[id]").attr("id");
$('#'+realId+' .dateSelector').hide();
//alert('#'+realId+' '+'.dateSelector'); // display id only show 'selectAll'
var operation = '.'+this.value;
$('#'+realId+' '+operation).show();
}); // on period change
}); // document ready state
$(document).ready(function(){
$('.dpstatic').datetimepicker({
format : "DD/MM/YYYY"
});
$('.dpmonthly').datetimepicker({
format : "MM/YYYY"
});
$('.dpquaterly').datetimepicker({
format : 'YYYY'
});
$('.dpsemester').datetimepicker({
format : 'YYYY'
});
$('.dpyearly').datetimepicker({
format : 'YYYY'
});
$('.dpother').datetimepicker({
format : "DD/MM/YYYY"
});
$('.dpother').datetimepicker({
format : "DD/MM/YYYY"
});
});
.dateSelector{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
<div class="container-fluid">
<form name="dataSubmit" action="<?php echo base_url('client/store'); ?>"
method="POST" enctype="multipart/form-data" onsubmit="return validateForm()">
<hr/>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<label for="upload">Upload Files : </label>
<input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" />
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<span id="ff"></span>
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div id="selectAll">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<input type="text" style="margin:5px 0px;" name="describe[]" class="form-control" placeholder="What this file about?" required="" />
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="upload"> Select Type & Date of document below: </label>
</div>
</div>
<div class="col-sm-3"></div>
</div> <!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-2">
<div class="form-group">
<select name="period" class="period">
<option value="static" selected="selected">Static</option>
<option value="monthly">Monthly</option>
<option value="quaterly">Quaterly</option>
<option value="semester">Semester</option>
<option value="yearly">Yearly</option>
<option value="other">Other</option>
</select>
</div>
</div>
<!-- begin : datepicker -->
<div class="col-sm-4 dateSelector static">
<div class="input-group date datetimepicker dpstatic">
<input type="text" name="staticDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<div class="col-sm-4 dateSelector monthly">
<div class="input-group date datetimepicker dpmonthly">
<input type="text" name="monthlyDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<div class="dateSelector quaterly">
<div class="col-sm-2">
<select name="periodQuater[]">
<option value="first">January - March</option>
<option value="second">April - June</option>
<option value="third">July - September</option>
<option value="fourth">October - December</option>
</select><br/><br/>
</div>
<div class="col-sm-2">
<div class="input-group date datetimepicker dpquaterly">
<input type="text" name="quaterlyDate" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector semester">
<div class="col-sm-2">
<select name="periodSemester[]">
<option value="semfirst">April - September </option>
<option value="semsecond">October - March</option>
</select><br/><br/>
</div>
<div class="col-sm-2">
<div class="input-group date datetimepicker dpsemester">
<input type="text" name="semesterDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector yearly">
<div class="col-sm-2">
<div class="input-group date datetimepicker dpyearly">
<input type="text" name="yearDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector other">
<div class="col-sm-2">
<div class="input-group date datetimepicker dpother">
<input type="text" name="otherDateF[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div> <br/></div>
<div class="col-sm-2">
<div class="input-group date datetimepicker dpother">
<input type="text" name="otherDateS[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div></div>
</div>
<div class="col-sm-3"></div>
</div> <!-- .row for selector-->
</div> <!-- #selectAll -->
<div id="multiShow"> </div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6 form-group">
<br/>
<button type="submit" class="btn btn-primary form-control"> Submit </button>
</div>
<div class="col-sm-3"></div>
</div>
</form>
</div> <!-- .container -->
Run the snippet to check what changes i have made compare to original code.
Changes I have made:
(1) As point out by Curiousdev
remove true from clone()
in period repeat all the date formats
(2) This is very important,
Add unique class element to each calendar types. Checkout JSFiddle and search for dpstatic , dpmonthly, dpquaterly, dpsemester, dpyearly, dpother. Without adding this elements calendar will not show respective date formats and some time even calendar wont appear.
For fiddle : https://jsfiddle.net/rv285q8x/
Thank you #Curiousdev and #Ataur Rahman Munna for valuable information and help.
you should simply copy and paste my code.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
</script>
<input id="datetimepicker" type="text">
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>