php - Retrieve HTML drop down list value with AJAX -
i have html dropdown list i'm populating database. question how can retrieve value of selected item dropdown list using ajax? javascript:
<script type = "text/javascript"> function getdata(str){ var xhr = false; if (window.xmlhttprequest) { xhr = new xmlhttprequest(); } else { xhr = new activexobject("microsoft.xmlhttp"); } if (xhr) { xhr.onreadystatechange = function () { if (xhr.readystate == 4 && xhr.status == 200) { document.getelementbyid("div1").innerhtml = xhr.responsetext; } } xhr.open("get", "/display-product.php?q="+str, true); xhr.send(null); } } </script> the dropdown list in display-product.php:
<div> <?php echo '<select title="select one" name="selectcat" onchange="getdata(this.options[this.selectedindex].value)">'; while($row1 = $result->fetch_assoc()){ echo '<option value="' . $row1['id'] . '">' . $row1['category'] . '</option>'; } echo '</select>'; ?> </div> the div display selected item:
<div class="product_directory" id="div1"></div> i'm not conversant ajax. tried access "str" variable passed getdata function in php script using "$string = $_get['q']" still didn't work. in advance help.
update: able figure out source of problem: have 2 functions populate select lists database. when user selects option first dropdown(with id="categoriesselect"), second one(id = "subcatsselect") automatically populated. here code both functions:
<script type="text/javascript"> <?php echo "var categories = $jsoncats; \n"; echo "var subcats = $jsonsubcats; \n"; ?> function loadcategories(){ var select = document.getelementbyid("categoriesselect"); select.onchange = updatesubcats; for(var = 0; < categories.length; i++){ select.options[i] = new option(categories[i].val,categories[i].id); } } function updatesubcats(){ var catselect = this; var catid = this.value; var subcatselect = document.getelementbyid("subcatsselect"); subcatselect.options.length = 0; //delete options if present for(var = 0; < subcats[catid].length; i++){ subcatselect.options[i] = new option(subcats[catid][i].val,subcats[catid][i].id); } } </script> the code works fine if manually put in select list . using these 2 functions pull database, nothing displayed. call loadcategories() function this
<body onload = "loadcategories()">. other select box similar one. don't know specific issue know it's coming either loadcategories() or updatesubcats().
it seems your code retrieving value on select. fails on function.
i tried using open function here. but, in side didn't work using slash (/). so, try remove , try it.
...
xhr.open("get", "display-product.php?q="+str, true); ...
edit: full working code...
<script type = "text/javascript"> function getdata(str){ var xhr = false; if (window.xmlhttprequest) { xhr = new xmlhttprequest(); } else { xhr = new activexobject("microsoft.xmlhttp"); } if (xhr) { xhr.onreadystatechange = function () { if (xhr.readystate == 4 && xhr.status == 200) { document.getelementbyid("div1").innerhtml = xhr.responsetext; } } xhr.open("get", "display-product.php?q="+str, true); xhr.send(null); } } </script> <select title="select one" name="selectcat" onchange="getdata(this.options[this.selectedindex].value)"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div id="div1"></div> ... on display-product.php
echo $_get['q']; try this edited part of question.
and this other make work together.
hope helps.
Comments
Post a Comment