i'm hoping can me out little question.
i have following code change combo box entries based on selected in 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 ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); } else {// code 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 option...</option> </select> </body> </html> and
<?php $opt = $_get['opt']; switch($opt) { case 0: default: echo ' <option>select 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 massively conversant javascript wondering if possible modify javascript (the second chunk of code can deal myself think) described below.
box 1 contains row of images, serving links, when 1 clicked, second box below these images populated more image links based on selection box 1 (information grabbed database).
i imagine limited understanding should able modify 'onchange' js event onclick or whatever equivalent (can't remember off top of head) event inside 'img' tag, or 'a href' tag, again can't remember right now.
hopefully understand i'm trying , make sense of :)
thanks themightyspud
this example of might want, it's images linked ajax call. replace next code first code , run it.
<html> <head> <title>representation of ajax</title> <script type="text/javascript"> function update(str) { var xmlhttp; if (window.xmlhttprequest) {// code ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); } else {// code 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 option...</option> </select> </body> </html> 
Comments
Post a Comment