Make JQuery auto-pick form elements on GET Submission
I need to make JQuery remember what was clicked on a form and pre-select or auto-select form elements on a form that was submitted the PHP $_GET variable.
I have a form (shown below) where if you click an item in a drop-down it will update the second drop-down.
This is fine, however my client wants it so that when you press submit (it goes to a search results page) it should auto-pick the correct form elements.
However, I do not know how to do this. I do not know how to make JQuery read PHP based GET variables or variables in the address bar.
When I submit the form, the GET variables appear in the address bar, but I cannot seem to read them via JQuery, or grab them or anything.
Therefore, how do you make JQuery grab GET variables, and then auto-select form elements?
Code follows. Thanks.
-
// JQuery code
<script type="text/javascript" charset="utf-8">
$(function()
{
$('#form').load("/[~87~]", {}, function()
{
/* country selector */
$("select#ctlCountry").change(function()
{
//$("select").removeAttr('disabled');
$.getJSON("/[~88~]",{country_id: $(this).val(), ajax: 'true'}, function(j)
{
var options = '';
for (var i = 0; i < j.length; i++)
{
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '<\/option>';
}
$("select#ctlResort").html(options);
$("select#ctlResort").show();
$("input#searchBtn").removeAttr('disabled');
})
});
$('a.icon_calendar').click(function()
{
displayCalendarSelectBox(document.forms[0].year,document.forms[0].month,document.forms[0].day,false,false,this);
return false;
});
window.alert($('select[@name=day]').val());
});
$('#loading').ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).fadeOut("slow");
});
});
</script>
-
// HTML form code
<form method="get" action="[~[+results_page+]~]/">
<input name="formid" id="formid" type="hidden" value="HSF" />
<input name="pd" id="pd" type="hidden" value="d" />
<input name="rating" id="rating" type="hidden" value="0" />
<fieldset>
<legend>Search</legend>
<p>
<select name="country_id" id="ctlCountry">
[[pickCountry]]
</select>
</p>
<p>
<select name="resort_id" id="ctlResort">
[[pickResort? &country_id=`1`]]
</select>
</p>
<p><!-- Date -->
Date?<br />
<select id="day" name="day">
[[pickDay]]
</select>
<select id="month" name="month">
[[pickMonth]]
</select>
<select id="year" name="year">
[[pickYear]]
</select>
<br /><a href="#" class="icon_calendar">Show Calendar</a>
</p>
<p><!-- Flexibility -->
<label for="flexibility">
Flexibility:<br />
<select id="flexibility" name="flexibility">
[[pickFlexibility]]
</select>
</label>
</p>
<p><!-- Duration -->
<label for="duration">
Duration:<br />
<select id="duration" name="duration">
[[pickDuration]]
</select>
</label>
</p>
<p><!-- Board -->
<label for="board">
Board:<br />
<select id="board" name="board">
[[pickBoard]]
</select>
</label>
</p>
<p><!-- Airport -->
<label for="departAirport">
From:<br />
<select id="departAirport" name="departAirport">
[[pickAirport]]
</select>
</label>
</p>
<p>
<input type="submit" id="searchBtn" value="Search" />
</p>
</fieldset>
</form>
The [pickFlexibility], etc are just calls to PHP code. I have tried to output a print_r of all GET variables upon form submission -- whilst it does read a form submission, AJAX does not seem to be able to read them.
The JSON just updates the secondary drop-down, but I cannot figure for the life of me how to make JQuery grab GET variables and force select form elements.
Any help would be most appreciated.