Is it possible to store the selected option from a dropdown list as a JavaScript variable, even when new Ajax content is loaded on the page?
Below is a simple form code example:
<form name="searchLocations" method="POST">
<select name="locationName">
<?php
$sql = mysql_query("SELECT locationName FROM tbl_locations ORDER BY locationName ASC");
while ($row = mysql_fetch_array($sql)){
echo "<option value=\"owner1\">" . $row['locationName'] . "</option>";
}
?>
</select>
<button onclick="loadXMLDoc(indexSearchingSubmit);" id="searchingSubmit">Search</button>
</form>
The goal is to keep the selected dropdown option stored within the main Ajax coding of the page, ensuring that it remains accessible when interacting with different Ajax elements.
Here's an illustration of the main Ajax logic:
<script>
window.onload = function () {
var everyone = document.getElementById('everyone'),
searching = document.getElementById('searching'),
searchingSubmit = document.getElementById('searchingSubmit');
everyone.onclick = function() {
loadXMLDoc('indexEveryone');
everyone.className = 'filterOptionActive';
searching.className = 'filterOption';
}
searching.onclick = function() {
loadXMLDoc('indexSearching');
searching.className = 'filterOptionActive';
everyone.className = 'filterOption';
}
searchingSubmit.onclick = function() {
loadXMLDoc('indexSearchingSubmit');
}
function loadXMLDoc(pageName)
{
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("leftCont").innerHTML=xmlhttp.responseText;
}
}
function get_query(){
var url = location.href;
var qs = url.substring(url.indexOf('?') + 1).split('&');
for(var i = 0, result = {}; i < qs.length; i++){
qs[i] = qs[i].split('=');
result[qs[i][0]] = decodeURIComponent(qs[i][1]);
}
return result;
}
xmlhttp.open("GET","../browse/" + pageName + ".php?user=" + get_query()['user'],true);
xmlhttp.send();
}
}
</script>
<!-- ends ajax script -->