I know similar questions have been asked but I have not found a solution.
I have a sample fiddle using some of my known years, months and days as a sample. Instead on manually adding select option divs for each year, I'd like the div id to dynamically populate based on the value of the year selected and so on.
I have all dropdown option values from my database (php, mysql, cakephp 1.3). The first dropdown contains unique years that reports have been entered. Once selected (onchange) perhaps, the second dropdown will only give unique Months that reports were entered for that selected year and then once the month is selected (onchange) a third dropdown will populate with the dates of each day a report was entered. Reports started in August of 2011 and have not been entered every month nor every day since.
Need help with my ajax to post selected option from first dropdown list to my controller, then get 2nd dropdown options from new query to db (model) based on the posted value. Let's assume user selects 2013 from the first dropdown, then ajax sends "2013" in a variable to my controller, the controller sends value to my Model and my Model queries the database to get distinct months within 2013 where reports where entered. And since the year is not over, the only months that should appear are January thru July. These populate my months dropdown and the user selects May in example. Ajax sends May or "05" to controller -> Model and the model queries DB to get unique days in May, 2013. This populates my third dropdown. I will have a hidden input field that will be all the selected values from the dropdowns in this format: MM/DD/YYYY. When user submits, this redirect user to the reports page for that date and shows all records entered on that day.
Thanks for helping...
<select name="drop_1" id="drop_1">
<option value="" selected="selected" disabled="disabled">Choose Year</option>
<option value="">Select Year</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
<select name="drop_2" id="drop_2">
<option value="" selected="selected" disabled="disabled">Choose Month</option>
<option value=""></option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
</select>
<select name="drop_3" id="drop_3">
<option value="" selected="selected" disabled="disabled">Choose Day</option>
<option value=""></option>
<option value="05/11/2013">05/11/2013</option>
<option value="05/12/2013">05/12/2013</option>
<option value="05/13/2013">05/13/2013</option>
</select>
-- this is my jQuery but it is not working...the $.get needs to get the value from my Model, index just iframes a new iteration of my page.
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
$.get("index", {
func: "drop_1",
drop_var: $('#drop_1').val()
}, function(response){
$('#result_1').fadeOut();
setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#wait_1').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function finishAjax_tier_three(id, response) {
$('#wait_2').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
-- here's my actual form excerpt from the view, "index" in cakephp 1.3
<div>
<!-- Begin Date Selection -->
<form name="udate" action="/reports/daily/" method="post">
<?php
echo "<select id='drop_1' name='drop_1' title='Use the drop list'>";
echo '<option value="" disabled="disabled" selected="selected">'."Choose Year".'</option>';
foreach ($years as $select_year)
{
echo '<option value="', $select_year[0]["Year(dated)"], '">', $select_year[0]["Year(dated)"], '</option>';
}
echo "</select>";?>
<?php
echo "<select name='drop_2' id='drop_2' title='Use the drop list'>";
echo '<option value="" disabled="disabled" selected="selected">'."Choose Month".'</option>';
foreach ($months as $select_month)
{
echo '<option value="', $select_month[0]["Month(dated)"], '">', $select_month[0]["Month(dated)"], '</option>';
}
echo "</select>";
echo "<script type=\"text/javascript\">
$('#wait_2').hide();
$('#drop_2').change(function(){
$('#wait_2').show();
$('#result_2').hide();
$.get(\"index\", {
func: \"drop_2\",
drop_var: $('#drop_2').val()
}, function(response){
$('#result_2').fadeOut();
setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
});
return false;
});
</script>";?>
<?php
echo "<select id='drop_3' name='drop_3' title='Use the drop list'>";
echo '<option value="" disabled="disabled" selected="selected">'."Choose Day".'</option>';
foreach ($days as $select_item)
{
echo '<option value="', $select_item[0]["Days(dated)], '">', $select_item[0]["Days(dated)], '</option>';
}
echo "</select>";?>
<span id="wait_1" style="display: none;">
<img alt="Please Wait" src="http://dev.asi.calpoly.edu/img/ajax-loader.gif"/>
</span>
<span id="result_1" style="display: none;"></span>
<span id="wait_2" style="display: none;">
<img alt="Please Wait" src="http://dev.asi.calpoly.edu/img/ajax-loader.gif"/>
</span>
<span id="result_2" style="display: none;"></span>
<?php echo $form->submit('Submit') ?>
</form>
</div><!-- End Date Selection -->