php - Dynamically populate up to 3 dropdowns based on previous dropdown selections -
i know similar questions have been asked have not found solution.
i have sample fiddle using of known years, months , days sample. instead on manually adding select option divs each year, i'd div id dynamically populate based on value of year selected , on.
i have dropdown option values database (php, mysql, cakephp 1.3). first dropdown contains unique years reports have been entered. once selected (onchange) perhaps, second dropdown give unique months reports entered selected year , once month selected (onchange) third dropdown populate dates of each day report entered. reports started in august of 2011 , have not been entered every month nor every day since.
need ajax post selected option first dropdown list controller, 2nd dropdown options new query db (model) based on posted value. let's assume user selects 2013 first dropdown, ajax sends "2013" in variable controller, controller sends value model , model queries database distinct months within 2013 reports entered. , since year not over, months should appear january thru july. these populate months dropdown , user selects may in example. ajax sends may or "05" controller -> model , model queries db unique days in may, 2013. populates third dropdown. have hidden input field selected values dropdowns in format: mm/dd/yyyy. when user submits, redirect user reports page date , shows records entered on day.
thanks 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> -- jquery not working...the $.get needs value model, index iframes new iteration of 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 actual form excerpt 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 drop list'>"; echo '<option value="" disabled="disabled" selected="selected">'."choose year".'</option>'; foreach ($years $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 drop list'>"; echo '<option value="" disabled="disabled" selected="selected">'."choose month".'</option>'; foreach ($months $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 drop list'>"; echo '<option value="" disabled="disabled" selected="selected">'."choose day".'</option>'; foreach ($days $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 -->
what should is:
attach change events each dropdown - or @ least first two.
on change event occuring make ajax call server (passing params) , repopulate next selectbox server returns. "trick" here alone have deside how pass parameters (get, post) , how create selectbox html.
after ajax call completes , returns data, need populate next select. here can either have server send ready html selects or data , build markup client side. should better have html sent prerendered.
repeat procedure next dropdown.
Comments
Post a Comment