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>
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 have three buttons for each data-table button, I want to filter these buttons, I mean when I press the button today brings me only data-table for the day as well as the button week and also month. Here is a picture showing what I mean
Here is my HTML code:
<div class="row">
<div class="col-sm-9 m-b-xs">
<div data-toggle="buttons" class="btn-group btn-group-toggle">
<label class="btn btn-sm btn-white"> <input type="radio" id="option1" name="options"> Day </label>
<label class="btn btn-sm btn-white active"> <input type="radio" id="option2" name="options"> Week </label>
<label class="btn btn-sm btn-white"> <input type="radio" id="option3" name="options"> Month </label>
</div>
</div>
</div>
and here is my JS code:
var empList = [];
var filter_expired = 'all';
function generateTable() {
var html = '';
console.log("ok", empList);
$.each(empList, function (key, item) {
if (filter_expired == 'all' || (filter_expired == "expired" && item.isExpired == true) || (filter_expired == "notExpired" && item.isExpired == false)) {
html += '<tr>';
html += '<td style="vertical-align: middle;">' + item.anything + '</td>';
html += '<td style="vertical-align: middle;">' + (item.anything1 !== undefined ? item.anything1 : "-") + '</td>';
html += '<td style="vertical-align: middle;">' + (item.anything2 !== undefined ? item.anything2 : "-") + '</td>';
html += '<td style="vertical-align: middle;">' + (item.anything3 !== undefined ? item.anything3 : "-") + '</td>';
html += '<td style="vertical-align: middle;">' + (item.anything4 !== undefined ? item.anything4 : "-") + '</td>';
html += '</td></tr>';
html += '</tr>';
}
});
$('#myTable').append('<tbody class="tbody">' + html + '</tbody><tfoot><tr class="footable-paging"><td colspan="9"><div class="footable-pagination-wrapper"><ul class="pagination pull-right"><li id="arrowFirst" class="footable-page-arrow disabled"><a data-page="first" href="#first">«</a></li><li class="footable-page-arrow disabled"><a data-page="prev" href="#prev">‹</a></li><li class="footable-page active"><a data-page="0" href="#">1</a></li><li class="footable-page"><a data-page="1" href="#">2</a></li><li class="footable-page-arrow"><a data-page="next" href="#next">›</a></li><li id="arrowLast" class="footable-page-arrow"><a data-page="last" href="#last">»</a></li></ul></div></td></tr></tfoot>');
$('#myTable').footable({
"paging": {
"enabled": true,
"data-page-size": "15",
"data-limit-navigation": "3"
},
"sorting": {
"enabled": true
}
});
clientRefresh();
$('.ibox').children('.ibox-content').toggleClass('sk-loading'); $('.ibox').addClass('bounce');
$("#search").val("");
}
You just need to create an event for button, call your function from that event so you can identify which button is pressed.
<div class="row">
<div class="col-sm-9 m-b-xs">
<div data-toggle="buttons" class="btn-group btn-group-toggle">
<label class="btn btn-sm btn-white"> <input type="radio" value="day" id="option1" name="options" > Day </label>
<label class="btn btn-sm btn-white active"> <input type="radio" value="week" id="option2" name="options"> Week </label>
<label class="btn btn-sm btn-white"> <input type="radio" value="month" id="option3" name="options"> Month </label>
</div>
</div>
</div>
Now you need to handle common change event
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
$('input:radio[name=options]').change(function () {
var filterType = $(this).val();
generateTable(filterType)
});
});
function generateTable(filterType) {
//do filter in your code using above param
}
</script>
I'm new from scripting world so sorry for my bad factory code.
I'm trying to make appear the input value in "card title" and "card-text" of my "cards" variable
Here is the code:
<input id="input1" class="form-control form-control-lg" type="text" placeholder="Write something" value="">
<input id="input2" class="form-control" type="text" placeholder="Write something else" value="">
<button class="btn btn-success" id="create">Create</button>
<script>
$(document).ready(function(){
$("#create").click(function(){
let cards = '<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
'<h5 class="card-title"></h5>' +
'<p class="card-text"></p>' +
'<button class="btn btn-primary">Go somewhere</button>' +
'</div>' +
'</div>';
$(document.body).append(cards);
});
});
</script>
Thanks everyone for the help!
You can achieve that in the way like this:
$(document).ready(function() {
$("#create").click(function() {
let cards =
'<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
`<h5 class="card-title">${$('#input1').val()}</h5>` +
`<p class="card-text">${$('#input2').val()}</p>` +
'<button class="btn btn-primary">Go somewhere</button>' +
"</div>" +
"</div>";
$(document.body).append(cards);
})
Try with the following:
$(document).ready(function() {
$("#create").click(function() {
var cardtitle = $('#input1').val();
var cardtext = $('#input2').val();
let cards = '<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
'<h5 class="card-title">'+cardtitle+'</h5>' +
'<p class="card-text">'+cardtext+'</p>' +
'<button class="btn btn-primary">Go somewhere</button>' +
'</div>' +
'</div>';
$(document.body).append(cards);
});
});
Demo
$(document).ready(function() {
$("#create").click(function() {
var cardtitle = $('#input1').val();
var cardtext = $('#input2').val();
let cards = '<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
'<h5 class="card-title">'+cardtitle+'</h5>' +
'<p class="card-text">'+cardtext+'</p>' +
'<button class="btn btn-primary">Go somewhere</button>' +
'</div>' +
'</div>';
$(document.body).append(cards);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input1" class="form-control form-control-lg" type="text" placeholder="Write something" value="">
<input id="input2" class="form-control" type="text" placeholder="Write something else" value="">
<button class="btn btn-success" id="create">Create</button>
$(document).ready(function(){
$("#create").click(function(){
let cards = '<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
'<h5 class="card-title">'+ $('#input1').val() +'</h5>' +
'<p class="card-text">'+ $('#input2').val() +'</p>' +
'<button class="btn btn-primary">Go somewhere</button>' +
'</div>' +
'</div>';
$(document.body).append(cards);
});
});
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
I am currently working on a web app that lets the user create a survey like Google forms using asp.net C#. Right now having trouble getting the id of the generated drop down list that's why I can't put any field in the new rows here is the code for the form:
<div class="form-group" style="margin:auto; width:80%;">
<form name="add_question" id="add_question">
<asp:Label ID="Label1" runat="server" Text="Survey Title: " Font-Size="Large"></asp:Label>
<input type="text" name="title" id="title" class="form-control question_list" placeholder="Enter Survey Title"/>
<asp:Label ID="Label2" runat="server" Text="Description: " Font-Size="Large"></asp:Label>
<br>
<textarea rows="4" cols="100%" name="description" id="description" placeholder="Enter description"></textarea>
<table class="table" id="dynamic_field">
<tr>
<th style="width: 50%">Question</th>
<th style="width: 15%">Type of Question</th>
<th style="width: 30%">Fields</th>
<th style="width: 5%">Remove</th>
</tr>
<tr id="row1">
<td style="width: 50%"><input type="text" name="question1" id="question1" class="form-control question_list" placeholder="Enter question"/></td>
<td style="width: 15%"><select name="type1" id="type1" class="dropdown">
<option selected></option>
<option value="1">Multiple Choice</option>
<option value="2">CheckBox</option>
<option value="3">Short Sentence</option>
<option value="4">Paragraph</option>
<option value="5">Line Scale</option>
</select></td>
<td style="width: 30%"></td>
<td style="width: 5%"> <button name="remove" id="1" class="btn btn-danger btn_remove"> X </button></td>
</tr>
</table>
<button type="button" name="add" id="add" class="btn btn-warning" > Add Question </button>
</form>
<button type="button" name="submit" id="submit" class="btn btn-success" > Submit </button>
</div>
And here is the code for generating the fields of the survey I'm making:
<script>
var i = 1;
$("#add").click(function () {
i++;
$("#dynamic_field").append('<tr id="row' + i + '"> <td> <input type="text" name="question' + i + '" id="question'
+ i + '" class="form-control question_list" placeholder="Enter question"/> </td><td><select name="type'
+ i + '" id="type' + i + '">'
+ '<option selected></option>'
+ '<option value="1">Multiple Choice</option>'
+ '<option value="2">CheckBox</option>'
+ '<option value="3">Short Sentence</option>'
+ '<option value="4">Paragraph</option>'
+ '<option value="5">Line Scale</option>'
+ '</select></td><td></td><td><button name="remove' + i + '" id="'
+ i + '" class="btn btn-danger btn_remove"> X </button> </td> </tr> ');
});
$(document).on('click', '.btn_remove', function () {
var button_id = $(this).attr("id");
$("#row" + button_id + "").remove();
});
$('#type1').change(function () {
var x = 1;
if ($(this).val() == '3') {
$('#myInput' + x + '').remove();
var row = document.getElementById("row1");
var z = row.insertCell(2);
z.innerHTML = '<td style="width: 30%"><input id="myInput' + x + '" type="text" style="width: 80%" /></td>';
row.deleteCell(3);
}
else if ($(this).val() == '4') {
$('#myInput' + x + '').remove();
var row = document.getElementById("row1");
var z = row.insertCell(2);
z.innerHTML = '<td style="width: 30%"><textarea rows="2" cols="40" name="description" id="myInput' + x + '"></textarea></td>';
row.deleteCell(3);
} else {
$('#myInput'+x+'').remove();
}
});
</script>
I'm also open for any ideas that can make this easier to create.
Create table like
<table class="table" id="dynamic_field">
<thead>
<tr>
<th style="width: 50%">Question</th>
<th style="width: 15%">Type of Question</th>
<th style="width: 30%">Fields</th>
<th style="width: 5%">Remove</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
When appending rows, append to tbody.
$("#add").click(function () {
i++;
$("#dynamic_field tbody").append('<tr id="row' + i + '"> <td> <input type="text" name="question' + i + '" id="question'
+ i + '" class="form-control question_list" placeholder="Enter question"/> </td><td><select name="type'
+ i + '" id="type' + i + '">'
+ '<option selected></option>'
+ '<option value="1">Multiple Choice</option>'
+ '<option value="2">CheckBox</option>'
+ '<option value="3">Short Sentence</option>'
+ '<option value="4">Paragraph</option>'
+ '<option value="5">Line Scale</option>'
+ '</select></td><td></td><td><button name="remove' + i + '" id="'
+ i + '" class="btn btn-danger btn_remove"> X </button> </td> </tr> ');
});
Change change event like this
$('#dynamic_field').on('change','[id^=type]',function () {
var x = 1;
if ($(this).val() == '3') {
$(this).closest('tr').find('[id^=myInput]').remove();
var row = $(this).closest('tr');
var z = row.insertCell(2);
z.innerHTML = '<td style="width: 30%"><input id="myInput' + x + '" type="text" style="width: 80%" /></td>';
row.deleteCell(3);
}
else if ($(this).val() == '4') {
$(this).closest('tr').find('[id^=myInput]')
var row = $(this).closest('tr');
var z = row.insertCell(2);
z.innerHTML = '<td style="width: 30%"><textarea rows="2" cols="40" name="description" id="myInput' + x + '"></textarea></td>';
row.deleteCell(3);
} else {
$(this).closest('tr').find('[id^=myInput]')
}
});