We Keep Coding

HTML form input dependent on previous form input with javascript and php, not working

I have been trying to create some select inputs that depend on the previous input in an html form using HTML Javascript PHP and MYSQL. This has worked with one of my previous pages, and so when creating this new one I just defined a new function in the javascript file and created a new php file to send data to as I wanted to output something different for the last select box in the form.
Even though I mirrored the previous function and php file changing only a few minor details, I am not able to see any of my created options for the last dropdown select and I dont seem to be getting any errors practically a blank php page with no errors is getting passed through, and I am not sure why this is happening.
Here is a screenshot of my form and you can see the 'Rack Unit Location' option does not create any options and is blank yeth the other select boxes work fine:
Form Screenshot
This is the section of my HTML form, so I want Rack Unit Location to depend on Rack Number, which depends on Location and in turn depends on Rack.
<tr>
<th>Rack </th>
<script src='includes/Jquery/default.js'></script> <!-- Link to new Javascript file -->
<td>
<select id='rack_name' name="rack_name" onchange="window.loadLocation()">
<option disabled="disabled" selected="selected">Rack Name</option>
<?php
$r = mysqli_query($conn, "SHOW TABLES WHERE Tables_in_network Like 'rack%'");
while($row=mysqli_fetch_assoc($r)){
echo "<option value=".$row['Tables_in_network'].">".$row['Tables_in_network']."</option>";
}
?>
<option value="no_rack">Not in Rack</option>
</select>
</td>
</tr>
<tr>
<th>Location</th>
<td>
<select id="location" name="location" onchange="window.selectrack()">
<option disabled="disabled" selected="selected">Location</option>
</select>
</td>
</tr>
<tr>
<th>Rack Number</th>
<td>
<select id="rackno" name="rackno" onchange="window.selectpduunit()">
<option disabled="disabled" selected="selected">Rack Number</option>
</select>
</td>
</tr>
<tr>
<th>Rack Unit Location</th>
<td>
<select name="rackunit" id="rackunits">
<option disabled="disabled" selected="selected">Rack Unit Number</option>
</select>
</td>
</tr>
Those onchange functions are defined in the following Javascript file:
function loadLocation(){
var formName = 'switch';
var rackname = document[formName]['rack_name'].value;
var xmlhttp = null;
if(typeof XMLHttpRequest != 'udefined'){
xmlhttp = new XMLHttpRequest();
}else if(typeof ActiveXObject != 'undefined'){
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}else{
throw new Error('You browser doesn\'t support ajax');
}
xmlhttp.open('GET', 'load_location.php?rack='+rackname, true);
xmlhttp.onreadystatechange = function (){
if(xmlhttp.readyState == 4)
window.insertLocation(xmlhttp);
};
xmlhttp.send(null);
}
function insertLocation(xhr){
if(xhr.status == 200){
document.getElementById('location').innerHTML = xhr.responseText;
}else{
throw new Error('Server has encountered an error\n'+'Error code = '+xhr.status);
}
}
function selectrack(){
var formName = 'switch';
var rackname = document[formName]['rack_name'].value;
var location = document[formName]['location'].value;
var xmlhttp = null;
if(typeof XMLHttpRequest != 'undefined'){
xmlhttp = new XMLHttpRequest();
}else if(typeof ActiveXObject != 'undefined'){
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}else {
throw new Error('You browser doesn\'t support ajax');
}
xmlhttp.open('GET', 'select_rack_number.php?location='+location+'& rack='+rackname, true);
xmlhttp.onreadystatechange = function (){
if(xmlhttp.readyState == 4)
window.insertrackno(xmlhttp);
};
xmlhttp.send(null);
}
function insertrackno(xhr){
if(xhr.status == 200){
document.getElementById('rackno').innerHTML = xhr.responseText;
}else{
throw new Error('Server has encountered an error\n'+'Error code = '+xhr.status);
}
}
function selectrackunit(){
var formName = 'switch';
var rackname = document[formName]['rack_name'].value;
var location = document[formName]['location'].value;
var rackno = document[formName]['rackno'].value;
var xmlhttp = null;
if(typeof XMLHttpRequest != 'udefined'){
xmlhttp = new XMLHttpRequest();
}else if(typeof ActiveXObject != 'undefined'){
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}else{
throw new Error('You browser doesn\'t support ajax');
}
xmlhttp.open('GET', 'select_rack_unit.php?location='+location+'&rack='+rackname+'&rackno='+rackno, true);
xmlhttp.onreadystatechange = function (){
if(xmlhttp.readyState == 4)
window.insertrackunit(xmlhttp);
};
xmlhttp.send(null);
}
function selectpduunit(){
var formName = 'switch';
var rackname = document[formName]['rack_name'].value;
var location = document[formName]['location'].value;
var rackno = document[formName]['rackno'].value;
var xmlhttp = null;
if(typeof XMLHttpRequest != 'udefined'){
xmlhttp = new XMLHttpRequest();
}else if(typeof ActiveXObject != 'undefined'){
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}else{
throw new Error('You browser doesn\'t support ajax');
}
xmlhttp.open('GET', 'select_pdu_unit.php?location='+location+'&rack='+rackname+'&rackno='+rackno, true);
xmlhttp.onreadystatechange = function (){
if(xmlhttp.readyState == 4)
window.insertpduunit(xmlhttp);
};
xmlhttp.send(null);
}
function insertrackunit(xhr){
if(xhr.status == 200){
document.getElementById('rackunits').innerHTML = xhr.responseText;
}else{
throw new Error('Server has encountered an error\n'+'Error code = '+xhr.status);
}
}
function insertpduunit(xhr){
if(xhr.status == 200){
document.getElementById('rackunits').innerHTML = xhr.responseText;
}else{
throw new Error('Server has encountered an error\n'+'Error code = '+xhr.status);
}
}
And here is the code in the php file that doesn not seem to be working for the selectpduunit function:
<?php
require 'includes/opendb.php';
if(isset($_GET['location']) && ($_GET['rack']) && ($_GET['rackno']) )
{
$b = $_GET['location'];
$e = $_GET['rack'];
$d = $_GET['rackno'];
$first_unit='1';
$explode=explode('-',$e);
$last_unit=$explode[1];
var_dump($b);
var_dump($e);
var_dump($d);
var_dump($explode);
while($first_unit<='4'){ //While Loop creates port columns in new table for each port on PDU.
if('10' > $count){
$column [] = '`PDU-0'.$first_unit.'`,'; //Storing port number as string in array."`port-0".$count."` varchar (255) NOT NULL";
}else{
$column [] = '`'.'PDU-'.$first_unit.'`'.',';
}
++$first_unit;
}
$empty = '';
foreach($column as $c){
$empty = $empty.$c;
}
//$empty = rtrim($empty2, ",");
$select="SELECT $empty FROM `$e` WHERE location = '$b' AND `Rack-Number` = '$d'";
var_dump($select); // Outputs the above generated MySQL string
if(!mysqli_query($conn,$select)){
die("Error".mysqli_error($conn));
}else{
$r = mysqli_query($conn,$select);
}
$unit_1 = '1';
while ('4' >= $unit_1){
if($unit_1 <'10'){
$column1[] ='PDU-'.'0'.$unit_1;
} else{
$column1[] ='PDU-'.$unit_1;
}
++$unit_1;
}
//var_dump($column1); // Outputs the above generated strings. The string should be column names.
$rackunit ='';
while($row = mysqli_fetch_assoc($r)) {
if($e == 'no_rack' || $e == 'vm_rack'){
//$rackunit =$rackunit.'<option value="'.$row["Unit"].','."Unit".'">'.'('."Unit".')'.' '.$row["Unit"].'</option>';
echo "fail";
}else{
foreach($column1 as $c1){
$rackunit =$rackunit.'<option value="'.$row["$c1"].','.$c1.'">'.'('.$c1.')'.' '.$row["$c1"].'</option>';
}
}
}
var_dump($rackunit);
if($rackunit == '')
echo 'An Error has occurred. Dropdown Menu is not being populated.';
else
?>
<select name="rackunit" id="rackunit">
<option disabled="disabled" selected="selected">Rack Unit Number</option>
<?php echo $rackunit ?>
<option value="1">Test</option>
</select>
<?php
}
?>
Any idea what the issue is?

There is a typo in your code. In method selectpduunit as well as selectrackunit
if(typeof XMLHttpRequest != 'udefined'){
It should be instead
if(typeof XMLHttpRequest != 'undefined'){
May be because of that you are not able to create a new XMLHttpRequest object. Give it a try.

Select form item has undefined value

I have read a little about hoisting, but I am not sure how it applies in this situation. I have a select value that is shown and hidden dynamically and the value of this select element is always undefined. Please help! Thanks
HTML
<tr>
<td>Type:</td>
<td>
<select id="type" onchange="rulesShown()">
<option value="ATC">ATC</option>
<option value="PILOT">PILOT</option>
<select>
</td>
</tr>
<tr id="rules">
<td>Rules:</td>
<td>
<select id="rules">
<option value="FAA">FAA</option>
<option value="ICAO">ICAO</option>
<select>
</td>
</tr>
Javascript:
<script>
function rulesShown() {
if(document.getElementById("type").value=="ATC"){
document.getElementById("rules").style.display = "";
document.getElementById("rules").style.removeProperty( 'display' );
}
else{
document.getElementById("rules").style.display = "none";
}
}
function verifyData() {
var email1 = document.getElementById("email1");
var email2 = document.getElementById("email2");
var comments = document.getElementById("comments").value;
if(comments!=""){
if(email2==null){
//submit form
submit();
}
else if (/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email1.value)){
if(email1.value == email2.value) {
//submit form
submit();
}
else {
//emails dont match
alert('Email addresses do not match!');
}
}
else{
//invalid email address
alert('Please enter a valid email address!');
}
}
else{
alert('Please enter some comments!');
}
}
function submit(){
var vid = <?php echo $user['vid'] ?>;
var email = document.getElementById("email1").value;
var type = document.getElementById("type").value;
var rules = document.getElementById("rules").value;
var comments = document.getElementById("comments").value;
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("page").innerHTML = xhttp.responseText;
}
}
xhttp.open("POST", "/content/training/request/submit.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("vid="+vid+"&email="+email+"&type="+type+"&rules="+rules+"&comments="+comments);
}
</script>
No need for the file the AJAX is calling. It simply POST's the 'rules'. As far as I can tell this is a javascript hoisting problem, but I don't know why. Thanks

This has nothing to do with hoisting which is pure javascript concept. You have two elements with same id. A <tr> and a <select>. Which is forbidden by html. One of the implications of this is that browser doesn't guarantee which element will be returned by getElementById()

ajax call can't retrieve data from database

i am new to ajax.Here i am trying to retrieve data from mysql database.But all i am getting here is an empty array and a notice saying undefined index q on line 2 .Can't figure out what might be the problem behind this.Any help will be appreciated.Here i am using a database which has three column to each row(id,name,age).
i am having an error .saying i am sending a request to getuser.php.Though my page name is callajax.php.From where this getuser.php coming from?It gives me desired output when i changed the file name to getuser.php.I don't understand.why callajax.php wouldn't work?
html:
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","callajax.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">al zami rahman</option>
<option value="4">junayed hasan</option>
<option value="5">tapos alam</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
callajax.php page:
$m=$_GET['q'];
$pdo=new PDO("mysql:host=localhost;dbname=ajax",'root','');
$conn=$pdo->prepare('SELECT age FROM people WHERE id=?');
$conn->bindValue(1,$m);
if($conn->execute()){
$result=$conn->fetchAll();
print_r($result);
}

xmlHttpRequest and manipulating a table?

I currently use a java-script function to load content based on a selection, here is an example of the function
function loadActions2(id,value,title) {
var url = title+"?value="+value;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiceXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
divtarget.innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,false);
xmlhttp.send();
}
This will load a php file, with desired content.
My main site looks like this
<table>
<tr>
<td> Text 1234</td>
<td>
<label onclick"loadActions2('id','value','title')"> Click here</label>
</td>
</tr>
</table>
and the loaded php file contains another table.
Now, im looking for a solution, to add the content of the file directly to the table, so this would mean, my php file would look like this
<tr>
<td>Text 999</td>
</tr>
And should be added directly to the existing table, not in a seperate div/table.
Is this possible?

Assign id to the table, and when request is successful, append HTML to the table:
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("mytable").innerHTML += xmlhttp.responseText;
}
}

As pointed out by user Gothdo, assign an ID to the table tag.
<table id="myTable">
<tr>
<td> Text 1234 </td>
</tr>
<td> <label onclick="loadActions2('id','value','title');"> Click here </label> </td>
</tr>
</table>
then, when the request(s) arrive, you just append the response getting the ID from the table:
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var content = xmlhttp.responseText;
var node = document.createElement("tr");
var textNode = document.createTextNode(content);
node.appendChild(textNode);
document.getElementById("myTable").appendChild(node);
}
}

How to rewrite table using ajax response

I'm trying to re-write table using javascript and ajax. Here request has been sent and response is arrived but innerHTML cannot re-write table content with response text.
Here is my code.
<table>
<tbody id='product1'>
<tr>
<td> Product Name:</td>
<td>P1</td>
</tr>
</tbody>
</table>
Javascript
function compareProd(prodID,tId){
browse();
var url = 'process.jsp';
url += '?compareProd='+prodID;
xmlHttp.onreadystatechange = changeProd(tId);
xmlHttp.open('POST', url, true);
xmlHttp.send(null);
}
function changeProd(tID) {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 'complete') {
document.getElementById('product1').innerHTML = xmlHttp.responseText;
}
}
process.jsp
<tr>
<td> Product Name:</td>
<td>P2</td>
</tr>
here response is arrived but cannot rewrite table.

try it in single function and check like this, on assumption that you initialized xmlHttp request object.
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState==4 && xmlHttp.status==200)
{
document.getElementById('product1').innerHTML = xmlHttp.responseText;
}
};