PDA

View Full Version : HELP! Multiple form selected option values shows div with corresponding id. HELP!



Seraphim
08-30-2005, 04:36 PM
Hello,
Im really new at coding and I was hoping I could get some help. I am running an online store (oscommerce) and I want to be able to have the user select Color and Style from two differect form select lists, have the values concatenate or append to each other and use that result to show a div with the same id.

I have created a sample.


<html>
<body>
<head>
<style>
.hide
{
display: none;
}
.show
{
display: block;
}
</style>
<script type="text/javascript">
var currentform="";
function doForm(form)
{

if (currentform!="")
{
var fm = document.getElementById(currentform);
if (typeof(fm) != undefined)
{
fm.className="hide";
}
}


var itm = form.select1name[form.select1name.selectedIndex].value;
currentform=itm;

if (itm!="")
{
fm = document.getElementById(itm);

if (typeof(fm) != undefined)
{
fm.className="show";
}
}



}
</script>

<script type="text/javascript">
var currentform="";
function doForms(form)
{

if (currentform!="")
{
var fm = document.getElementById(currentform);
if (typeof(fm) != undefined)
{
fm.className="hide";
}
}


var itm = form.select2name[form.select2name.selectedIndex].value;
currentform=itm;

if (itm!="")
{
fm = document.getElementById(itm);

if (typeof(fm) != undefined)
{
fm.className="show";
}
}



}
</script>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript"><!--
function cycle() {
var answer = '';
for (var i = 0; i<document.formName.elements.length; i++) {
if ((document.formName.elements[i].name.indexOf('select') > -1)) {
if (document.formName.elements[i].selectedIndex != 0) {
answer += document.formName.elements[i].options[document.formName.elements[i].selectedIndex].value + '';
}
}
}
document.formName.answer.value = answer;
}
//--></SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.1"><!--
function cycle() {
var answer = '';
for (var i = 0; i<document.formName.elements.length; i++) {
if ((document.formName.elements[i].type == 'select-one')) {
if (document.formName.elements[i].selectedIndex != 0) {
answer += document.formName.elements[i].options[document.formName.elements[i].selectedIndex].value + '';
}
}
}
document.formName.answer.value = answer;
}
//--></SCRIPT>
<FORM NAME="formName">

<SELECT NAME="select1name" onChange="doForm(this.form)">
<OPTION value="" selected>Pick One</option>
<OPTION value="">----------</option>
<OPTION value="01">01</option>
<OPTION value="02">02</option>
<OPTION value="03">03</option>
<OPTION value="04">04</option>
</SELECT>

<SELECT NAME="select2name" onChange="cycle();doForms(this.form)">
<OPTION value="" selected>Pick Another</option>
<OPTION value="">----------</option>
<OPTION value="10">10</option>
<OPTION value="20">20</option>
<OPTION value="30">30</option>
<OPTION value="40">40</option>
</SELECT>
<BR>

<INPUT TYPE="text" NAME="answer" value="0110" onChange="doForm(this.form)">
</FORM>
<br><hr><br>
<div id="10" class="hide">10</div>
<div id="20" class="hide">20</div>
<div id="30" class="hide">30</div>
<div id="40" class="hide">40</div>
<div id="01" class="hide">01</div>
<div id="02" class="hide">02</div>
<div id="03" class="hide">03</div>
<div id="04" class="hide">04</div>
<div id="0110" class="hide">hooray!</div>
<br><hr><br>
<body>
<html>


the resulting string from both options appear in the text box however I want to be able to use that string for an onchange action or something to show the div with the same ID. however I would like it so that it shows the div of only one option until both options are selected.
when user selects option 01 only div 01 shows, then when user also selects option 10 it shows div 0110. but also if user selects 10 only div 10 shows but only after selecting a second option 01 does div 0110 show

Seraphim
08-31-2005, 12:19 AM
bump!