I am trying to send multiple data to the database at ince using a dynamically created form which add new fields when i cick in the ADD button. I have got most of the project to work, but to send the data to the controller i need to dynamiccally incerement the name property which i amn not able to do. I am new to spring ad Jquery. At the momemnt i can only send two array objects with index 0 and 1.
This is my html Form
<script>
$(document).ready(function(){
//group add limit
var maxGroup = 10;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
<a class="navbar-brand" th:href="#{/}" href="#">
<img src="" class="logo" th:src="#{/image/logo.png}" alt="logo">
Assam Power Distribution Company Limited</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
</div>
</nav>
<form method="post" th:action="#{/addfeeder}" th:object="${feeder}">
<div class="form-group fieldGroup" >
<div class="input-group mt-1 p-1 bg-light">
<input type="text" name="feeder[0].feeder_name" class="form-control" placeholder="Enter Feeder name" />
<select name="feeder[0].feeder_type" class="custom-select" id="inputGroupSelect01">
<option selected>Choose Capacity</option>
<option value="11">11</option>
<option value="33">33</option>
</select>
<input type="text" name="feeder[0].no_of_consumer_in_the_feeder" class="form-control" placeholder="Total Consumers"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
</form>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group mt-1 p-1 bg-light">
<input type="text" name="feeder[1].feeder_name" class="form-control" placeholder="Enter Feeder name"/>
<select name="feeder[1].feeder_type" class="custom-select" id="inputGroupSelect01">
<option selected>Choose Capacity</option>
<option value="11">11</option>
<option value="33">33</option>
</select>
<input type="text" name="feeder[1].no_of_consumer_in_the_feeder" class="form-control" placeholder="Enter Consumers"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
</div>
</div>
This is my controller
//adding feeder details
#PostMapping("/addfeeder")
public String addFeeder(#ModelAttribute FeederList feederlist)
{
System.out.println("Data"+feederlist);
System.out.println(feederlist.getFeeder().size());
for(Feeder c:feederlist.getFeeder())
System.out.println(c);
return "feeder";
}
public class FeederList {
private List<Feeder> feeder=new ArrayList<>();
public List<Feeder> getFeeder() {
return feeder;
}
public void setFeeder(List<Feeder> feeder) {
this.feeder = feeder;
}
}
Used clone() on page load to make a copy of the first group. When adding a new one we make another clone of the stored one
Creating a wrapping container for the groups making it simpler to append to
Created function adjustNames() that gets called when row added or removed. The remove process throws off indexing of names that follow it so seemed safest just to go through them all. You can see the text input names set as their values for verification in development
todo : Bug if remove all rows then add one. Perhaps prevent remove if only one left
//group add limit
var maxGroup = 5;
var $groupContain = $('#group-container');
// clone first group
var $groupCopy = $groupContain.find('.fieldGroup').first().clone();
$groupCopy.find(':input').val('') // clear any values if prepopulated
//add more fields group
$(".addMore").click(function() {
var groupLen = $groupContain.find('.fieldGroup').length
if (groupLen < maxGroup) {
var $newGroup = $groupCopy.clone();
$groupContain.append($newGroup);
adjustNames()
} else {
alert('Maximum ' + maxGroup + ' groups are allowed.');
}
});
function adjustNames(){
// clear console for demo
$groupContain.find('.fieldGroup').each(function(i){
var $inputs = $(this).find(':input[name]');
// uses the group index to update array names
$inputs.attr('name', function(j, currName) {
return currName.replace(/\[\d+\]/, `[${i}]`);
});
// for demo set names in text fields
$inputs.filter(':text').val(function(){
return this.name;
});
});
}
//remove fields group
$("body").on("click", ".remove", function() {
$(this).parents(".fieldGroup").remove();
adjustNames()
});
a{display:inline-block;padding:10px; font-size:1.2em}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" th:action="#{/addfeeder}" th:object="${feeder}">
<div id="group-container">
<div class="form-group fieldGroup">
<div class="input-group mt-1 p-1 bg-light">
<input type="text" name="feeder[0].feeder_name" class="form-control" placeholder="Enter Feeder name" />
<select name="feeder[0].feeder_type" class="custom-select" id="inputGroupSelect01">
<option selected>Choose Capacity</option>
<option value="11">11</option>
<option value="33">33</option>
</select>
<input type="text" name="feeder[0].no_of_consumer_in_the_feeder" class="form-control" placeholder="Total Consumers" />
<button class="remove"> Remove </button>
</div>
</div>
</div>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
<!--<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />-->
</form>
Related
I have a question. I'm beginner in web development.
So basically, I want to get the selected value for the dynamic dropdown in order to edit the form. I'm using the dselect https://github.com/jarstone/dselect/ js file for the dynamic dropdown.
I've tried using this $('#stock_category').val(data.stock_category); in order to get the selected value for the dropdown. But still didn't manage to get the selected value.
/////////////////////
When I did inspect the dropdown, it doesnt catch the selected value
$(document).on('click', '.edit_button', function() {
var stock_id = $(this).data('id');
$('#stock_out_form').parsley().reset();
$.ajax({
url: "stock_out_exec.php",
method: "POST",
data: {
stock_id: stock_id,
action: 'fetch_single'
},
dataType: 'JSON',
success: function(data) {
$('#stock_category').val(data.stock_category);
$('#stock_item').val(data.stock_item);
$('#modal_title').text('Edit Stock Out');
$('#action').val('Edit');
$('#submit_button').val('Edit');
$('#stockOutModal').modal('show');
$('#hidden_id').val(stock_id);
}
})
});
<!-- first dynamic dropdown -->
<select class="form-select" name="stock_category" id="stock_category" onchange="getId(this.value)" required="" style="display: none;">
<option value="0">Select Category</option>
<option value="1">PRODUCTS - MARKETING - LOGISTIC</option>
<option value="2">FREEGIFT</option>
</select>
<div class="dropdown dselect-wrapper ">
<button class="form-select " data-dselect-text="Select Category" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Select Category
</button>
<div class="dropdown-menu">
<div class="d-flex flex-column">
<input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text" class="form-control" placeholder="Search" autofocus="">
<div class="dselect-items" style="max-height:360px;overflow:auto">
<button class="dropdown-item active" data-dselect-value="0" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Select Category</button>
<button class="dropdown-item" data-dselect-value="1" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">PRODUCTS - MARKETING - LOGISTIC</button>
</div>
<div class="dselect-no-results d-none">No results found</div>
</div>
</div>
</div>
<!-- selected value should be right here -->
<button class="form-select " data-dselect-text="Select Category" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Select Category
</button>
<p></p>
<!-- second dynamic dropdown -->
<select class="form-select" name="stock_item" id="stock_item" data-dselect-search="true" required="" style="display: none;">
<option value="0">Select Item</option>
</select>
<div class="dropdown dselect-wrapper ">
<button class="form-select " data-dselect-text="Select Item" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Select Item
</button>
<div class="dropdown-menu">
<div class="d-flex flex-column">
<input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text" class="form-control" placeholder="Search" autofocus="">
<div class="dselect-items" style="max-height:360px;overflow:auto">
<button class="dropdown-item active" data-dselect-value="0" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Select Item</button>
</div>
<div class="dselect-no-results d-none">No results found</div>
</div>
</div>
</div>
<button class="form-select " data-dselect-text="Select Item" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Select Item
</button>
Try grabbing the option element with: $('#stock_category').find("option:selected")
Then try: $('#stock_category').find("option:selected").val()
and if that doesn't work, just grab the text with: $('#stock_category').find("option:selected").text()
and if there's extra whitespace, just strip it: $('#stock_category').find("option:selected").text().trim()
Edit 1, Showing copy element in dev console
Right link on Element + Inspect
Find Select in Element's Pane, should already be highlighted blue, and Copy. (when you hover over elements in the pane, the element on the page is highlighted)
When you Copy Element, it will copy the select field + ALL the options it contains. It should look like a complete mess when pasted. You can Chop out some Options and get rid of actual values (if needed) just be careful not to remove the option that is selected
Edit 2
This works: document.getElementById("stock_category").value
For some reason I can't access it using JQuery, but I can in Vanilla JS.
I would like to enter two input fields and one button dynamically adding them from the button click function.
They should look like this:
https://i.stack.imgur.com/iRnDu.png
On click of the button add, I would like to disable the button, add a new row of items (2 input boxes and the clickable button again). I would also like to store the 2 values from the text-boxes in an array.
add() {
let row = document.createElement('div');
row.className = 'row';
row.innerHTML += `
<br>
<input type="text" id="text1"> <input type="text" id="text2"> <button id="button">ADD</button> `;
document.querySelector('.showInputField').appendChild(row);
document.getElementById("button").addEventListener('click',this.input,false);}input(){
let inputValue = (document.getElementById("text1") as HTMLInputElement).value;
console.log(inputValue);
this.user.push(inputValue);
this.users.push(this.user);
this.user = [];
}
And this is the HTML:
<div>
CLICK ON BUTTON TO ADD NEW FIELD
<div class="showInputField">
<button (click)="add()">ADD</button>
</div>
<!-- The add() function is called -->
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="panel panel-default">
<div class="panel-body">
<div id="education_fields">
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value=""
placeholder="School name">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<div class="input-group">
<select class="form-control" id="educationDate" name="educationDate[]">
<option value="">Date</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="education_fields();"> <span
class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<script>
var room = 1;
function education_fields() {
room++;
var objTo = document.getElementById('education_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass" + room);
var rdiv = 'removeclass' + room;
divtest.innerHTML = '<div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value="" placeholder="School name"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <select class="form-control" id="educationDate" name="educationDate[]"><option value="">Date</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields(' + room + ');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
objTo.appendChild(divtest)
}
function remove_education_fields(rid) {
$('.removeclass' + rid).remove();
}
</script>
I'm working on an assignment and I'm having some trouble.
I have an input, select and button that needs to be cloned when pressed that button. Once it is pressed, I need to have another button that when clicked makes disappear the cloned item.
So far I have everything up until the last button that makes it disappear.
Here's my code:
$(document).ready(function() {
$("#masT").click(function() {
$("#nuevo-tel").clone(true).append($('<input type="button" value="-" id="menos"/>')).appendTo(".grupo-tel");
});
});
$("#menos").click(function() {
$(this).closest('div').find('#todo-tel').remove();
});
<div class="form-group">
<div id="todo-tel">
<div class="grupo-tel">
<span id="nuevo-tel" class="nuevo-tel">
<input name="telefono" type="text" id="telefono" placeholder="Teléfono" class="form-control">
<select class="seleccion">
<option value="m">Móvil</option>
<option value="c">Casa</option>
<option value="t">Trabajo</option>
<option value="o">Otro</option>
</select></span>
<button class="mas-t btn" type="button" id="masT">+ <i class="fas fa-phone-alt"></i></button>
</div>
</div>
</div>
You need to use classes instead of ids, since ids need to be unique
You need to use event delegation $(document).on("click", ".menos", function() {})
Check code below:
$(document).ready(function() {
$("#masT").click(function() {
$("#nuevo-tel").clone(true).append($('<input type="button" value="-" class="menos"/>')).appendTo(".grupo-tel");
});
$(document).on("click", ".menos", function() {
$(this).closest('.nuevo-tel').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div id="todo-tel">
<div class="grupo-tel">
<span id="nuevo-tel" class="nuevo-tel">
<input name="telefono" type="text" id="telefono" placeholder="Teléfono" class="form-control">
<select class="seleccion">
<option value="m">Móvil</option>
<option value="c">Casa</option>
<option value="t">Trabajo</option>
<option value="o">Otro</option>
</select></span>
<button class="mas-t btn" type="button" id="masT">+ <i class="fas fa-phone-alt"></i></button>
</div>
</div>
</div>
so I have an issue with trying to figure out how to get this to work. I want to make a dropdown selection, and I want all the selections in the dropdown to show up in the main input box along with the original input value.
Here is my form that I am using to send the values to ajax to send to my php file.
<div class="input-group" id="adv-search">
<input type="text" name="input1" class="form-control" id="filter" id="searchbox" placeholder="Something..."/ required>
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<h4 class="text-center">Advanced Search</h4>
<label for="filter">Option</label>
<select class="form-control" name="place" id="myList">
<option selected></option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>
</div>
<div class="form-group">
<label for="contain">Location</label>
<input class="form-control" name="something1" type="text" id="list2">
</div>
<div class="form-group">
<label for="contain">Something2</label>
<input class="form-control" name="contain" type="text" id="list3">
</div>
<p><br/>
<button type="submit" id="insideButton" name="submit" class="btn btn-primary">Advanced Search</button>
</form>
</div>
<button type="submit" id="buttonClass" name="submit2" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search</button>
</div>
</div>
</div>
</div>
</div>
Now I'm trying to get the values from the select dropdown(#myList) and the other inputs(#list2, #list3) and display them in the main input(#filter) along with the value that was entered in (#filter). My code below will display them per keypress but it repeats it since its in the function. How do I get each input to display in the #filter input.
$('#list2').on("input", function(){
var filter = $(this).val();
var myList = $('#filter').val();
$('#filter').val(filter + " " + myList);
});
Here is a picture of what I would like to accomplish. Any and all help is greatly appreciated. Thank you.
hello If I am understanding correctly according to your image and your piece of code that you want to get the all option input value into the main search box if that so you can try this Jquery code
<script>
$(document).ready(function() {
$("#insideButton").click(function(e) {
e.preventDefault();
$("#filter").val($("#list3").val()+" "+ $("#list2").val()+"
"+$("#myList").val()+" "+$("#filter").val());
});
});
</script>
I just used one button as submit option you can change it as your wish
you can also write the same code if you want form submit option then there will be a slightly change
<script>
$(document).ready(function() {
$(".form-horizontal").on('submit',function(e) {
e.preventDefault();
$("#filter").val($("#list3").val()+" "+ $("#list2").val()+"
"+$("#myList").val()+" "+$("#filter").val());
});
});
</script>
hope it helps you can also check this fiddle
fiddle demo
I have implemented Bootstrap datepicker in my webpage. I am using Bootstrap for CSS Styling.
Using bootstrap recommends that JQuery and Bootstrap JS should be included in the page at last. But doing so is making bootstrap datepicker malfunction.
Following is a snippet of my page through which i am able to use datepicker as well as bootstrap JS for a bootstrap Dropdown.
<head>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="https://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link href="../css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script type="text/javascript"src="https://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
</head>
<div class="btn-group pull-right">
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle" aria-haspopup="true" aria-expanded="false">Dropdown <span class="glyphicon glyphicon-triangle-bottom"></span></button>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-info-sign"></span> About <b>1</b></li>
<li><a data-toggle="modal" data-target="#optionModal"><span class="glyphicon glyphicon-alert"></span> Report a Bug</a></li>
<li><a data-toggle="modal" data-target="#optionModal"><span class="glyphicon glyphicon-text-background"></span> Suggest Enhancement</a></li>
<li><a data-toggle="modal" data-target="#optionModal"><span class="glyphicon glyphicon-phone-alt"></span> Contact Us</a></li>
</ul>
</div>
<div class="container">
<div id="questionblock">
<div class= "customscrollbar" id="questiondiv">
<div>
<button onclick="addtest();" class="btn btn-primary" style="margin-left:10px; margin-top:7px;"><span class="glyphicon glyphicon-plus"></span> Add New Test</button>
<a type="button" class="btn btn-default" style="margin-left:10px; margin-top:7px;"><span class="glyphicon glyphicon-refresh"></span> Refresh</a>
</div>
</div>
</div>
</div>
<div id="displaymasterblock">
<div class="alert alert-info fade in" id="addtestheader">
<span class="glyphicon glyphicon-plus"></span> Add New Test
</div>
<em> All fields are mandatory</em>
<form>
<div class="form-inline">
<div id="formelements">
<label>1. Name of Test :</label>
<input type="text" class="form-control" id="testname" style="height:30px;" placeholder="Maximum 20 Characters">
<label>2. Scheduled on :</label>
<div id="datetimepicker" class="input-append date">
<input type="text" style="height:30px;" placeholder="Date & Time of Test"></input>
<span class="add-on" style="height:30px;">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript"> //datepicker
$("#datetimepicker").datetimepicker({
format: "dd/MM/yyyy hh:mm:ss",
todayHighlight: true,
pick12HourFormat: true,
maskInput: true,
});
</script>
</div>
</div>
<div class="alert alert-info fade in" id="addtestheader" style="height:25px;font-size:15px;padding:2px;">
<span class="glyphicon glyphicon-user"></span> Select Target students for test
</div>
<div class="form-inline">
<div id="formelements">
<div class = "input-group">
<span class = "input-group-addon" style="width:40px;">3. Programme</span>
<select id="programme" name="programme" class="form-control" style="width:150px;" onchange="changeinprog();">
<option value="0" selected>Select One</option>
</select>
<span class = "input-group-addon">4. Branch</span>
<select id="branch" name="branch" class="form-control" onchange="changeofbranch();">
<option value="0">Select Programme</option>
</select>
</div>
<div class = "input-group" style="margin-top:10px;">
<span class = "input-group-addon" style="width:40px;">5. Semester</span>
<select id="semester" name="semester" class="form-control" style="width:150px;" onchange="changeinsemester();">
<option value="0">Select Programme</option>
</select>
<span class = "input-group-addon">6. Course</span>
<select id="course" name="course" class="form-control" style="width:270px;" >
<option value="0">Problem solving and programming skills</option>
</select>
</div>
</div>
</div>
<center>
<div id="errordiv" style="width:400px;"></div>
<button type="button" class="btn btn-success">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</center>
</form>
<script src="../js/bootstrap.min.js"></script>
Markup inside <div id="displaymasterblock"> has been minified and used in a JS function to get triggered on a button click. Following is that JS function-
function addtest()
{
var element = '<div class="alert alert-info fade in" id="addtestheader"><span class="glyphicon glyphicon-plus"></span> Add New Test</div><em> All fields are mandatory</em><form><div class="form-inline"><div id="formelements"><label>1. Name of Test :</label><input type="text" class="form-control" id="testname" style="height:30px;" placeholder="Maximum 20 Characters"> <label>2. Scheduled on :</label><div id="datetimepicker" class="input-append date"><input type="text" style="height:30px;" placeholder="Date & Time of Test"></input><span class="add-on" style="height:30px;"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div><script type="text/javascript">$("#datetimepicker").datetimepicker({format: "dd/MM/yyyy hh:mm:ss",todayHighlight: true,pick12HourFormat: true});</script></div></div><div class="alert alert-info fade in" id="addtestheader" style="height:25px;font-size:15px;padding:2px;"><span class="glyphicon glyphicon-user"></span> Select Target students for test</div><div class="form-inline"><div id="formelements"><div class = "input-group"><span class = "input-group-addon" style="width:40px;">3. Programme</span><select id="programme" name="programme" class="form-control" style="width:150px;" onchange="changeinprog();"><option value="0" selected>Select One</option><option value="1">B.Tech</option><option value="2">M.Tech</option><option value="3">MCA</option><option value="4">M.Sc.</option></select><span class = "input-group-addon">4. Branch</span><select id="branch" name="branch" class="form-control" onchange="changeofbranch();"><option value="0">Select Programme</option></select></div><div class = "input-group" style="margin-top:10px;"><span class = "input-group-addon" style="width:40px;">5. Semester</span><select id="semester" name="semester" class="form-control" style="width:150px;" onchange="changeinsemester();"><option value="0">Select Programme</option></select><span class = "input-group-addon">6. Course</span><select id="course" name="course" class="form-control" style="width:270px;" ><option value="0">Problem solving and programming skills</option></select></div></div></div><center><div id="errordiv" style="width:400px;"></div><button type="button" class="btn btn-success">Save</button><button type="button" class="btn btn-default">Cancel</button></center></form>';
document.getElementById('displaymasterblock').innerHTML = element;
}
What aabove function does is it puts all markup inside the <div id="displaymasterblock">
Datepicker is working i.e. calendar and clock icons are showing up and functioning perfectly when it is directly included in the markup as shown above however when i am using button click to show the same markup the datepicker stops functioning.
Please help me out here. I believe there is something wrong with external resource inclusion order but not sure.
I hope i explained myself properly.
Remove the script tag completely where you are appending the dynamic html content. After the dynamic elements are added to the dom, call the datepicker function. So modify your function like below -
function addtest() {
var element = '<div class="alert alert-info fade in" id="addtestheader"><span class="glyphicon glyphicon-plus"></span> Add New Test</div><em> All fields are mandatory</em><form><div class="form-inline"><div id="formelements"><label>1. Name of Test :</label><input type="text" class="form-control" id="testname" style="height:30px;" placeholder="Maximum 20 Characters"> <label>2. Scheduled on :</label><div id="datetimepicker" class="input-append date"><input type="text" style="height:30px;" placeholder="Date & Time of Test"></input><span class="add-on" style="height:30px;"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div></div></div><div class="alert alert-info fade in" id="addtestheader" style="height:25px;font-size:15px;padding:2px;"><span class="glyphicon glyphicon-user"></span> Select Target students for test</div><div class="form-inline"><div id="formelements"><div class = "input-group"><span class = "input-group-addon" style="width:40px;">3. Programme</span><select id="programme" name="programme" class="form-control" style="width:150px;" onchange="changeinprog();"><option value="0" selected>Select One</option><option value="1">B.Tech</option><option value="2">M.Tech</option><option value="3">MCA</option><option value="4">M.Sc.</option></select><span class = "input-group-addon">4. Branch</span><select id="branch" name="branch" class="form-control" onchange="changeofbranch();"><option value="0">Select Programme</option></select></div><div class = "input-group" style="margin-top:10px;"><span class = "input-group-addon" style="width:40px;">5. Semester</span><select id="semester" name="semester" class="form-control" style="width:150px;" onchange="changeinsemester();"><option value="0">Select Programme</option></select><span class = "input-group-addon">6. Course</span><select id="course" name="course" class="form-control" style="width:270px;" ><option value="0">Problem solving and programming skills</option></select></div></div></div><center><div id="errordiv" style="width:400px;"></div><button type="button" class="btn btn-success">Save</button><button type="button" class="btn btn-default">Cancel</button></center></form>';
document.getElementById('displaymasterblock').innerHTML = element;
$("#datetimepicker").datetimepicker({
format: "dd/MM/yyyy hh:mm:ss",
todayHighlight: true,
pick12HourFormat: true
});
}