/    Sign up×
Community /Pin to ProfileBookmark

dynamic dropdowns

Copy linkTweet thisAlerts:
Feb 06.2009

I’ve been asked to come up with a sort of scheduling application, where I show a dropdown of “Leaders”, and then another dropdown would display with available timeslots that “Leader” has available to schedule an appointment. How would I go about coding this? I’m sure I’ll probably need some sort of javascript to make the second dropdown appear with only values that are still available. also, what would the best data model be for this? I’ll need to also run reports to generate a list of all the timeslots that have been filled for a “Leader”, as well as show some of the customers data they entered when they signed up for a time slot.

Thanks!!!

to post a comment
PHP

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@GUIRFeb 06.2009 — Using plain Javascript you can populate a list, but after form submission things(values of populated) wont be at server.

You can use AJAX for this purpose. Please search on keywords linked combo box php ...

I recently did a similar thing to populate a list of cities based on selection of state.

Simply, I had a <div> between <select> and </select>

[code=html]<select name="cities" size="1">
<div id="citiesContent">
</div>
</select>[/code]

In server you should have a PHP file accepts state by an url parameter and prints only <options> list without <select> and </select>

Then you should use javascript and ajax to get output of above said php file.

After getting AJAX output by something like this, you can insert(populate) <options> list to List.

document.getElementById('citiesContent').innerHTML = xmlHttp.responseText;

Now you have the list populated.

But some browsers do not detect value of dynamically populated list.

For that you can use and addition hidden input, on onChange event of dynamic select list, assign select value to hidden inputs value using javascript. Then at form processing refer to hidden variable instead list value, so you wont have browser issues.

Best Regards
Copy linkTweet thisAlerts:
@jrthor2authorFeb 06.2009 — Thanks. Does anyone have any suggestions on the table layouts?
Copy linkTweet thisAlerts:
@GUIRFeb 06.2009 — You may have <Div>s where table layouts should be and load content via AJAX. Table layouts by php and document.getElementById('DivId').innerHTML = AJAX Output
Copy linkTweet thisAlerts:
@jrthor2authorFeb 06.2009 — Sorry, I didn't mean HTML Tables, I meant MySql tables :-) Also, each "Leader" would have time slots available to each od them individually, so Leader 1 could have open timeslots from 1pm - 7pm, Leader 2 3pm - 5pm, etc.

Thanks
Copy linkTweet thisAlerts:
@jrthor2authorFeb 08.2009 — Ok, i got the code for the ajax stuff, but It doesn't work, I keep getting a null on document.getElementById. Here is my code for my select box:
[code=php]
<p>
<label for="times" class="left"><span class="required">*</span>Time:</label>
<select name="times" id="times" class="combo">
<div id="timeResult"><option></option></div>
</select>
<? if (strlen($err_time)) {
echo "<br /><span class='formerror'>$err_time</span>";
}
?>

</p>
[/code]
and here is my code for the ajax:
<i>
</i>function GetXmlHttpObject(handler){ <br/>
var objXMLHttp=null <br/>
if (window.XMLHttpRequest) { <br/>
objXMLHttp=new XMLHttpRequest() <br/>
} else if (window.ActiveXObject) { <br/>
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") <br/>
} <br/>
return objXMLHttp
}
function stateChanged(){ <br/>
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { <br/>
document.getElementById("timeResult").innerHTML= xmlHttp.responseText; <br/>
} else { <br/>
//alert(xmlHttp.status); <br/>
}
}
// Will populate data based on input
function htmlData(url, qStr){ <br/>
if (url.length==0) { <br/>
document.getElementById("timeResult").innerHTML=""; <br/>
return; <br/>
} <br/>
xmlHttp=GetXmlHttpObject() <br/>
if (xmlHttp==null) { <br/>
alert ("Browser does not support HTTP Request"); <br/>
return; <br/>
} <br/>
url=url+"?"+qStr; <br/>
url=url+"&amp;sid="+Math.random(); <br/>
xmlHttp.onreadystatechange=stateChanged; <br/>
xmlHttp.open("GET",url,true) ; <br/>
xmlHttp.send(null);
}

and here is my code for times.php:
[code=php]
<?php
include_once "/home/zluthorg/public_html/inc/sitecommon.php";
include_once $DOCUMENT_ROOT."/inc/dbconn.php";
include_once $DOCUMENT_ROOT."/inc/opendb.php";
ini_set('display_errors', 1);
error_reporting(E_ALL);
$leaderId = $_GET['leaderId'];
if(isset($leaderId) and strlen($leaderId) > 0){
$sql = "SELECT t.id, TIME_FORMAT(t.time, '&#37;h:%i %p') as time from meeting_leader2times l2t, meeting_times t where l2t.leaderId = " . $leaderId . " and l2t.timeId = t.id order by t.id asc";
} else {
$sql = "SELECT distinct(t.id), TIME_FORMAT(t.time, '%h:%i %p') as time from meeting_leader2times l2t, meeting_times t where l2t.id = t.id order by t.id asc";
}
$result = mysql_query($sql);
//echo $sql;
$numrows=mysql_numrows($result);
?>
<?
for ($i = 0; $i < $numrows; $i++) {
$time_id = mysql_result($result,$i,"id");
$time = mysql_result($result,$i,"time");

?>

<option value="<?=$time_id;?>"><?=$time;?></option>
<? } ?>

<? include_once $DOCUMENT_ROOT."/inc/closedb.php"; ?>
[/code]
thanks!
×

Success!

Help @jrthor2 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...