I am working on an "advanced search" feature for my website. I have ran into a road block with javascript that I am trying to overcome, so any help would be greatly appreciated.
Once the user starts to input information in any input field in the <div class='bottom'> section, I want to send a JSON object to the page "SQL.php" with the values of the inputs so the SQL.php page can use PHP to process this JSON data.
Some examples:
- The
assignStatusview would send data like {"assID":130, "status":"graded"} - The
assignScoreview would send data like {"operator":"=", "number":10, "type":"points" "assID":145} - The
attendanceview would send data like {"status":"graded", "date":"2021-11-13"}
I have successfully passed along strings using GET, but I decided to use JSON for the other data since each 'view' requires different amounts of data to execute a search (IE: assignStatus requires 2 pieces of data and assignScore requires 4 pieces of data).
How should I go about making this work?
var results = document.getElementById("results");
function search(str){
var group = document.getElementById("group").value;
var classs = document.getElementById("class").value;
var view = document.getElementById("view").value;
fetch("SQL.php?group=" + group + "&class=" + classs + "&view=" + view).then((response) =>response.text()).then((text) => {
var parser = new DOMParser();
var doc = parser.parseFromString(text, "text/html");
var ele = doc.documentElement;
var scripts = ele.getElementsByTagName('script');
for(var script of scripts){
var head = document.getElementsByTagName('head')[0];
var scriptElement = document.createElement('script');
scriptElement.setAttribute('type', 'text/javascript');
scriptElement.innerText = script.innerText;
head.appendChild(scriptElement);
head.removeChild(scriptElement);
}
document.getElementById("results").innerHTML=text;
});
}
function nav(arg) {
var destination = arg.value;
var pages = document.querySelectorAll("[data-page]");
for (i = 0; i < pages.length; i++) { // Hide/show the correct pages
if (pages[i].dataset.page != destination) {
pages[i].hidden = true;
} else {
pages[i].hidden = false;
}
}
}<html>
<head>
<title>Advanced Search</title>
</head>
<body>
<div class='top'>
Select <select id='group' name='group' onchange='search();'>
<option value='all'>all students</option>
<option value='random'>one random student</option>
</select>
from
<select id='class' name='class' onchange='search();'>
<option value='all'>all classes</option>
<option value='1'> Reading/Social</option>
<option value='2'> Reading/Social</option>
<option value='3'> Reading/Social</option>
<option value='4'> Reading/Social</option>
</select>
based on <select id='view' name='view' onchange='nav(this); search();'>
<option value='' disabled selected>-- select option --</option>
<option value='assignStatus'>assignment completion</option>
<option value='assignScore'>assignment score</option>
<option value='attendance'>attendance by day</option>
<option value='statSubject'>subject performance</option>
<option value='statOther'>other statistic</option>
</select>.
</div>
<div class='bottom'>
<div class='assignStatus' data-page='assignStatus' hidden>
Whose assignment
<select name='assID'>
<option value='130'> BOTR Questions 13/14</option>
<option value='145'> Flocab: Text Structure</option>
</select>
is
<select name='status'>
<option selected disabled>--Select--</option>
<option value='submitted'>submitted</option>
<option value='unsubmitted'>not submitted</option>
<option value='graded'>graded</option>
<option value='unassigned'>not assigned</option>
</select>.
</div>
<div class='assignScore' data-page='assignScore' hidden>
Who scored
<select name='operator'>
<option value='<'>less than</option>
<option value='>'>greater than</option>
<option value='='>equal to</option>
</select>
<input type='number'>
<select name='type'>
<option value='percent'>percent</option>
<option value='points'>points</option>
</select>
on the
<select name='assID'>
<option value='130'> BOTR Questions 13/14</option>
<option value='145'> Flocab: Text Structure</option>
</select>
assignment.
</div>
<div class='attendance' data-page='attendance' hidden>
Where student was
<select name='status'>
<option value='absent'>absent</option>
<option value='present'>present</option>
<option value='quarantined'>quarantined</option>
</select>
on
<input type='date' name='date'>.
</div>
<div class='statSubject' data-page='statSubject' hidden>
Where student's
<select name='stat'>
<option value='overallAvg'>overall score average</option>
<option value='assignComplete'>assignment completion</option>
<option value='latework'>late work percentage</option>
</select>
in
<select name='subID'>
<option value='1'>Reading</option>
<option value='2'>Social Studies</option>
</select>
is
<select name='operator'>
<option value='<'>less than</option>
<option value='>'>greater than</option>
<option value='='>equal to</option>
</select>
<input type='number'>
%
</div>
<div class='statOther' data-page='statOther' hidden>
Where student's
<select name='stat'>
<option value='streak'>streak</option>
<option value='balance'>balance</option>
<option value='level'>level</option>
<option value='days'>days attended</option>
</select>
is
<select name='operator'>
<option value='<'>less than</option>
<option value='>'>greater than</option>
<option value='='>equal to</option>
</select>
<input type='number'>.
</div>
</div>
<hr>
<div id='results'></div>
</body>
</html>