Hello, I know that we can add select - option dynamically at run time. I am trying to use it with AJAX. Please teach me the steps to add dynamic options to select by using javascript so that I can add it with my ajax code. slimbachiya, www.phpwebs.com www.phpwebs.org
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Any Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> var AdminResponse = ""; function parseResponse(){ var nText = AdminResponse.getElementsByTagName('optionText'); var nVal = AdminResponse.getElementsByTagName('optionVal'); document.forms[0]['group'].options.length = 1; for (i=0; i<nText.length; i++) { var nOption = document.createElement('option'); var isText = document.createTextNode(nText[i].firstChild.data); nOption.setAttribute('value',nVal[i].firstChild.data); nOption.appendChild(isText); document.forms[0]['group'].appendChild(nOption); } } function update(nVal){ var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); AdminRequest.onreadystatechange = function() { if (AdminRequest.readyState == 4) { if (AdminRequest.status == 200) { AdminResponse = AdminRequest.responseXML; parseResponse(); } else { alert('Error Update.php File '+ AdminRequest.statusText); } } } var infoStr = "?choice="+nVal; AdminRequest.open("GET", "Update.php"+infoStr, true); AdminRequest.send(null); } </script> <style type="text/css"> body {background-color:#eae3c6;margin-top:60px} form {width:430px;margin:auto} fieldset {width:410px;background-color:#f0fff0;border:1px solid #87ceeb} legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px} select {font-family;tahoma;font-size:10pt;width:160px;margin-left:35px;margin-bottom:10px} </style> </head> <body> <form action=""> <fieldset> <legend>Form</legend> <select name="foods" onchange="update(this.value)"> <option value=""> Choose a Food </option> <option value="fruit"> Fruit </option> <option value="vegetable"> Vegetable </option> </select> <select name="group" onchange="alert(this.value)"> <option value=""> Make a selection </option> </select> </fieldset> </form> </body> </html> Code (markup): update.php: <?php $choice = $_GET['choice']; $xml = "<?xml version='1.0' ?><options>"; require_once('mySQL_connect.php'); $query = "SELECT * FROM categories WHERE food = '$choice'"; $result = @mysql_query($query); $num = @mysql_num_rows($result); if ($result && $num > 0) { while ($row = mysql_fetch_array($result,MYSQL_ASSOC)) { $xml .= "<optionText>" . $row['optText'] . "</optionText><optionVal>" . $row['optVal'] . "</optionVal>"; } } $xml .= "</options>"; @mysql_free_result($result); @mysql_close(); header("Content-Type: text/xml"); echo $xml; ?> Code (markup): Table Schema: Table name: categories +---------+------------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +---------+------------------+------+-----+---------+----------------+ | entry | int(10) unsigned | NO | PRI | NULL | auto_increment | | food | varchar(45) | NO | | | | | optText | varchar(45) | NO | | | | | optVal | varchar(45) | NO | | | | +---------+------------------+------+-----+---------+----------------+ +-------+-----------+---------+--------+ | entry | food | optText | optVal | +-------+-----------+---------+--------+ | 1 | fruit | Apple | f1 | | 2 | fruit | Banana | f2 | | 3 | fruit | Orange | f3 | | 4 | vegetable | Celery | v1 | | 5 | vegetable | Onion | v2 | | 6 | vegetable | Lettuce | v3 | +-------+-----------+---------+--------+ Code (markup):
Great ! Thanks a lot Mr. Mike H. for providing me the source code. Thank you very much. It will help me alot. PHPWEBS, www.phpwebs.com www.phpwebs.org