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.
Related
I have a table with three columns, normally populated from a SQL database. I'd like to filter the third column based on the value selected from a dropdown menu. I found a W3 Schools tutorial and used it as a blueprint. However I can't get it to work:
<!DOCTYPE html>
<html>
<script>
function filterSector() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("sector");
filter = input.value;
table = document.getElementById("portfolio");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[2];
if (td) {
txtValue = td.value;
if (txtValue.indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<body>
<select id="sector" onkeyup="filterSector()">
<option selected disabled hidden>Sectors</option>
<option value="Industrials">Industrials</option>
<option value="Information Technology">Information Technology</option>
</select>
<table id="portfolio">
<tr>
<td>AAPL</td>
<td>Apple</td>
<td>Information Technology</td>
</tr>
<tr>
<td>MMM</td>
<td>3M</td>
<td>Industrials</td>
</tr>
</body>
</html>
The onkeyup event occurs when the user releases a key (on the keyboard).
Use onchange instead.
<select id="sector" onchange="filterSector()">
<option selected disabled hidden>Sectors</option>
<option value="Industrials">Industrials</option>
<option value="Information Technology">Information Technology</option>
</select>
Your filter Sector function has a problem with this line below.
txtValue = td.value;
td.value is undefined. Then you can use td.innerText to solve this.
txtValue = td.innerText;
Final solution. I hope I've helped.
<!DOCTYPE html>
<html>
<script>
function filterSector() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("sector");
filter = input.value;
table = document.getElementById("portfolio");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[2];
if (td) {
txtValue = td.innerText;
if (txtValue.indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<body>
<select id="sector" onchange="filterSector()">
<option selected disabled hidden>Sectors</option>
<option value="Industrials">Industrials</option>
<option value="Information Technology">Information Technology</option>
</select>
<table id="portfolio">
<tr>
<td>AAPL</td>
<td>Apple</td>
<td>Information Technology</td>
</tr>
<tr>
<td>MMM</td>
<td>3M</td>
<td>Industrials</td>
</tr>
</body>
</html>
In the script replace txtValue = td.value; with txtValue = td.innerText;
This will extract the td value and then you can compare
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 the following code which creates two multiple selects that use js to move values between each other. The code as it is below functions but I wish to use the POST data values for the items in the select. I wish to change to so that I can get the array of values of post in PHP but when I change it to an array[] it doesn't function moving the values between the two select boxes.
<html>
<body>
<script>
function SelectMoveRows(SS1,SS2)
{
var SelID='';
var SelText='';
// Move rows from SS1 to SS2 from bottom to top
for (i=SS1.options.length - 1; i>=0; i--)
{
if (SS1.options[i].selected == true)
{
SelID=SS1.options[i].value;
SelText=SS1.options[i].text;
var newRow = new Option(SelText,SelID);
SS2.options[SS2.length]=newRow;
SS1.options[i]=null;
}
}
SelectSort(SS2);
}
function SelectSort(SelList)
{
var ID='';
var Text='';
for (x=0; x < SelList.length - 1; x++)
{
for (y=x + 1; y < SelList.length; y++)
{
if (SelList[x].text > SelList[y].text)
{
// Swap rows
ID=SelList[x].value;
Text=SelList[x].text;
SelList[x].value=SelList[y].value;
SelList[x].text=SelList[y].text;
SelList[y].value=ID;
SelList[y].text=Text;
}
}
}
}
</script>
<form name="example" method=post action=test.php >
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>
<select multiple name="left" size="9">
<option value="1">Row 1</option>
<option value="2">Row 2</option>
<option value="3">Row 3</option>
<option value="4">Row 4</option>
<option value="5">Row 5</option>
</select>
</td>
<td align="center" valign="middle">
<input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.example.left,document.example.right)"><br>
<br>
<input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.example.right,document.example.left)">
</td>
<td>
<select multiple name="right" size="9">
</select>
</td>
</tr>
</table>
<br><input type='submit' value='Submit'>
</form>
</body>
</html>
If you change it to name="left[]" then you have to change document.example.left to document.example['left[]'] to match it.
function SelectMoveRows(SS1, SS2) {
var SelID = '';
var SelText = '';
// Move rows from SS1 to SS2 from bottom to top
for (i = SS1.options.length - 1; i >= 0; i--) {
if (SS1.options[i].selected == true) {
SelID = SS1.options[i].value;
SelText = SS1.options[i].text;
var newRow = new Option(SelText, SelID);
SS2.options[SS2.length] = newRow;
SS1.options[i] = null;
}
}
SelectSort(SS2);
}
function SelectSort(SelList) {
var ID = '';
var Text = '';
for (x = 0; x < SelList.length - 1; x++) {
for (y = x + 1; y < SelList.length; y++) {
if (SelList[x].text > SelList[y].text) {
// Swap rows
ID = SelList[x].value;
Text = SelList[x].text;
SelList[x].value = SelList[y].value;
SelList[x].text = SelList[y].text;
SelList[y].value = ID;
SelList[y].text = Text;
}
}
}
}
<form name="example" method=post action=test.php>
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>
<select multiple name="left[]" size="9">
<option value="1">Row 1</option>
<option value="2">Row 2</option>
<option value="3">Row 3</option>
<option value="4">Row 4</option>
<option value="5">Row 5</option>
</select>
</td>
<td align="center" valign="middle">
<input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.example['left[]'],document.example['right[]'])"><br>
<br>
<input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.example['right[]'],document.example['left[]'])">
</td>
<td>
<select multiple name="right[]" size="9">
</select>
</td>
</tr>
</table>
<br><input type='submit' value='Submit'>
</form>
You could also give them IDs, and then use document.getElementById().
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>
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.