I'm trying to populate a list of n inputs from an array I have in localStorage. The issue is that I can see in console.log() that the for is getting executed but I only see two inputs.
javascript:
App.prefillWords = function() {
var arrayWords = JSON.parse(localStorage.getItem("event-data")).selected_word;
for (var i = 0; i < arrayWords.length; i++) {
var addto = "#field" + i;
var addRemove = "#field" + (i);
console.log(addto);
console.log(addRemove);
var newIn = '<input placeholder="Word" class="input form-control wordData" id="field' + i + '" name="field' + i + '" type="text">';
var newInput = $(newIn);
var removeBtn = '<button id="remove' + (i - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
var removeButton = $(removeBtn);
$(addto).after(newInput);
$(addRemove).after(removeButton);
$("#field" + i).attr('data-source', $(addto).attr('data-source'));
$("#count").val(i);
$('.remove-me').click(function (e) {
e.preventDefault();
var fieldNum = this.id.charAt(this.id.length - 1);
var fieldID = "#field" + fieldNum;
$(this).remove();
$(fieldID).remove();
});
}
}
html
<div class="panel-body">
<input type="hidden" name="count" value="1" />
<form class="wordsForm">
<div id="field" class="form-group row">
<label class="col-12 col-sm-3 col-form-label text-sm-right" for="wordScore">New Word</label>
<div class="col-12 col-sm-8 col-lg-6" id="fill">
<input autocomplete="off" class="wordData form-control" id="field1" name="prof1" type="text" placeholder="Word"/>
<button id="b1" class="btn add-more" type="button">+</button>
</div>
</div>
<div class="col-sm-6">
<p class="text-right">
<button class="btn btn-space btn-primary" id="updateEvent">Submit</button>
<button class="btn btn-space btn-secondary" id="cancelEvent">Cancel</button>
</p>
</div>
</form>
</div>
interface:
Any advice is highly appreciated, thanks
Related
I am trying to create inputs with jquery when user click on specific button as i create the inputs i want them to stop creating if the number of inputs exceeds 10
and here is the code
<script>
$(document).ready(function(){
var inputs = $('.product-options').length;
var max_inputs = 15;
var i=inputs;
var number = inputs;
if(inputs < 2){
$('.add_field_button').click(function(e){
e.preventDefault();
number++
i++;
$('.form-product').append('<span id="row'+i+'" class="myinput" style="transition:1s ease;"><div class="form-group"> <div class="col-sm-7"> <input type="text" class="form-control product-options" name="childen'+number+'"'+'value="" placeholder="the option"></div><div class="col-sm-3"> <input type="text" class="form-control product-options" name="childprice'+number+'"'+ 'value="" placeholder="option price"></div> </div> <div class="form-group"> <div class="col-sm-7"> <input type="text" class="form-control product-options" name="childsrb'+number+'"'+'value="" placeholder="the option in serbian"></div><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove"><i class="fas fa-times"></i></button></div></span>');
});
}
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
number--
i--;
});
});
</script>
html code
<div class="form-group product-option">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10 product-option">
<button type="button" class="add_field_button on-hover" style="background: none; border:none;">
<i class="fas fa-plus on-hover" style="cursor: pointer"></i></button>
<label for="option">Product options</label><br>
<div class="form-group product-option form-product">
</div>
</div>
</div>
You can use an if statement to check whether i is smaller than 11:
$(document).ready(function() {
var inputs = $('.product-options').length;
var max_inputs = 15;
var i = inputs;
var number = inputs;
if (inputs < 2) {
$('.add_field_button').click(function(e) {
e.preventDefault();
number++
i++;
if (i < 11) {
$('.form-product').append('<span id="row' + i + '" class="myinput" style="transition:1s ease;"><div class="form-group"> <div class="col-sm-7"> <input type="text" class="form-control product-options" name="childen' + number + '"' + 'value="" placeholder="the option"></div><div class="col-sm-3"> <input type="text" class="form-control product-options" name="childprice' + number + '"' + 'value="" placeholder="option price"></div> </div> <div class="form-group"> <div class="col-sm-7"> <input type="text" class="form-control product-options" name="childsrb' + number + '"' + 'value="" placeholder="the option in serbian"></div><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove"><i class="fas fa-times"></i></button></div></span>');
}
});
}
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
number--
i--;
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group product-option">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10 product-option">
<button type="button" class="add_field_button on-hover" style="background: none; border:none;">
<i class="fas fa-plus on-hover" style="cursor: pointer"></i></button>
<label for="option">Product options</label><br>
<div class="form-group product-option form-product">
</div>
</div>
</div>
I'm generating the textbox using the number of user input in bootstrap modal. But when I click the button and generate a textbox the modal automatically closing and the webpage is reloading. How to prevent that? I'm trying to use data-backdrop="static" data-keyboard="false" on modal but not working. Here's code:
<div class="form-group">
<label class="control-label col-sm-2">Answer options :</label>
<div class="col-sm-4" style="margin-right: -120px;">
<input type="number" class="form-control" id="count_option" placeholder="Enter number of options" >
</div>
<div class="col-sm-2" >
<button style="margin-left: 7em;" onclick="Generate(count_option.value)">Generate</button>
</div>
</div>
<div id="options"></div>
Javascript code:
<script type="text/javascript">
function Generate(nums){
var str = "";
for(var index = 1; index <= nums; index++ ){
str += '<div class="form-group"><label class="control-label col-sm-2"></label><div class="col-sm-2" style="margin-right: -120px;"><input type="radio" name="correct" value="" onclick="getTextValue('+ index +')" id="rd' + index +'" style="display: inline; position: absolute; margin-top: 10px;"></div><div class="col-sm-8" ><input type="text" class="form-control" id="txt' + index +'" name="ans[]" placeholder="Answer"></div></div>';
}
document.getElementById("options").innerHTML = str;
}
</script>
Please help me. Thanks.
As it is form so any button under it will behave as submit button by default and onClick, it will submit the form
function stopFormSubmission(){
let btn = document.querySelector('#yourBtn')
btn.addEventListener("click", function(event){
event.preventDefault() // prevent form from submitting
Generate(nums) // Call your function
});
}
function Generate(nums){ // Your function
var str = "";
for(var index = 1; index <= nums; index++ ){
str += '<div class="form-group"><label class="control-label col-sm-2"></label><div class="col-sm-2" style="margin-right: -120px;"><input type="radio" name="correct" value="" onclick="getTextValue('+ index +')" id="rd' + index +'" style="display: inline; position: absolute; margin-top: 10px;"></div><div class="col-sm-8" ><input type="text" class="form-control" id="txt' + index +'" name="ans[]" placeholder="Answer"></div></div>';
}
document.getElementById("options").innerHTML = str;
}
<form>
<button id="yourBtn" onClick="stopFormSubmission()" >click</button>
</form>
You just need to prevent the default behaviour and stop form to get submitted
You can try this via change on html or script below
<div class="form-group">
<label class="control-label col-sm-2">Answer options :</label>
<div class="col-sm-4" style="margin-right: -120px;">
<input type="number" class="form-control" id="count_option" placeholder="Enter number of options" >
</div>
<div class="col-sm-2" >
<button style="margin-left: 7em;" data-value="count_option.value" id="getValue">Generate</button>
</div>
</div>
<div id="options"></div>
i have changed in your button tag
and script to follow
<script>
document.getElementById("getValue").addEventListener("click", function(event){
event.preventDefault();
var str = "";
var nums = this.getAttribute("data-value");
for(var index = 1; index <= nums; index++ ){
str += '<div class="form-group"><label class="control-label col-sm-2"></label>
<div class="col-sm-2" style="margin-right: -120px;"><input type="radio" name="correct" value="" onclick="getTextValue('+ index +')" id="rd' + index +'" style="display: inline; position: absolute; margin-top: 10px;"></div><div class="col-sm-8" >
<input type="text" class="form-control" id="txt' + index +'" name="ans[]" placeholder="Answer"></div></div>';
}
document.getElementById("options").innerHTML = str;
}});
</script>
Note: Newbie to javascript and PHP
Requirement:
User has the option to add multiple forms and multiple levels as shown in the image.
structure:
idnum = 0
next = 1;
dimandlevels = [{}];
$(document).on('click', '.addlevel', function() {
clickedIdnum = $(this).data('idnum');
//console.log(idnum+'\n');
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + clickedIdnum + next);
newTextBoxDiv.after().html('<input class="input form-control textboxclass" id="textbox' + next + '" name="dimdetail[' + idnum + '][2][' + next + ']" type="text" placeholder="Enter Level ' + (next + 1) + ' value ">');
newTextBoxDiv.appendTo(".TextBoxesGroup" + idnum);
next++;
});
$(document).on('click', '.removelevel', function() {
if (next == 1) {
alert("No more textbox to remove");
return false;
}
next--;
$("#TextBoxDiv" + next).remove();
});
<h3><b>Create Texts</b></h3> <br>
<form class="form-horizontal" name="add_form" id="add_form">
<fieldset>
<form class="form-horizontal" role="form">
<fieldset>
<legend>Enter Dimension Details</legend>
<form class="form-horizontal" role="form">
<div class="controls" id="vignetteform">
<div id="dimensionform0">
<div class="well">
<div class="row">
<label class="col-lg-3 control-label">Dimension Text:</label>
<div class="col-lg-9">
<div class="control-group">
<div class="controls">
<div>
<input class="form-control textboxclassdim" type="text" name="dimdetail[0][0]" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<label class="col-lg-3 control-label">Dimension Description:</label>
<div class="col-lg-9">
<div class="control-group">
<div class="controls">
<div>
<input class="form-control textboxclass" type="text" name="dimdetail[0][1]" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<label class="col-lg-3 control-label">Enter Level:</label>
<div class="col-lg-8 control-group levelgroup"><input type="hidden" name="count" value="1">
<div class="controls TextBoxesGroup0">
<div id="TextBoxDiv00">
<input class="form-control textboxclass" id="textbox" type="text" name="dimdetail[0][2][0]" placeholder="Enter Level 1 Value" />
</div>
</div>
<button class="btn btn-info addlevel" type="button">Add Level</button>
<button class="btn btn-info removelevel" type="button">Remove level</button>
<span id="error_message" class="text-danger"></span>
</div>
</div>
</div>
</div>
</div>
</form>
</fieldset>
</form>
<div class="row">
<div class="col-md-8">
<button class="btn btn-info adddimension" type="button">Add Dimension</button>
<button class="btn btn-info removedimension" type="button">Remove Dimension</button>
<input type="button" name="submit" id="submit" class="btn btn-primary" value="Send" />
</div>
</div>
</fieldset>
</form>
<script src="includes/js/addlevelform.js"></script>
<script src="includes/js/adddimensionform.js"></script>
$(document).ready(function(){
var next = 1;
$(".adddimension").click(function(){
var newDimensionFormDiv = $(document.createElement('div'))
.attr("id",'dimensionform' + next);
newDimensionFormDiv.after().html(
'<div class="well"><div class="row"><label class="col-lg-3 control-label">Dimension Text:</label><div class="col-lg-9"><div class="control-group"><div class="controls"><div> <input class="form-control textboxclassdim" type="text" name="dimdetail['+ next +'][0]" /></div></div></div></div></div><div class="row"><label class="col-lg-3 control-label">Dimension Description:</label><div class="col-lg-9"><div class="control-group"><div class="controls"><div><input class="form-control textboxclass" type="text" name="dimdetail['+ next +'][1]" /></div></div></div></div></div><div class="row"><label class="col-lg-3 control-label">Enter Level:</label><div class="col-lg-8 control-group levelgroup"><input type="hidden" name="count" value="1"><div class="controls TextBoxesGroup'+ next +'" ><div id="TextBoxDiv'+ next +'0"><input class="form-control textboxclass" id="textbox'+ next +'" type="text" name="dimdetail['+ next +'][2][0]" placeholder="Enter Level '+ next +' Value" /></div></div><button data-idnum="'+idnum+'" class="btn btn-info addlevel" type="button">Add Level</button><button class="btn btn-info removelevel" type="button">Remove level</button><span id="error_message'+ next +'" class="text-danger"></span></div></div></div></div>'
);
newDimensionFormDiv.appendTo("#vignetteform");
next++;
idnum++;
var jsonObj = {idnum:1};
dimandlevels.data.push(idnum:1);
console.log(dimandlevels);
});
$(".removedimension").click(function(){
if(next==1){
alert("No more dimension to remove");
return false;
}
next --;
idnum--;
$("#dimensionform" + next).remove();
});
});
Issue: 1. The add level works only on first form
2. And the array indexes should be proper
So i need a way such that i can create multiple dimensions with levels with proper level ids.
Thank you and sorry for my bad code !!!! I am very new to programming :/
I have a simple form that adds an extra row of fields on the click of
a green button.
I would like a 2nd red button to appear to the right of the green button
after the the green button is clicked for the 1st time.
I would like this red button to remove the most recent row of fields
added every time it is clicked
i would like for the red button to disappear when all added rows
have been removed.
Can anyone help me with this? I'm not very experienced with javascript or jquery obviously.
The code is as follows:
test.php
<form role="form">
<h3>
Band Details
<small>Enter each band name and primary contact information...</small>
</h3>
<div class="well" id="newBandRows">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for "newBandName">Band Name:</label>
<input type="text" class="form-control" id="newBandName" name="newBandName" placeholder="Enter Band Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="primaryContact">Primary Contact:</label>
<input type="text" class="form-control" id="primaryContact" name="primaryContact" placeholder="Enter Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personEmail">Primary Email:</label>
<input type="email" class="form-control" id="primaryEmail" name="primaryEmail" placeholder="Enter Email" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personPhone">Primary Phone #:</label>
<input type="text" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Enter Phone #" />
</div>
</div>
</div>
</div>
<div id="newRowButton">
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-success pull-left" onClick="addNewBandRow();">+</button>
</div>
<div class="col-md-1">
</div>
<div class="col-md-7">
</div>
<div class="col-md-3 padding-top-10">
<button type="submit" class="btn btn-primary pull-right" align="right">Submit</button>
</div>
</div>
</div>
</form>
Javascript:
var band_i = 0;
function addNewBandRow() {
band_i++;
var bandDiv = document.createElement('div');
bandDiv.innerHTML = '<div class="row"><div class = "col-md-3"><input type="text" class="form-control" id="newBandName' + band_i + '" name="newBandName' + band_i + '" placeholder="Enter Band Name"/></div><div class="col-md-3"><input type="text" class="form-control" id="primaryContact' + band_i + '" name="primaryContact' + band_i + '" placeholder="Enter Name"/></div> <div class="col-md-3"><input type="email" class="form-control" id="primaryEmail' + band_i + '" name="primaryEmail' + band_i + '" placeholder="Enter Email"/></div><div class="col-md-3"><input type="text" class="form-control" id="primaryPhone' + band_i + '" name="primaryPhone' + band_i + '" placeholder="Enter Phone #"/></div></div><br>';
document.getElementById('newBandRows').appendChild(bandDiv);
}
Tested Copy
<html>
<head>
<script>
var band_i = 0;
var click = 0;
function addNewBandRow() {
click++;
band_i++;
var bandDiv = document.createElement('div');
bandDiv.innerHTML = '<div class="row"><div class = "col-md-3"><input type="text" class="form-control" id="newBandName' + band_i + '" name="newBandName' + band_i + '" placeholder="Enter Band Name"/></div><div class="col-md-3"><input type="text" class="form-control" id="primaryContact' + band_i + '" name="primaryContact' + band_i + '" placeholder="Enter Name"/></div> <div class="col-md-3"><input type="email" class="form-control" id="primaryEmail' + band_i + '" name="primaryEmail' + band_i + '" placeholder="Enter Email"/></div><div class="col-md-3"><input type="text" class="form-control" id="primaryPhone' + band_i + '" name="primaryPhone' + band_i + '" placeholder="Enter Phone #"/></div></div><br>';
document.getElementById('newBandRows').appendChild(bandDiv);
if (click === 1) {
var rmDiv = document.createElement('div');
rmDiv.innerHTML = '<div id="remove">Remove</div>';
document.getElementById('remover').appendChild(rmDiv);
}
}
function removeNewBandRow() {
var container = document.getElementById("newBandRows")
var children = container.childNodes;
container.removeChild(children[children.length - 1]);
//console.log(children.length);
if (children.length === 3) {
var redbutton = document.getElementById("remover");
redbutton.parentNode.removeChild(redbutton);
}
}
</script>
</head>
<body>
<form role="form">
<h3>
Band Details
<small>Enter each band name and primary contact information...</small>
</h3>
<div class="well" id="newBandRows">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for "newBandName">Band Name:</label>
<input type="text" class="form-control" id="newBandName" name="newBandName" placeholder="Enter Band Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="primaryContact">Primary Contact:</label>
<input type="text" class="form-control" id="primaryContact" name="primaryContact" placeholder="Enter Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personEmail">Primary Email:</label>
<input type="email" class="form-control" id="primaryEmail" name="primaryEmail" placeholder="Enter Email" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personPhone">Primary Phone #:</label>
<input type="text" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Enter Phone #" />
</div>
</div>
</div>
</div>
<div id="newRowButton">
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-success pull-left" onClick="addNewBandRow();">+</button>
</div>
<div id="remover" onClick="removeNewBandRow();" ></div>
<div class="col-md-1">
</div>
<div class="col-md-7">
</div>
<div class="col-md-3 padding-top-10">
<button type="submit" class="btn btn-primary pull-right" align="right">Submit</button>
</div>
</div>
</div>
</form>
</body>
</html>
At a high level, here are the steps you will need to implement:
Generate the HTML for the new red button.
This new red button will be hidden and unhidden based on a condition.
Example:
if (condition) {
$('#secondRedButton').hide();
} else {
$('#secondRedButton').show();
}
http://api.jquery.com/hide/
Bind an event handler to the "click" JavaScript event
Example:
$('#secondRedButton').click(function() {
// do something
});
https://api.jquery.com/click/
Please let me know if this helps.
You might as well use simple hiding statements as this:
var band_i = 0;
function addNewBandRow(con){
var e = con.getAttribute('name');
var c = document.getElementById('delBtn');
if(e == 'addRowBtn'){
band_i++;
var bandDiv = document.createElement('div');
bandDiv.innerHTML = '<div class="row" id="' + band_i + '"><div class = "col-md-3"><input type="text" class="form-control" id="newBandName' + band_i + '" name="newBandName' + band_i + '" placeholder="Enter Band Name"/></div><div class="col-md-3"><input type="text" class="form-control" id="primaryContact' + band_i + '" name="primaryContact' + band_i + '" placeholder="Enter Name"/></div> <div class="col-md-3"><input type="email" class="form-control" id="primaryEmail' + band_i + '" name="primaryEmail' + band_i + '" placeholder="Enter Email"/></div><div class="col-md-3"><input type="text" class="form-control" id="primaryPhone' + band_i + '" name="primaryPhone' + band_i + '" placeholder="Enter Phone #"/></div></div><br>';
document.getElementById('newBandRows').appendChild(bandDiv);
if(band_i != 0){
c.style.display = 'block';
}
}
}
function removeBandRow(con){
var e = con.getAttribute('name');
var c = document.getElementById('delBtn');
if(e == 'delRowBtn'){
var container = document.getElementById("newBandRows")
var nodes = container.childNodes;
container.removeChild(nodes[nodes.length - 1]);
band_i--;
if(band_i == 0)
c.style.display = 'none';
}
}
And modify buttons using this attributes.
<div class="col-md-1">
<button type="button" name="addRowBtn" class="btn btn-success pull-left" onClick="addNewBandRow(this);">+</button>
<button type="button" name="delRowBtn" id="delBtn" class="btn btn-danger pull-left" onClick="removeBandRow(this);" style='display:none' >-</button>
</div>
This should work for removing last child.
function removeBandRow(){
var container = document.getElementById("newBandRows")
var children = container.childNodes;
container.removeChild(children[children.length - 1]);
}
I want to set option value dynamically using Jquery/Javascript.I am explaining my work flow with code below.
index.html:
<Ol>
<div class="totalaligndiv" id="TextBoxContainer">
<li>
<div class="col-md-4 bmargindiv1">
<label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>
<input name = "txtQualification" id="txtQualification" type="text" />
</div>
<div class="col-md-5 bmargindiv1">
<label for="college" accesskey="C"><span class="required">*</span> College</label>
<input type="text" ID="txtCollege" name="college"/>
</div>
<div class="col-md-2 bmargindiv1">
<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>
<select ID="txtPassingYear" name="passingyear">
<option>Year</option>
</select>
</div>
<div class="col-md-1 bmargindiv1">
<label for="action" accesskey="C"> </label>
<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>
<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>
</div>
</li>
</div>
</Ol>
<script type="text/javascript">
window.onload=function(){
getYears();
}
function getYears() {
var dropdown = document.getElementById("txtPassingYear");
var currentTime = new Date();
var year = currentTime.getFullYear();
for (var i = year; i >= 1960; i--) {
var newOption = document.createElement('option');
newOption.value = i;
newOption.innerHTML = i;
dropdown.add(newOption);
}
}
</script>
<script type="text/javascript">
function GetDynamicTextBox(value, value1, value2) {
return '<div class="col-md-4 bmargindiv1"><label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>' +
'<input name = "txtQualification" id="txtQualification" type="text" value = "' + value + '" />' +
'</div>' +
'<div class="col-md-5 bmargindiv1">' +
'<label for="college" accesskey="C"><span class="required">*</span> College</label>' +
'<input type="text" ID="txtCollege" name="college" value = "' + value1 + '" />' +
'</div>' +
'<div class="col-md-2 bmargindiv1">' +
'<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>' +
'<select ID="txtPassingYear" name="passingyear">' +
'</select>' +
'</div>' +
'<div class="col-md-1 bmargindiv1">' +
'<label for="action" accesskey="C"> </label>' +
'<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>' +
'<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>'
}
function AddTextBox(objId) {
var div = document.createElement('li');
div.innerHTML = GetDynamicTextBox("", "", "");
document.getElementById("TextBoxContainer").appendChild(div);
$(objId).css('display', 'none');
$(objId).siblings("button.btn-danger").css('display', 'block');
var id=$(objId).closest('select');
console.log('id is',id);
getYears();
}
function RemoveTextBox(div) {
$(div).closest("li").remove();
}
</script>
In this above code first time after page load user is getting 3 fields i.e-Qualification,College,Passing year fields and the the years in drop down list is coming properly.When user is clicking on + button again another set of 3 fields is generating and in this section user is not getting any year in drop down list.Please help me to add years dynamically in dropdown list which is coming after clicked on + button.Please help me.
We have implemented the code for you. Id for the element is unique and for this we have created a dynamic id counter. Whenever you add the textboxes it will assign new id to select drop down and assign the year option to it.
<Ol>
<div class="totalaligndiv" id="TextBoxContainer">
<li>
<div class="col-md-4 bmargindiv1">
<label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>
<input name = "txtQualification" id="txtQualification" type="text" />
</div>
<div class="col-md-5 bmargindiv1">
<label for="college" accesskey="C"><span class="required">*</span> College</label>
<input type="text" ID="txtCollege" name="college"/>
</div>
<div class="col-md-2 bmargindiv1">
<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>
<select ID="txtPassingYear" name="passingyear">
<option>Year</option>
</select>
</div>
<div class="col-md-1 bmargindiv1">
<label for="action" accesskey="C"> </label>
<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>
<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>
</div>
</li>
</div>
</Ol>
<script type="text/javascript">
window.onload=function(){
getYears();
}
function getYears() {
var dropdown = document.getElementById("txtPassingYear");
var currentTime = new Date();
var year = currentTime.getFullYear();
for (var i = year; i >= 1960; i--) {
var newOption = document.createElement('option');
newOption.value = i;
newOption.innerHTML = i;
dropdown.add(newOption);
}
}
function getYearsOther() {
var dropdown = document.getElementById("txtPassingYear" + counter);
var currentTime = new Date();
var year = currentTime.getFullYear();
for (var i = year; i >= 1960; i--) {
var newOption = document.createElement('option');
newOption.value = i;
newOption.innerHTML = i;
dropdown.add(newOption);
}
}
</script>
<script type="text/javascript">
var counter = 0;
function GetDynamicTextBox(value, value1, value2) {
counter++;
return '<div class="col-md-4 bmargindiv1"><label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>' +
'<input name = "txtQualification" id="txtQualification" type="text" value = "' + value + '" />' +
'</div>' +
'<div class="col-md-5 bmargindiv1">' +
'<label for="college" accesskey="C"><span class="required">*</span> College</label>' +
'<input type="text" ID="txtCollege" name="college" value = "' + value1 + '" />' +
'</div>' +
'<div class="col-md-2 bmargindiv1">' +
'<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>' +
'<select ID="txtPassingYear' + counter + '" name="passingyear">' +
'</select>' +
'</div>' +
'<div class="col-md-1 bmargindiv1">' +
'<label for="action" accesskey="C"> </label>' +
'<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>' +
'<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>'
}
function AddTextBox(objId) {
var div = document.createElement('li');
div.innerHTML = GetDynamicTextBox("", "", "");
document.getElementById("TextBoxContainer").appendChild(div);
$(objId).css('display', 'none');
$(objId).siblings("button.btn-danger").css('display', 'block');
var id=$(objId).closest('select');
console.log('id is',id);
getYearsOther();
}
function RemoveTextBox(div) {
$(div).closest("li").remove();
}
</script>
You could try this code
function getYears() {
var $dropdown =$('#txtPassingYear');
var currentTime = new Date();
var year = currentTime.getFullYear();
for (var i = year; i >= 1960; i--) {
$dropdown.append($('<option>', {
value: i,
text: i
}));
}
}
CODE AFTER EDIT**
<Ol>
<div class="totalaligndiv" id="TextBoxContainer">
<li>
<div class="col-md-4 bmargindiv1">
<label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>
<input name = "txtQualification" id="txtQualification" type="text" />
</div>
<div class="col-md-5 bmargindiv1">
<label for="college" accesskey="C"><span class="required">*</span> College</label>
<input type="text" ID="txtCollege" name="college"/>
</div>
<div class="col-md-2 bmargindiv1">
<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>
<select ID="txtPassingYear" name="passingyear">
<option>Year</option>
</select>
</div>
<div class="col-md-1 bmargindiv1">
<label for="action" accesskey="C"> </label>
<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>
<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>
</div>
</li>
</div>
</Ol>
<script type="text/javascript">
window.onload = function () {
var $dropdown = $('#txtPassingYear');
getYears($dropdown);
}
function getYears(element) {
var currentTime = new Date();
var year = currentTime.getFullYear();
for (var i = year; i >= 1960; i--) {
element.append($('<option>', {
value: i,
text: i
}));
}
}
</script>
<script type="text/javascript">
var selectId=1;
function GetDynamicTextBox(value, value1, value2) {
return '<div class="col-md-4 bmargindiv1"><label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>' +
'<input name = "txtQualification" id="txtQualification" type="text" value = "' + value + '" />' +
'</div>' +
'<div class="col-md-5 bmargindiv1">' +
'<label for="college" accesskey="C"><span class="required">*</span> College</label>' +
'<input type="text" ID="txtCollege" name="college" value = "' + value1 + '" />' +
'</div>' +
'<div class="col-md-2 bmargindiv1">' +
'<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>' +
'<select ID="txtPassingYear' + selectId + '" name="passingyear">' +
'</select>' +
'</div>' +
'<div class="col-md-1 bmargindiv1">' +
'<label for="action" accesskey="C"> </label>' +
'<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>' +
'<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>'
}
function AddTextBox(objId) {
var div = document.createElement('li');
selectId++;
div.innerHTML = GetDynamicTextBox("", "", "");
document.getElementById("TextBoxContainer").appendChild(div);
$(objId).css('display', 'none');
$(objId).siblings("button.btn-danger").css('display', 'block');
var id = $(objId).closest('select');
console.log('id is', id);
var $dropdown = $('#txtPassingYear' + selectId);
getYears($dropdown);
}
function RemoveTextBox(div) {
$(div).closest("li").remove();
}
</script>