Following is my code in which I am adding rows with text boxes and drop downs dynamically.
Javascript:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
HTML:
<body onload="load()">
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="text" name="txt[]" id="t1"/></TD>
<TD>
<SELECT name="country[]" id="t2">
<OPTION value="in">India</OPTION>
<OPTION value="de">Germany</OPTION>
<OPTION value="fr">France</OPTION>
<OPTION value="us">United States</OPTION>
<OPTION value="ch">Switzerland</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</BODY>
Now i am trying to fetch the values from fields added dynamically so that i can display it in table format . But i am not getting by which way i can do it . Please help.
Related
I'm making a website here: https://opportunities.sarahlim3.repl.co/discover.html
How can I change the JavaScript functions so that the filter by location dropdown and the filter by category dropdown work together so that table values will show up according to these two conditions if a user clicks on two? The other problem is that internships with categories of computer science and political science also show up when you click the "science" in the dropdown. How can I make it be the exact word?
Here's the code for the page:
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<link rel="stylesheet" href="style.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" href="discover.css">
<script src="script.js">
</script>
</head>
<body>
<nav>
<div class="nav-bar">
Home
Find high school internships
Resume and CV Template
</div>
</nav>
<h2>Add a High School Internship Listing</h2>
<p>*The five fields are required to add (paid internships only)</p>
<form>
<div class="search-box">
<input class="search-txt" type="text" name="" id="searchList" onkeyup="searchFunction()" placeholder="Search by name..."> <a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
<table id="input-table">
<thead>
<tr>
<th>Internship name</th>
<td><input type="text" name="fname" id="fname" required></td>
</tr>
</thead>
<tbody>
<tr>
<th>Internship location</th>
<td><select id="location">
<option value="Remote">Remote</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
</select></td>
</tr>
<tr>
<th>Internship category</th>
<td> <select id="category">
<option value="Computer Science">Computer Science</option>
<option value="Science">Science</option>
<option value="Political Science">Political Science</option>
<option value="Business/Marketing">Business/Marketing</option>
<option value="Music">Music</option>
<option value="Art">Art</option>
<option value="All STEM fields">All STEM fields</option>
</select></td>
</tr>
<tr>
<th>Internship link</th>
<td><input type="text" name="link" id="link" required></td>
</tr>
<tr>
<th>Internship deadline</th>
<td><input type="text" name="deadline" id="deadline" required></td>
</tr>
<tr id="btna">
<td colspan="2"><input type="button" name="button" id="btn" value="Add" onclick="onSubmit()"></td>
</tr>
</tbody>
</table>
</form>
<select id="mylist" onchange="locationFunction()" class='form-control'>
<option value="">Filter by location</option>
<option value="Remote">Remote</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
</select>
<select id="categorylist" onchange="myFunction()" class='form-control'>
<option value="">Filter by category</option>
<option value="Computer Science">Computer Science</option>
<option value="Science">Science</option>
<option value="Political Science">Political Science</option>
<option value="Business/Marketing">Business/Marketing</option>
<option value="Music">Music</option>
<option value="Art">Art</option>
<option value="All STEM fields">All STEM fields</option>
</select>
<table id="show" style="padding:30px; width:90%;" class="internshipInfo">
<thead>
<tr>
<th>Internship name</th>
<th>Internship location</th>
<th>Internship category</th>
<th>Internship link</th>
<th>Internship deadline</th>
</tr>
</thead>
</table>
<script>
function searchFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("searchList");
filter = input.value.toUpperCase();
table = document.getElementById("show");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script>
function locationFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("mylist");
filter = input.value.toUpperCase();
table = document.getElementById("show");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script>
function myFunction() {
var input, filter, table, tr, td, i, test;
input = document.getElementById("categorylist");
filter = input.value.toUpperCase();
table = document.getElementById("show");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[2];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1 ) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script>
var list1 = [];
var list2 = [];
var list3 = [];
var list4 = [];
var list5 = [];
var n = 1;
var x = 0;
function AddRow(data1,data2,data3,data4,data5){
var AddRown = document.getElementById('show');
var NewRow = AddRown.insertRow(n);
list1[x] = data1;
list2[x] = data2;
list3[x] = data3;
list4[x] = data4;
list5[x] = data5;
if(list1[x]== "" ||list3[x]== ""||list4[x]== ""||list2[x]== ""||list5[x]==""){
}else{
var cel1 = NewRow.insertCell(0);
var cel2 = NewRow.insertCell(1);
var cel3 = NewRow.insertCell(2);
var cel4 = NewRow.insertCell(3);
var cel5 = NewRow.insertCell(4);
cel1.innerHTML = list1[x];
cel2.innerHTML = list2[x];
cel3.innerHTML = list3[x];
cel4.innerHTML = list4[x];
cel5.innerHTML = list5[x];
n++;
x++;
}
}
async function onPageLoad() {
let data = await fetch("https://db.neelr.dev/api/6912ef27259834e665455b74d2f5ae43");
let internships = await data.json()
Object.values(internships).forEach(v => AddRow(v.name, v.location, v.category,v.link, v.deadline ))
}
onPageLoad()
</script>
</body>
</html>
I present a naive solution.
Remove onchange from both the select and Create a new button and set up an onclick listener on that.
In that listener implementation. You would code combining both
functions (locationFunction and myFunction)
This way you will be checking both filters together for both the select elements and on a single click
For instance the current condition
if (txtValue.toUpperCase().indexOf(filter) > -1)
would become
if (txtValue1.toUpperCase() === filter1 && txtValue2.toUpperCase() === filter1)
P.S You need to combine such that the matching condition would check for filter1 and filter2 together.
I want to auto populate table based on the drop-down selection using javascript and input must be from array.
Maybe like this:
function chsnge_my_select(){
var select = document.getElementById('my_select');
var cell1_text = select.options[select.selectedIndex].value;
var cell2_text = select.options[select.selectedIndex].text;
var data_arr = [cell1_text, cell2_text];
add_to_my_tbl(data_arr);
}
function add_to_my_tbl(_arr){
if(!_arr[0] || !_arr[1]){
return false;
}
var table=document.getElementById('my_tbl');
var row = document.createElement('tr');
var cell1 = document.createElement('td');
var cell2 = document.createElement('td');
cell1.innerHTML = _arr[0];
cell2.innerHTML = _arr[1];
row.appendChild(cell1);
row.appendChild(cell2);
table.appendChild(row);
}
document.getElementById('my_select').addEventListener('change', chsnge_my_select, false);
<select id="my_select">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<table id="my_tbl" width="100%" border="1">
<tr>
<td>id</td>
<td>name</td>
</tr>
</table>
I have a table where in I dynamically add rows with controls using javascript.
My problem is these controls are linked to CSS linked class.
<div id="DataTable">
<INPUT type="button" value="Add Row" onclick="addNewRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteSelectRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD></TD>
<TD>Name</TD>
<TD>Country</TD>
<TD>Security</TD>
</TR>
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD><INPUT type="text" name="txt"/></TD>
<TD>
<SELECT name="country">
<OPTION value="in">Greece</OPTION>
<OPTION value="de">Germany</OPTION>
<OPTION value="fr">India</OPTION>
<OPTION value="us">United States</OPTION>
<OPTION value="ch">France</OPTION>
</SELECT>
</TD>
<td>
<Select name="secName2" class="chosen-select" data-placeholder="Select Security(s)">
<option value="000"></option>
<%sQuery = "Select sID,SecurityName from SecurityMast where Active = 1 order by SecurityName"
Set oRS = oConn.Execute (sQuery)
if Not (oRS.EOF and oRS.BOF) then%>
<%Do While Not oRS.EOF%>
<option value="<%Response.Write(oRS(0))%>"
<%if sID=oRS(0) then Response.write "Selected"%>> <%Response.Write(oRS(1))%></option>
<%oRS.MoveNext
Loop%>
<%end if
oRS.Close%>
</select>
</td>
</TR>
</TABLE>
</div>
and my javascript looks liks this
function addNewRow(tID) {
var table = document.getElementById(tID);
var roCount = table.rows.length;
var ro = table.insertRow(roCount);
var coCount = table.rows[1].cells.length;
for(var i=0; i<coCount; i++) {
var newcell = ro.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
ok so now my problem is ...
when the user clicks add row we have a new row, but the drop down "SecName2" does not have the effects of class="chosen-select".
Is there anything that can be done about it.
What's special about class MySelect. Well besides the cosmetic matter there is a search box that helps to search for anything anywhere in the select list. Not just the starting characters which is default.
Appreciate your time and help
Vin
Edit:
I used the open source from http://harvesthq.github.io/chosen/ for the select.
there is a script section at the end ...
<script type="text/javascript" src="Scripts/chosen.jquery.js"></script>
<script type="text/javascript"> $(".chosen-select").chosen(); $(".chosen-select-deselect").chosen({allow_single_deselect:true}); </script>
I have a dropdown list on each cell of table row. Now what I need is dynamically add more dropdownlist on a particular cells with pressing the add button. Any code snippet to help on this? Thank you.
Below is the codes. I have tried function addSubRow2 but this is very static and I cant move further because beside each combo box I also need a text box and how give each of them an unique id so that later I can identify during validation and submission into php page?
<html>
<head>
<script language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
newcell.innerHTML = newcell.innerHTML +"<br> TEST";
//alert(newcell.childNodes[2].type);
/*switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
newcell.childNodes[0].id = "input" + rowCount;
break;
case "checkbox":
newcell.childNodes[0].checked = false;
newcell.childNodes[0].id = "checkbox" + rowCount;
break;
case "select-one":
newcell.childNodes[1].selectedIndex = 0;
newcell.childNodes[1].id = "col_" + rowCount+"_2";
break;
}*/
/*if(newcell.childNodes[0].type=="button")
{
alert("TEST");
newcell.childNodes[0].id=rowCount;
}*/
}
/*var table = document.getElementById(tableID);
var rows = table.getElementsByTagName('tr');
for (var i = 0, row; row = table.rows[i]; i++) {
row.id="row"+i;
row.name="row"+i;
var rowName = "row"+i;
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j++) {
//iterate through columns
//columns would be accessed using the "col" variable assigned in the for loop
col.id="col_"+i+"_"+j;
col.name="col_"+i+"_"+j;
var cels = rows[i].getElementsByTagName('td')[j];
var realKids = 0,count = 0;
kids = cels.childNodes.length;
while(count < kids){
if(cels.childNodes[i].nodeType != 3){
realKids++;
}
count++;
}
///alert("I : "+i+" "+"J : "+j+" "+"realKids :"+cels.childElementCount);
//alert();
for(var k=0 ; k<cels.childElementCount ; k++)
{
alert("J :"+j+" "+"K :"+k+" "+cels.childNodes[k].type);
}
}
}*/
}
function addSubRow2(cell){
var dropdown = "<SELECT class=\"select\" name=\"country\">\n" +
"<OPTION value=\"1\">Serial 1<\/OPTION>\n" +
"<OPTION value=\"2\">Serial 2<\/OPTION>\n" +
"<OPTION value=\"3\">Serial 3<\/OPTION>\n" +
"<OPTION value=\"4\">Serial 4<\/OPTION>" +
"<OPTION value=\"5\">Serial 5<\/OPTION>" +
"<\/SELECT>";
//var dropdown = document.getElementById("dataTable").rows[0].cells[2].childNodes[1].cloneNode(true);
cell.innerHTML += "<br\/ >" + dropdown;
}
/*alert("COLD ID : "+colID);
var tdID = document.getElementById(colID);
var table = document.getElementById(tableID);
var new_comboBox = table.rows[0].cells[2].childNodes[2].cloneNode(true);
tdID.appendChild(new_comboBox);*/
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
var table = document.getElementById(tableID);
for (var i = 0, row; row = table.rows[i]; i++) {
row.id="row"+i;
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j++) {
//iterate through columns
//columns would be accessed using the "col" variable assigned in the for loop
//alert("J : "+j);
col.id="col"+i;
if(j==0)
{
}
else if(j==1)
{
}
}
}
}catch(e) {
alert(e);
}
}
</script>
</head>
<body>
Begin Location : <select class='select' id="beginLocation" name="beginLocation">
<option value="1">Loc 1</option>
<option value="2">Loc 2</option>
<option value="3">Loc 3</option>
<option value="4">Loc 4</option>
<option value="5">Loc 5</option>
</select>
<p type="text" class=error id='beginLocation_Error'>
<br\>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<table id="dataTable" width="350px" border="1">
<tr>
<th></th>
<th>Client</th>
<th>Location</th>
<th>Serial</th>
</tr>
<tr>
<td id="col_0_0"><input type="checkbox" name="chk"/></td>
<td id="col_0_1">
<select class='select' id="client1" name="client1">
<option value="1">Client 1</option>
<option value="2">Client 2</option>
<option value="3">Client 3</option>
<option value="4">Client 4</option>
<option value="5">Client 5</option>
</select><p type="text" class=error id='client_0_Error'>
</td>
<td id="col_0_1">
<select class='select' id="location1" name="location1">
<option value="1">Loc 1</option>
<option value="2">Loc 2</option>
<option value="3">Loc 3</option>
<option value="4">Loc 4</option>
<option value="5">Loc 5</option>
</select>
<p type="text" class=error id='beginLocation_Error'>
</td>
<td id="col_0_3">
<input type="button" value="Add Serial" onclick="addSubRow2(this.parentNode);" />
<br\>
<select class='select' id="serial_0_1" name="serial_0_1">
<option value="1">Serial 1</option>
<option value="2">Serial 2</option>
<option value="3">Serial 3</option>
<option value="4">Serial 4</option>
<option value="5">Serial 5</option>
</select><input type="text" name=txtLoc" id="txtLoc><p type="text" class=error id='serial_0_1_Error'>
</td>
</tr>
</table>
</body>
</html>
Try this - DEMO
JS
var i = 0;
var option;
document.getElementById("add").addEventListener("click", addSelect, false);
function addSelect() {
var select = document.createElement("select");
select.setAttribute("name", "mySelect" + i);
select.setAttribute("id", "mySelect" + i);
option = document.createElement("option");
option.setAttribute("value", "value one");
option.innerHTML = "ONE";
select.appendChild(option);
option = document.createElement("option");
option.setAttribute("value", "value two");
option.innerHTML = "TWO";
select.appendChild(option);
document.getElementById("wrapper").appendChild(select);
i++;
}
I would really appreciate if someone could help me. for two days I've tried to figure this out alone but its not working.
I'm writing a shopping list to my project at school. I have a table (shopinglist) that contains the form.
In the form I have 2 drop down lisst, one (product) is getting the values from my database and the second one (quantity) is constant numners. Next to these two I have 2 buttons add and remove.
When pressing add I want to add a new row with the same stuff.
The problem is that I can't (or maybe don't know how to) change the select name according to the row number. I mean like
One last thing- the row will be added only if the user choose from both selection, not only from one.
here is my code: the javascript add and remove functions:
function addRow(tableID) {
if (document.getElementById("product").value!="dafult" && document.getElementById("quantity").value!="zero")
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
var colCount = table.rows[0].cells.length;
for(var i=0; i<=colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
switch(newcell.childNodes[1].type) {
case "text":
newcell.childNodes[1].value = "";
break;
case "checkbox":
newcell.childNodes[1].checked = false;
break;
case "select-one":
newcell.childNodes[1].selectedIndex = 0;
break;
}
}
newcell.childNodes[1].visible = true;
table.rows[rowCount-1].cells[2].style.visibility="hidden" ;
}
else
{
if (document.getElementById("product").value!="dafult" && document.getElementById("quantity").value=="zero")
alert("please choose quantity") ;
if (document.getElementById("product").value=="dafult" && document.getElementById("quantity").value!="zero")
alert("please choose product") ;
if (document.getElementById("product").value=="dafult" && document.getElementById("quantity").value=="zero")
alert("please choose product and qantity") ;
}
}
function deleteRow(i){
if (document.getElementById("product").value!="dafult" && document.getElementById("quantity").value!="zero")
document.getElementById('shopinglist').deleteRow(i)
else
alert("you can't delete row before adding it");
}
and the HTML and ASP
<table border="0" id="shopinglist">
<caption valign="top" style="width:90%;height:35px; color:green ;"/> your order
<tr><td></td><td> product</td> <td> quantity</td></tr>
<tr>
<form name="juices">
<%
set rs=Server.CreateObject("ADODB.recordset")
rs.open "SELECT ID, [Product-Name] ,[size-liter],[Customer price] FROM Product GROUP BY ID,[Product-Name] ,[Product].[size-liter],[Product].[Customer price] ", conn
%>
<td>
<select name="product" id="product" width="10" >
<option value="dafult" selected>בחר מוצר מהרשימה</option>
<%
do while not rs.EOF %>
<option value=<%=rs("Product-Name")%> > juice<%=rs("Product-Name")%> <%=rs("size-liter")%> liter<%=rs("Customer price")%> $</option>
<%
rs.MoveNext()
loop
rs.close %>
</select>
</td>
<td>
<select name="quantity" id="quantity">
<option value="zero" selected="selected">0</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
<option value="six">6</option>
<option value="seven">7</option>
<option value="eight">8</option>
<option value="nine">9</option>
<option value="ten">10</option>
</select>
</td>
<td>
<input type="button" value="add" onclick="addRow('shopinglist')" id="addbutton"/>
</td>
<td>
<input type="button" value="delete"onclick="deleteRow(this.parentNode.parentNode.rowIndex)" id="remove"/>
</td>
</tr>
</form>
IE will not let you change the name of an element after you add it to the page. The way this is written, you would have to actually alter the string containing the select before setting innerHTML
newcell.innerHTML = table.rows[1].cells[i].innerHTML.replace(/(\<select.+?name=".+?)"/, $1 + rowCount + i + "\"");
NOT TESTED... something like that...
Here is an example https://gist.github.com/957827 that you could start with. It is radically different but simpler than yours.
I don't have a IE6,7,8 to test it properly but it should be something like the example.
One more comment, id's must be unique. And you shouldn't use them on a row of a table that you will copy.