Dynamic select list not posting value
JQuery 1.9.1
jQueryMobile 1.3.0
I am creating a mobile site for a Web site already in place. I am only very slightly familiar with jQuery, and I'm not a real slick JavaScript programmer either. As much as possible, I am writing this mobile site to utilize the server-side PHP code I have created on the main site.
One of those routines processes freight delivery quotes. The user must enter an Origin and Destination zip code. When that zip code covers more than one city, the input changes, through an Ajax process, to a select list and prompts the user to make a choice. The select list simply replaces the input using show(); hide().
Either way, (whether one city or multiple), the zip code is replaced with a city, state, zip in the input or a list of city, state, zips in the select list. This information is then parsed server-side on submit.
This all works fine when there are single cities. However, when a selection is made from the select list, the data received by the server for that field is blank.
I am at a loss.
The HTML looks like this:
- <div class="LineLabel1">Origin Zip:</div>
<div id="OriCell1"><input id="OriZip" type="text" name="OriZip" value="" /></div>
<div id="OriCell2" style="display:none;"><select name="OriList" id="OriList"><option value="">Select City...</option></select></div>
<div class="LineLabel2">Destination Zip:</div>
<div id="DesCell1"><input id="DesZip" type="text" name="DesZip" value="" /></div>
<div id="DesCell2" style="display:none;"><select name="DesList" id="DesList"><option value="">Select City...</option></select></div>
For ease of testing, I have duplicate the code for OriZip and DesZip. Even though they are, basically, identical, I have included both here, as that is what I am using right now. Please pardon the redundancy.
- <script type="text/javascript">
$(document).ready(function()
{
$("#OriZip").blur(function()
{
var ZipData = document.getElementById("OriZip").value;
document.getElementById("OriZip").value = "Please Wait ...";
var Data = "?ZipCode=" + ZipData;
$.get( "../include/ZipCitiesArray.php", "&ZipCode="+ZipData, Success, "text" );
});
function Success( OriReturn )
{
var $Cell = $('#OriCell1');
var $List = $('#OriCell2');
var data = OriReturn.split(",");
if(data.length > 1)
{
for(i=0; i < data.length; i++)
{
$("<option value = ''>"+data[i]+"</option>").appendTo("#OriList");
}
$($Cell).value = "";
// Show the drop down list and set focus on it.
$($Cell).hide();
$($List).show();
$('#OriList').focus();
}
else
{
// Single City, State, Zip - just display
document.getElementById("OriZip").value = OriReturn;
if(data === "Not Found" || data.substr(0,6) === "Canada" || data == "")
{
if(Trim(data) === ""){document.customer.elements["OriZip"].value = "";}
$($Cell).select();
$($Cell).focus();
}
}
}
$("#DesZip").blur(function()
{
var ZipData = document.getElementById("DesZip").value;
if(ZipData != "")
{
document.getElementById("DesZip").value = "Please Wait ...";
var Data = "?ZipCode=" + ZipData;
$.get( "../include/ZipCitiesArray.php", "&ZipCode="+ZipData, DesSuccess, "text" );
}
});
function DesSuccess( DesReturn )
{
var $Cell = $('#DesCell1');
var $List = $('#DesCell2');
var data = DesReturn.split(",");
if(data.length > 1)
{
// Add an option to to the drop-down list for each City returned from the request
for(i=0; i < data.length; i++)
{
$("<option value = ''>"+data[i]+"</option>").appendTo("#DesList");
}
$($Cell).value = "";
// Show the drop down list and set focus on it.
$($Cell).hide();
$($List).show();
$('#DesList').focus();
}
else
{
// Single City, State, Zip - just display
document.getElementById("DesZip").value = DesReturn;
if(data === "Not Found" || data.substr(0,6) === "Canada" || data == "")
{
if(Trim(data) === ""){document.customer.elements["DesZip"].value = "";}
$($Cell).select();
$($Cell).focus();
}
}
}
});
</script>