Develop Reference

I need to display the filtered array

user will enter the details like name, address and designation which is in the dropdown and there is add button to insert this data so I will display these data through innerHTML. Now I need to display a dropdown which will help to filter the data depending upon the option of the dropdown.
Below is my code.
var data = [];
var fnameInput = document.getElementById("fname");
var addressInput = document.getElementById("address");
var designationInput = document.getElementById("designation");
var sel = document.getElementById("sel");
var messageBox = document.getElementById("display");
function insert() {
var fname, address, designation;
fname = fnameInput.value;
address = addressInput.value;
designation = designationInput.value;
data.push({
id: new Date().getTime(),
fname: fname,
address: address,
designation: designation
});
clearAndShow();
}
function clearAndShow() {
fnameInput.value = "";
addressInput.value = "";
designationInput.value = "";
var html = "";
console.log("aaaaaaaa");
for (i = 0; i <= data.length - 1; i++) {
html += "<div>";
html += "<div><span>" + data[i].fname + "</span> <span><button type='button' onclick='deleteUser(" + data[i].id + ")'>Delete</button>" +
"<button type='button' onclick='editUser(" + data[i].id + ")'>Edit</button></span></div>";
html += " <div> " + data[i].address + "</div>";
html += " <div> " + data[i].designation + "</div>";
html += "</div>";
}
messageBox.innerHTML = html;
}
function deleteUser(id) {
data = data.filter(user => user.id != id);
clearAndShow();
}
function editUser(name, address, designation) {
document.getElementById("fname").value = name;
document.getElementById("address").value = address;
document.getElementById("designation").value = designation;
}
function dataOnly() {
console.log("??????????????");
var user = document.getElementById("sel").value;
var all = document.getElementById("all");
var get = document.getElementById("get");
var se = document.getElementById("se");
var dev = document.getElementById("dev");
var others = document.getElementById("others");
if (user == "All") {
all.style.display = "block"
get.style.display = "block";
se.style.display = "block";
dev.style.display = "block";
others.style.display = "block";
const alll = document.getElementById("all")
console.log(alll.dataset.value);
}
if (user == "Gratuate Engineering Trainee") {
all.style.display = "none"
get.style.display = "block";
se.style.display = "none";
dev.style.display = "none";
others.style.display = "none";
const gett = document.getElementById("get")
console.log(gett.dataset.value);
} else if (user == "Software Engineer") {
all.style.display = "none"
get.style.display = "none";
se.style.display = "block";
dev.style.display = "none";
others.style.display = "none";
const see = document.getElementById("se")
console.log(see.dataset.value);
} else if (user == "Developer") {
all.style.display = "none"
get.style.display = "none";
se.style.display = "none";
dev.style.display = "block";
others.style.display = "none";
const devv = document.getElementById("dev")
console.log(devv.dataset.value);
} else if (user == "others") {
all.style.display = "none"
get.style.display = "none";
se.style.display = "none";
dev.style.display = "none";
others.style.display = "block";
const otherss = document.getElementById("others")
console.log(otherss.dataset.value);
}
}
<form>
<h1>Please enter details</h1>
<input id="fname" type="text" placeholder="fname" /><br />
<textarea id="address" name="Address" placeholder="address" rows="2" cols="10"></textarea><br />
<select id="designation" name="des" placeholder="designation">
<option value="Gratuate Engineering Trainee">Gratuate Engineering Trainee</option>
<option value="Software Engineer">Software Engineer</option>
<option value="Developer">Developer</option>
<option value="others">others</option>
</select><br />
<input type="button" value="Add" onclick="insert()" />
<select id="sel" onchange="dataOnly()">
<option value="All">All</option>
<option value="Gratuate Engineering Trainee">Gratuate Engineering Trainee</option>
<option value="Software Engineer">Software Engineer</option>
<option value="Developer">Developer</option>
<option value="others">others</option>
</select><br />
</form>
<div id="all" data-id="fname.value"></div>
<div id="get" data-id="fname.value"></div>
<div id="se" data-id="fname.value"></div>
<div id="dev" data-id="fname.value"></div>
<div id="others" data-id="fname.value"></div>
<div id="display"></div>
I tired adding dropdown so that the admin will get the information of the specific designation members with address but I am not able to get the details.
Example: one data with name:"aaa" address: "bbb" designation: "Graduate Engineering Trainee"
another data with name:" ccc" address: "ddd" designation: "Developer"
now I am able to add these to array through innerHTML and display both but, with the help of another dropdown I need to segregate the data like,
if I choose developer in dropdown option there should be "ccc" and "ddd" as output.
similarly if I choose graduate engineer trainee there should be "aaa" and "bbb" as output.

Here's the working solution:
var data = [],
selectedUserId = null;
var fnameInput = document.getElementById("firstName"),
addressInput = document.getElementById("address"),
designationInput = document.getElementById("designation"),
sel = document.getElementById("sel"),
messageDiv = document.getElementById("display");
document.getElementById("update").style.display = "none";
function addUser() {
var fname = fnameInput.value,
address = addressInput.value,
designation = designationInput.value;
var tmp = {
id: new Date().getTime(),
fname: fname,
address: address,
designation: designation
};
data.push(tmp);
clearAndShow(data);
}
function clearAndShow(data) {
fnameInput.value = "";
addressInput.value = "";
designationInput.value = "";
var html = "";
for (i = 0; i <= data.length - 1; i++) {
html += "<div style='border: 1px solid grey'>";
html +=
"<div><span>" +
data[i].fname +
"</span> <span><button type='button' onclick='deleteUser(" +
data[i].id +
")'>Delete</button>" +
"<button type='button' onclick='editUser(" +
data[i].id +
")'>Edit</button></span></div>";
html += "<div>" + data[i].address + "</div>";
html += "<div>" + data[i].designation + "</div>";
html += "</div>";
}
messageDiv.innerHTML = html;
}
function deleteUser(id) {
data = data.filter((user) => user.id != id);
clearAndShow(data);
}
function editUser(id) {
var selectedUsers = data.filter((user) => user.id == id);
selectedUserId = id;
document.getElementById("firstName").value = selectedUsers[0].fname;
document.getElementById("address").value = selectedUsers[0].address;
document.getElementById("designation").value = selectedUsers[0].designation;
document.getElementById("update").style.display = "block";
document.getElementById("add").style.display = "none";
}
function updateUser(selectedUserId) {
var tmp = {
id: new Date().getTime(),
fname: fnameInput.value,
address: addressInput.value,
designation: designationInput.value
};
data = data.map((x) => (x.id === selectedUserId ? tmp : x));
document.getElementById("update").style.display = "none";
document.getElementById("add").style.display = "block";
clearAndShow(data);
}
function showFilteredData() {
var filter = document.getElementById("selectToShow").value;
document.getElementById("selectToShow").value = "All";
var selectedUsers = data.filter((user) => user.designation == filter);
filter == "All" ? clearAndShow(data) : clearAndShow(selectedUsers);
}
<form>
<h1>Please enter details</h1>
<input id="firstName" type="text" placeholder="FirstName" /><br /><br />
<textarea id="address" name="address" placeholder="Address" rows="2" cols="10"></textarea><br></br>
<label for='destination'>Select Catetory: </label>
<select id="designation" name="designation">
<option value="Gratuate Engineering Trainee">Gratuate Engineering Trainee</option>
<option value="Software Engineer">Software Engineer</option>
<option value="Developer">Developer</option>
<option value="others">others</option>
</select>
<br /><br />
<input type="button" id="add" value="Add" onclick="addUser()" />
<input type="button" id="update" value="Update" onclick="updateUser(selectedUserId)" /><br /><br />
<label for='selectToShow'>Show: </label>
<select id="selectToShow" onchange="showFilteredData()">
<option value="All">All</option>
<option value="Gratuate Engineering Trainee">Gratuate Engineering Trainee</option>
<option value="Software Engineer">Software Engineer</option>
<option value="Developer">Developer</option>
<option value="others">others</option>
</select><br></br>
<div id="display">
</div>
Live demo here: https://codepen.io/dreambold/pen/poZyjbz?editors=1011

First of all, you have to assign your variables when the document is ready.
You try to access some elements which are not ready yet when you use document.getElementById
ex :
document.addEventListener("DOMContentLoaded",readyEvent);
var data = [];
var fnameInput;
var addressInput;
var designationInput;
var sel;
var messageBox;
function readyEvent(){
fnameInput = document.getElementById("fname");
addressInput = document.getElementById("address");
designationInput = document.getElementById("designation");
sel=document.getElementById("sel");
messageBox = document.getElementById("display");
}
I have not a lot of time now so, this is a partial and quick made answer...

display array objects to html table

I'm currently starting on a little project
I have this input which will push items to an array. My problem is everytime I push object using the button it will display some duplicate objects inside my table.
var tasks = [];
var count = 0;
$('#add').click(function() {
var desc = $.trim($('#list-input').val());
var id = Date.now();
item = {};
item["id"] = id;
item["description"] = desc;
tasks.push(item);
if (!desc) {
item["id"] = "";
alert("Input a description");
}
var tbl = $("<table/>").attr("id", "mytable");
$("#mylist").append(tbl);
for (var i = 0; i < tasks.length; i++) {
var tr = "<tr>";
var td1 = "<td>" + tasks[i]["id"] + "</td>";
var td2 = "<td>" + tasks[i]["description"] + "</td>";
$("#mytable").append(tr + td1 + td2);
};
//clear input field
$('#list-input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input id="list-input" />
<button id="add">Add To List</button>
<button id="delete">Remove From List</button>
</div>
<div class="container">
<h1>Your List</h1>
<div id="mylist">
</div>
<button id="clear">clear</button>
</div>

If you take out the loop and just get the last one in the array you are pushing to, it will solve your problem
EDIT: This way, if you want to use the tasks in some other function, it doesn't clear it out
EDIT 2: Made it to where it would only append the table if no id of that kind was found, makes it cleaner I think
var tasks = [];
var count = 0;
$('#add').click(function() {
var desc = $.trim($('#list-input').val());
var id = Date.now();
item = {};
item["id"] = id;
item["description"] = desc;
tasks.push(item);
if (!desc) {
item["id"] = "";
alert("Input a description");
}
if(!$("#mytable").length){ //Checks if mytable id exists
var tbl = $("<table/>").attr("id", "mytable");
$("#mylist").append(tbl);
}
var tr = "<tr>";
var td1 = "<td>" + tasks[tasks.length-1]["id"] + "</td>";
var td2 = "<td>" + tasks[tasks.length-1]["description"] + "</td>";
$("#mytable").append(tr + td1 + td2);
//clear input field
$('#list-input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input id="list-input" />
<button id="add">Add To List</button>
<button id="delete">Remove From List</button>
</div>
<div class="container">
<h1>Your List</h1>
<div id="mylist">
</div>
<button id="clear">clear</button>
</div>

You have the initialisation of the table repeated every time an addition is made.
Try this instead:
var tasks = [];
var count = 0;
$(function(){
var tbl=$("<table/>").attr("id","mytable");
$("#mylist").append(tbl);
for(var i=0;i<tasks.length;i++)
{
var tr="<tr>";
var td1="<td>"+tasks[i]["id"]+"</td>";
var td2="<td>"+tasks[i]["description"]+"</td>";
$("#mytable").append(tr+td1+td2);
};
});
$('#add').click(function(){
var desc = $.trim($('#list-input').val());
var id = Date.now();
item = {};
item ["id"] = id;
item ["description"] = desc;
tasks.push(item);
if (!desc){
item ["id"] = "";
alert("Input a description");
}
var tr="<tr>";
var td1="<td>"+item["id"]+"</td>";
var td2="<td>"+item["description"]+"</td>";
$("#mytable").append(tr+td1+td2);
//clear input field
$('#list-input').val('');
});
<div class="container">
<input id="list-input" />
<button id="add">Add To List</button>
<button id="delete">Remove From List</button>
</div>
<div class="container">
<h1>Your List</h1>
<div id="mylist">
</div>
<button id="clear">clear</button>
</div>

Updated the answer you can avoid using array and can achieve the desired by using some appropriate selectors
var count = 0;
var tbl = $("<table/>").attr("id", "mytable");
$("#mylist").append(tbl);
$('#add').click(function() {
var desc = $.trim($('#list-input').val());
var id = Date.now();
if (!desc) {
alert("Input a description");
return false;
}
var tr = "<tr>";
var td1 = "<td>" + id + "</td>";
var td2 = "<td>" + desc + "</td>";
$("#mytable").append(tr + td1 + td2);
//clear input field
$('#list-input').val('');
});
$('#delete').click(function() {
var desc = $.trim($('#list-input').val());
if (!desc) {
alert("Input a description");
return false;
}
var td = $("td").filter(function() {
return $(this).text() == desc;
});
var row = td.parent();
row.remove();
$('#list-input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input id="list-input" />
<button id="add">Add To List</button>
<button id="delete">Remove From List</button>
</div>
<div class="container">
<h1>Your List</h1>
<div id="mylist">
</div>
<button id="clear">clear</button>
</div>

Add button inside a new div created dynamically with a button using Javascript

I'm building kind of a form.
Trying to insert a button into a new div created dynamically with javascript. Apparently, the code isn't working because the new div created is a local variable inside the function that created it.
Without the additional button, the code is working fine.
The idea is that the additional button add extra inputs of the original type of input of the Form.
Any advice of how could I accomplish this?
HTML:
<div id="dynamicInputs">
</div>
Título de la pregunta: <input name="qName" type="text"><br>
Tipo: <select name="inputSelect">
<option value="text">Respuesta corta</option>
<option value="radio">Selección múltiple</option>
<option value="checkbox">Checkboxes</option>
<option value="textarea">Desarrollo</option>
</select><br>
<input type="button" class="btn btn-default btn-sm" value="Agregar pregunta" onclick="addAllInputs('dynamicInputs', document.myForm.qName.value, document.myForm.inputSelect.value)">
Javascript:
//agegar pregunta en formulario
var counterDynInput = 0;
function addAllInputs(divName, qName, inputType){
var newDiv = document.createElement('div');
var newDivName = "";
newDivName = "divInputs_" + (counterDynInput + 1);
newDiv.setAttribute("id", newDivName);
newDiv.innerHTML =
(counterDynInput + 1)
+ ". "
+ inputLabel(qName)
+ "<br>"
+ inputFields(inputType)
+ "<hr>";
addButtonToDiv(newDivName);
counterDynInput++;
document.getElementById(divName).appendChild(newDiv);
}
function inputLabel(qName){
var putStr = "";
putStr = "<input type='text' name='qLabel' value='" + qName + "' placeholder='Título de la pregunta...'>";
return putStr;
}
function inputFields(inputType){
var putStr = "";
putStr = "<input type='" + inputType + "' name='myInputs[]'><br>";
return putStr;
}
function addButtonToDiv(newDivName){
var btn = document.createElement('BUTTON');
var div = document.getElementById(newDivName);
div.appendChild(btn);
}

how to create x amount of div on select option value

this is my first question on here so ill try and be as detailed as possible! I am currently creating a HTML form with a select option with options 1 - 4. My aim is to use a Javascript function to create a certain amount of div's depending on which value the user has selected from the form.
For example, if the user has selected option 2, i want to auto generate 2 div containers. Then, if the user chooses to select another option after... the correct amount of divs will then be created.
My select HTML currently looks like this;
<select id="select_seasons">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
I have created a script which will create a div on button click but this isn't my aim;
var number = 2;
document.getElementById('add').addEventListener('click', function(
) {
var newDiv = document.createElement('div');
newDiv.id = 'container';
newDiv.innerHTML = "<label>Episode " + number + " name</label> <input type='text' name='episode'" + number +" /> <label>Episode " + number + " embed</label> <input type='text' /> ";
document.getElementById('contain_form').appendChild(newDiv);
number++;
});
I would appreciate it if somebody was to help me with the JS i will need to make this functionality and i hope i've explained myself clearly enough in this post!
Feel free to comment and ask for me details if required.
Thanks in advance,
Sam

You need to bind the change event on your select element. Something like this:
var divs = [];
document.getElementById('select_seasons').addEventListener('change', function(e) {
var n = +this.value;
for (var i = 0; i < divs.length; i++) {
divs[i].remove();
}
divs = [];
for (var i = 0; i < n; i++) {
var d = document.createElement("div");
d.className = "new";
document.body.appendChild(d);
divs.push(d);
}
});
.new {
background-color: red;
width: 100px;
height: 20px;
margin: 1px;
}
<select id="select_seasons">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

Solution for your problem: http://jsfiddle.net/43ggkkg7/
document.getElementById('select_seasons').addEventListener('change', function(){
var container = document.getElementById('container');
container.innerHTML = ''; //clear
//Find selected option
var n = 1;
for(var i = 0; i < this.options.length; ++i){
if(this.options[i].selected){
n = ~~this.options[i].value; //Cast to int
break;
}
}
for(var i = 1; i <= n; ++i){ //Because we want to count from 1 not 0
var newDiv = document.createElement('div');
newDiv.id = 'element-' + i;
newDiv.innerHTML = "<label>Episode " + i + " name</label> <input type='text' name='episode[" + i +"]' /> <label>Episode " + i + " embed</label> <input type='text' /> ";
container.appendChild(newDiv);
}
});
//Emit event on page init
document.getElementById('select_seasons').dispatchEvent(new Event('change'));

I will help you to read this now, I don't need another loop to remove the old divs in the container, you can use innedHTML and set it to empty.
<select id="select_seasons">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
document.getElementById('select_seasons').addEventListener('change', function() {
var self = this,
exisiting = document.getElementById('contain_form');
//remove existing divs
exisiting.innerHTML = '';
for(i=1; i<= self.value; i++) {
var newDiv = document.createElement('div');
newDiv.id = 'container';
newDiv.innerHTML = "<label>Episode " + i + " name</label> <input type='text' name='episode'" + i +" /> <label>Episode " + number + " embed</label> <input type='text' /> ";
exisiting.appendChild(newDiv);
}
});
Check this fiddle

If I understood the question correctly, the seasons form should update and auto-fill with the select's number. Use the change event and refresh the form with the selected value.
var selectSeasons = document.getElementById("select_seasons");
selectSeasons.addEventListener('change', function() {
populateForm(parseInt(this.value));
});
function populateForm(numberOfSeasons) {
// first, remove all existing fields
var containForm = document.getElementById("contain_form");
while (containForm.firstChild) {
containForm.removeChild(containForm.firstChild);
}
for (var i = 1; i <= numberOfSeasons; i++) {
addDiv(i);
}
}
function addDiv(number) {
var newDiv = document.createElement('div');
newDiv.id = 'container';
newDiv.innerHTML = "<label>Episode " + number + " name</label> <input type='text' name='episode'" + number + " /> <label>Episode " + number + " embed</label> <input type='text' /> ";
document.getElementById('contain_form').appendChild(newDiv);
number++;
}
Number of seasons:
<select id="select_seasons">
<option value="0">Please make a selection</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="contain_form"></div>

You could use the selected value of the select element:
var number = select.options[select.selectedIndex].value;
For example:
var select = document.getElementById("select_seasons");
var button = document.getElementById("add");
var container = document.getElementById("container");
button.addEventListener("click", function () {
// uncomment the following line if you want the remove the previously generated divs:
//container.innerHTML = "";
var number = select.options[select.selectedIndex].value;
for (var i = 1; i <= number; i++) {
var div = document.createElement("div");
div.innerHTML = "div #" + i;
container.appendChild(div);
}
});
<select id="select_seasons">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button id="add">Add</button>
<div id="container"></div>

Increment textarea name to javascript function

So what I am trying to achieve is to increment the points".$id." in the javascript code below starting from 0 like points+n and it would be a dynamic value according to rows in a table. Same for the value 'button".$id."' and all this is because of styled radiobutton labels that are looped etc.
So all I want to do is get rid of all the hardcoded different var txt1 to txt+n, button0 to button+n and points0 to points+n in the JavaScript function.
The real problem here for me is the line: var buttons1 = document.forms[0].button0; how to replace the 0 in button0 to the 'i' in a for loop. Someting like button + i won't work.
Oh and what I'm trying to do is get the values from the radiobuttons to a textarea with one buttongroup and textarea per tablerow.
The code below works for the first 7 rows in my table...
echo "
<td>
<div class='radio'>
<input id='".$temp1."' type='radio' name='button".$id."' onclick='myFunction()' value='4'>
<label for='".$temp1."'></label>
<input id='".$temp2."' type='radio' name='button".$id."' onclick='myFunction()' value='3'>
<label for='".$temp2."'></label>
<input id='".$temp3."' type='radio' name='button".$id."' onclick='myFunction()' value='2'>
<label for='".$temp3."'></label>
<input id='".$temp4."' type='radio' name='button".$id."' onclick='myFunction()' value='1'>
<label for='".$temp4."'></label>
</div>";
echo"<textarea id='points".$id."' name='points".$id."' cols='1' rows='1' ;> </textarea>
</td>
</tr>";
The Javascript function:
function myFunction() {
var txt1 ='';
var txt2 ='';
var txt3 ='';
var txt4 ='';
var txt5 ='';
var txt6 ='';
var txt7 ='';
var buttons1 = document.forms[0].button0;
var buttons2 = document.forms[0].button1;
var buttons3 = document.forms[0].button2;
var buttons4 = document.forms[0].button3;
var buttons5 = document.forms[0].button4;
var buttons6 = document.forms[0].button5;
var buttons7 = document.forms[0].button6;
var buttons8 = document.forms[0].button7;
for (var i = 0; i < 4; i++) {
if (buttons1[i].checked) {
txt1 = txt1 + buttons1[i].value + " ";
}
if (buttons2[i].checked) {
txt2 = txt2 + buttons2[i].value + " ";
}
if (buttons3[i].checked) {
txt3 = txt3 + buttons3[i].value + " ";
}
if (buttons4[i].checked) {
txt4 = txt4 + buttons4[i].value + " ";
}
if (buttons5[i].checked) {
txt5 = txt5 + buttons5[i].value + " ";
}
if (buttons6[i].checked) {
txt6 = txt6 + buttons6[i].value + " ";
}
if (buttons7[i].checked) {
txt7 = txt7 + buttons7[i].value + " ";
}
}
document.getElementById("points0").value = txt1;
console.log(txt1);
document.getElementById("points1").value = txt2;
console.log(txt2);
document.getElementById("points2").value = txt3;
console.log(txt3);
document.getElementById("points3").value = txt4;
console.log(txt4);
document.getElementById("points4").value = txt5;
console.log(txt5);
document.getElementById("points5").value = txt6;
console.log(txt6);
document.getElementById("points6").value = txt7;
console.log(txt7);
}

i think what you need is use the "eval" function in javascript
try the following
var buttons1;
var buttons2;
var buttons3;
var buttons4;
var buttons5;
var buttons6;
var buttons7;
var buttons8;
var j;
for(var i=0;i<8;i++){
j=i+1;
eval("buttons" +j+ " = document.forms[0].button" +i+ ";");
}

If i understood correctly,
Try something like this:
change your onclick as following:
<input id='".$temp4."' type='radio' name='button".$id."' onclick='myFunction(this)' value='1'>
and change function :
function myFunction(button){
var name= button.name;
var id= name.split('button')[1];;
document.getElementById("points"+id).value = buttons.value +" ";
}