add another dropdown?

[sandsquid]

I have a script that will query mysql db and output to a dropdown. however, I would like to add a radio or checkbox and when selected, a new drop down will appear (would like to have js or dhtml to do the work). Basically, what the script will do is allow a member to pick multipal duty stations that they have served, some people only servered in one spot, others served in 20 diff. locations. I don't want 20 options displayed, only want the new options displayed if user onclicks. Thanks

 

 

[Dragen]

This can be done very easily in Javascript. Try googleing "javascript add input". I found this one which will do what you want: http://javascript.internet.com/forms/adding-html-controls.html.

 

You'd just need to check how many are created when verifying the code.

[sandsquid]

thanks dragen, i've used similar script, however, i am looking to populate the "new" dropdown with mysql data. I had a script that would populate a second dropdown, but using dhtml, i(and script) didn't know what to do with the second set of info once selected.

 

so, the steps would be:

 

user selectes  -> navy ->us ->CA -> san diago -> command (all from mysql data dropdown)

then selects (radio, checkbox, text link or button) that says "add another" (if selected then)

user then select -> navy ->korea -> location -> command (all from mysql data dropdown)

continue loop until no more selections needed

 

then on too more questions (not dropdown questions just input text)

then submit

[Dragen]

to change/add information with mysql data, without a page refresh you'll need to use ajax.

I've never dealt with ajax and mysql, but it should be relatively simple. The javascript connects to a php script, which collects the data from the database.

 

Try looking up 'xmlhttp' to get a better idea, but here's a rough example:

javascript functions:

var xmlhttp;
var textreturn;

//this connects to a php file and return the output
function get_text(obj, options){
textreturn = 'could not collect text';

xmlhttp = null;
if(window.XMLHttpRequest){
	xmlhttp=new XMLHttpRequest();
}else if(window.ActiveXObject){
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
  
if(xmlhttp != null){
	xmlhttp.onreadystatechange = state_Change;
	//set the url here and some GET vars to tell the script which data to collect
	xmlhttp.open("GET", "path/to/file.php?get=" + options, false);
	xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
	xmlhttp.send(null);
	textreturn = xmlhttp.responseText;
}
document.getElementById(obj).value = textreturn;
}

//this checks the status of the request.
function state_Change(){
//if it's ready it returns 4
if(xmlhttp.readyState==4){
	//if it return data, status return 200
	if(xmlhttp.status==200){
		textreturn = xmlhttp.responseText;
	}else{
		alert("Problem retrieving XML data");
	}
}
}

 

then in the php file you'd check the get data and use it to collect the info from the database. It stores it in the javascript variable 'textreturn'.

 

simply call it like this:

get_text(id of input where text needs to go, get variables for sql)

 

 

 

EDIT: after re-reading your post I'm not sure I understood correctly the first time.

Do you mean that the data is already there, you're just trying to figure out how to read from each drop-down?

if so, make sure that the drop-downs are named as an array:

<select name="command[]">
    <option value="somevalue">somevalue</option>
</select>
<select name="command[]">
    <option value="somevalue">somevalue</option>
</select><select name="command[]">
    <option value="somevalue">somevalue</option>
</select><select name="command[]">
    <option value="somevalue">somevalue</option>
</select>

 

So when you're creating the extra ones, name the the same thing with [] to create an array.

Then access it like so:

foreach($_POST['command'] as $k => $v){
    //do something with each input
}

[benphp]

I just did this. Here's how:

Set up your dropdowns:

//////////////
//Instructor Dropdown
//////////////
$instructors = "";
$instructorName = "";

$sqli = "SELECT pid, first, last FROM people WHERE userType = 'Instructor' AND active = 'y' ORDER BY last DESC ";
$rSi = $dbConn->execute($sqli);

$c0i = $rSi->Fields(0);
$c1i = $rSi->Fields(1);
$c2i = $rSi->Fields(2);

while (!$rSi->EOF) {
$pid = $c0i->value;
$first = fnTick($c1i->value);
$last = fnTick($c2i->value);
$instructors = "<option value=\"$last, $first\">$last, $first</option> \n" . $instructors;
$rSi->MoveNext();
}
//////////////
//Instructor Dropdown
//////////////

 

Use a style to hide:

<style>
.show {}
.hide {display:none}
</style>

 

Use JS to unhide:

<script>
<!--

function ylib_Browser()
{
d=document;
this.agt=navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.dom=(d.getElementById)?1:0;
this.ns=(d.layers);
this.ns4up=(this.ns && this.major >=4);
this.ns6=(this.dom&&navigator.appName=="Netscape");
this.op=(window.opera? 1:0);
this.ie=(d.all);
this.ie4=(d.all&&!this.dom)?1:0;
this.ie4up=(this.ie && this.major >= 4);
this.ie5=(d.all&&this.dom);
this.win=((this.agt.indexOf("win")!=-1) || (this.agt.indexOf("16bit")!=-1));
this.mac=(this.agt.indexOf("mac")!=-1);
};

var oBw = new ylib_Browser();

function ylib_getObj(id,d)
{
var i,x;  if(!d) d=document; 
if(!(x=d[id])&&d.all) x=d.all[id]; 
for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][id];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=ylib_getObj(id,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(id); 
return x;
};

function ylib_getkObj(idk,dk)
{
var ik,xk;  if(!dk) dk=document; 
if(!(xk=dk[idk])&&dk.all) xk=dk.all[idk]; 
for (ik=0;!xk&&ik<dk.forms.length;ik++) xk=dk.forms[ik][idk];
for(ik=0;!xk&&dk.layers&&ik<dk.layers.length;i++) xk=ylib_getkObj(idk,dk.layers[ik].document);
if(!xk && document.getElementById) xk=document.getElementById(idk); 
return xk;
};

function ylib_show(o,disp) { (oBw.ns)? ''!disp)? o.style.display="inline".style.display=disp; (oBw.ns)? o.visibility='show'.style.visibility='visible'; };
function ylib_hide(o,disp) { (oBw.ns)? '':(arguments.length!=2)? o.style.display="none".style.display=disp; (oBw.ns)? o.visibility='hide'.style.visibility='hidden'; };
function ylib_setStyle(o,s,v) { if(oBw.ie5||oBw.dom) eval("o.style."+s+" = '" + v +"'"); };
function ylib_getStyle(o,s) { if(oBw.ie5||oBw.dom) return eval("o.style."+s); };
function ylib_addEvt(o,e,f,c){ if(o.addEventListener)o.addEventListener(e,f,c);else if(o.attachEvent)o.attachEvent("on"+e,f);else eval("o.on"+e+"="+f) };
function ylib_writeHTML(o,h) { if(oBw.ns){var doc=o.document;doc.write(h);doc.close();return false;} if(o.innerHTML)o.innerHTML=h; };


var nextHiddenIndex = 0;

function AddFileInput()
{
ylib_getObj("fileInput" + nextHiddenIndex).style.display = document.all ? "block" : "table-row";

//ylib_getkObj("fileText" + nextHiddenIndex).style.display = document.all ? "block" : "table-row";

nextHiddenIndex++;
//set the nextHiddenIndex to the number that you wnat to display. It will show that many, then remove the attachMoreLink button/link.
if(nextHiddenIndex >= 4) ylib_getObj("attachMoreLink").style.display = "none";
}

</script>

 

Print your dropdowns:

<tr>
<td><b>Instructor: </td><td><select id=\"instructor\" name=\"c_instructor[]\"><option value=\"\"></option>$instructors</select> <input type=\"button\" id=\"attachMoreLink\" value=\"Add+\" onclick=\"javascript:AddFileInput();\" class=\"kbutt\"> <font color=red>*Req</font> </td>
</tr>
<tr id=\"fileInput0\" style=\"display:none\">
<td><b>Instructor 2: </td><td><select name=\"c_instructor[]\"><option value=\"\"></option>$instructors</select> </td>
</tr>
<tr id=\"fileInput1\" style=\"display:none\">
<td><b>Instructor 3: </td><td><select name=\"c_instructor[]\"><option value=\"\"></option>$instructors</select></td>
</tr>
<tr id=\"fileInput2\" style=\"display:none\">
<td><b>Instructor 4: </td><td><select name=\"c_instructor[]\"><option value=\"\"></option>$instructors</select></td>
</tr>
<tr id=\"fileInput3\" style=\"display:none\">
<td><b>Instructor 5: </td><td><select name=\"c_instructor[]\"><option value=\"\"></option>$instructors</select></td>
</tr>
</tr>