Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Using combo box to create second combo box and add second selection t

Status
Not open for further replies.

J10000

IS-IT--Management
Oct 2, 2008
6
AU

Hi Everybody

This is probably a very commonly asked question, however after much searching online I can't seem to find a straightforward answer. If anyone knows the code or a link to a place with a simple example it would be great.

What I have got is a form that a user has to fill out and submit (when validated all variables are stored in a session and emailed after multiple forms are completed), currently I have radio buttons, text boxes and a combo box/ drop down list (for location). All parts are working fine and validating fine. My problem is to do with the combo box//ddl. I have successfully validated the ddl so the user must select a location onsubmit and it is added to session and passed fine.

At the moment the ddl only has cities or towns in it however as I would like to include different states and possibly different countries I need a code that validates the state first and then only gives the cities/towns that are in that state (otherwise my ddl would be to large). I can do this with links however I can't seem to do it in a form.

I am trying to do it this way

DDL has list of all states that on mouseover/ onclick the list is revealed. onclick of a specific state populates another ddl with only the cities cities/ towns that are in that state and onclick of specific city selects the location whereby onsubmit the location is stored in the the session for submission by email

Thanks in advance for your help

I still have the following two major issues. 1) Firstly I need to be able to send the selection from the second combo box by php. 2) secondly I need the combo box to appear within the table. (I thought this should be easy, but for the life of me cannot figure out how to get the dynamic combo into my table inside the form)

I have managed to send the selection from the first combo box with the form and also I can send a selection from the second combo, however onsubmit regardless of what is selected in the second combo box it simply sends the last option not the one selected. I have spent many hours trying to figure out why this is the case to no avail.

I have included my code for anyone who may be able to help. Lastly when I have figured out these 2 (with a little help) I should be able to sort out the validation by myself. Please ignore any code that is not relevant

<html>
<head>

<script type="text/javascript">

var this1;

window.onload = function() {
if (!document.all) document.captureEvents(Event.CHANGE);
document.getElementById('myddl').onchange = readDDL1; }

function readDDL1() {
var ddlobj = document.getElementById('myddl');
var currentSelection = ddlobj.options[ddlobj.options.selectedIndex].value;
if (currentSelection == '') currentSelection = ddlobj.options[ddlobj.options.selectedIndex].text;
doDDL2(currentSelection);
}

function doDDL2(ddl1Selection) {

var existingDDL2;
if ((existingDDL2 = document.getElementById('myddl2')) != null) existingDDL2.parentNode.removeChild(existingDDL2);

var ddl2Options;
switch (ddl1Selection) {
case "Western Australia":
ddl2Options = ["Please Select A Location", "Karratha", "Perth"]; break;
case "Queensland":
ddl2Options = ["Please Select A Location", "Brisbane", "Gold Coast"]; break;
}

if (typeof ddl2Options == "object") {
ddl2 = document.createElement('select');

ddl2.id = "myddl2";
var forVar;
for (forVar in ddl2Options) {
var newOption = document.createElement('option');
newOption.appendChild(document.createTextNode(ddl2Options[forVar]));
ddl2.appendChild(newOption);


}
document.body.appendChild(ddl2);

}

document.testform.this1.value = ((ddl2Options[forVar]));

}



function checkFrequency() {
return ShowResults();

}


function validate(){
var digits="0123456789"
var temp

if (document.testform.location.selectedIndex == 0) {
alert("Please Select a State");
return false
}

if (document.testform.location2.selectedIndex == 0) {
alert("Please Select a Location");
return false
}

return true
}




</script>

<style type="text/css">
.td_freq { background-color:yellow;
height:40px;
text-align:center;
}
.td_sev { background-colorink;
height:40px;
text-align:center;
}
.td_wi { background-color:lightgreen;
height:40px;
text-align:center;
}
</style>

</head>
<body>

<FORM name="testform" action='./emlapd.php' method='post' onsubmit="return checkFrequency()">

<input type='hidden' name='this1'>

<table align="center" border="1" width="40%">

<tr><td><b>Current Worksite State:</b><font color="red">*</font></td>
<td>
<select name="location" width='53' id="myddl">
<option value="0">--- Please Select Your State --- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
<option value="Western Australia">Western Australia</option>
<option value="Queensland">Queensland</option>

</select>

</td></tr>
<tr><td><b>Location:</b><font color="red">*</font></td>
<td>

</td></tr>

</table>


<tr>
<th colspan="2">
<input type="submit" name='submit' value="Submit" onclick= "return validate()">
</th>
<td colspan="10">&nbsp;</td>
<th>
<input type='reset' name='reset' value='Clear Form'>
</th>
</tr>
</table>

</FORM>
</body>
</html>


Thankyou very much to everyone that may help


So I can place the DDL inside the form, however it places it at the end of the form. I want it somewhere in the middle (immediately following first combo box)

My other main issue is irregardless of the selection it simply posts the last option from the DDL not the one selected. Therefore I still want the second combo box to appear immediately below the first combo box and whatever option is selected from the second combo box I want to be posted with the rest of the form data.

If you have any other ideas that would be great

Obviously the reason I am still getting the same incorrect post is because the variable posted is still this1 from my code which reads the last value from the DDL. I have tried with all other variables to send as well ie ddl2 however still can't seem to send the selection.

So in its current state how can I send the selection and place the second DDL within the form??


Thank you
 
For you first problem, give the <td> element an id like so:

Code:
<tr><td><b>Location:</b><font color="red">*</font></td>
<td id="putithere">
</td></tr>

Then in the doDDL2() function instead of doing document.body.appendChild(ddl2); do this:

Code:
document.getElementById("putithere").appendChild(ddl2);

As for the second problem, look at the last line in doDDL2().

Code:
document.testform.this1.value = ((ddl2Options[forVar]));

Since forVar is a loop variable (and you have already iterated thru the loop), you will always get the last value from the ddl in you hidden variable. Anyways, now that the second ddl is part of the form you don't need a hidden variable for the ddl value after submit. It will automatically be submitted as part of the form.

Hope it works for you!

 
Thank you both for your answers. I have now sorted this out.

Excellent work

Thanks again
 

Question Changing Colour of a specific option??
Awesome I now have everything sorted. I have successfully fully populated my 2nd DDL and validated for only correct options for both and successfully posted the variables through session.

There is one little other thing that is not essential but would be nice.

Is there a way to colour one of the options in the second combo box?? For example

in the case statement

ddl2Options = ["Please Select A Location", "Karratha", "Perth"]; break;

I would like the 'Please Select A Location' option to appear red however I don't seem to be able to change the colour within the case statement

As I said before this is not completely necessary but would be a nice addition. I am already stoked that everything else is working

Cheers again
 
The following article ( suggest that there is nothing in CSS2/HTML that could do this natively, although I think the suggestion from would work for this case, you may have to write a little bit of Javascript to toggle the class name on the element when Selected.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top