Javascript Change Request
I hope someone can help me with a little question.
I have the following code to change the entries in a combo box depending on what is selected in the previous box.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Representation of AJAX</title>
<script type="text/javascript">
function update(str)
{
var xmlhttp;
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("data").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","demo.php?opt="+str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<select id="optionA" onchange="update(this.value)">
<option value="0">Select...</option>
<option value="1">Option1</option>
<option value="2">Option2</option>
</select>
<br/>
<select id="data">
<option>Select an Option...</option>
</select>
</body>
</html>
AND
<?php
$opt = $_GET['opt'];
switch($opt)
{
case 0:
default:
echo '
<option>Select an Option...</option>
';
break;
case 1:
echo '
<option value="opt1_1">Option1_Test1</option>
<option value="opt1_2">Option1_Test2</option>
<option value="opt1_3">Option1_Test3</option>
';
break;
case 2:
echo '
<option value="opt2_1">Option2_Test1</option>
<option value="opt2_2">Option2_Test2</option>
<option value="opt2_3">Option2_Test3</option>
';
break;
}
?>
I'm not very familiar with Javascript, so I was wondering if the javascript (the second piece of code I can solve on my own) can be changed to do what is described below.
Box 1 contains a series of images that serve as links, when one is clicked, the second block below these images is filled with more links to the image based on the selection from window 1 (information is grabbed from the database).
I suppose from my limited understanding that I should be able to change the onchange event to a js onclick event or whatever is equivalent (can't remember from my head) an event inside an "img" tag, or an 'a href' tag. again don't remember what right now.
Hope someone understands what I am trying to do and understand all of this :)
Thanks to TheMightySpud
source to share
This is an example of what you might want, some images related to the ajax call. Replace the following code with the first code and run it.
<html>
<head>
<title>Representation of AJAX</title>
<script type="text/javascript">
function update(str)
{
var xmlhttp;
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("data").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","demo.php?opt="+str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<table>
<tr>
<td>
<img src="http://bestinspired.com/wp-content/uploads/2015/03/Beautiful-nature-26-825x510.jpg"
onclick="update(1)" width="100" height="100"/>
</td>
<td>
<img src="http://bestinspired.com/wp-content/uploads/2015/03/121nature.jpg"
onclick="update(2)" width="100" height="100"/>
</td>
<td>
<img src="http://bestinspired.com/wp-content/uploads/2015/03/Natural-Wallpaper-10.jpg"
onclick="update(3)" width="100" height="100"/>
</td>
</tr>
</table>
<select id="data">
<option>Select an Option...</option>
</select>
</body>
</html>
source to share