...

View Full Version : JS help...Formsubmit



barter
06-10-2008, 04:00 PM
I'm a JS noob and am stuck on something. I have a form that is using divs for a select menu bus locations:

First select (parent): General locations. It has 10 or so options.

Second select (children): This is one of 6 different selects, each with at least 5 and up to 30 options based on the parent selection. There can only be one option selected.

This works great if the user does not explore. If one is selected, I have the server-side code strip out the commas and spaces. However, if a user selects one option from one div select child, then goes to another div select child and selects another option, it keeps the first one. For example, the result should not be '202,282,36,55, , ,43,' but rather ' , 282, , , , ,'

I do not know how to get it to reset back to nothing when a user goes from one child to the next. I have tried various forms and placements using 'value', and 'selectedIndex' but nothing has worked.

Oh, and also, it does not work in IE. I will be researching that, but if anyone has any ideas, it would be much appreciated.

Any help? Thanks for the help in advance...

Form name is info. This is all supposed to happen before the form is submitted.



<script type="text/javascript"> <!-- function toggle_visibility(id) { var f = document.getElementById('cou1'); if(f.style.display == 'block') f.style.display = 'none'; var g = document.getElementById('cou2'); if(g.style.display == 'block') g.style.display = 'none'; var h = document.getElementById('cou3'); if(h.style.display == 'block') h.style.display = 'none'; var i = document.getElementById('cou4'); if(i.style.display == 'block') i.style.display = 'none'; var j = document.getElementById('cou5'); if(j.style.display == 'block') j.style.display = 'none'; var k = document.getElementById('cou6'); if(k.style.display == 'block') k.style.display = 'none'; var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } //--> </script> <div style="display:none;" ID="cou1"><p><select name="specific_area"><!--options--></select> <div style="display:none;" ID="cou2"><p><select name="specific_area"><!--options--></select> <div style="display:none;" ID="cou3"><p><select name="specific_area"><!--options--></select> <div style="display:none;" ID="cou4"><p><select name="specific_area"><!--options--></select> <div style="display:none;" ID="cou5"><p><select name="specific_area"><!--options--></select> <div style="display:none;" ID="cou6"><p><select name="specific_area"><!--options--></select>
Here is the code so far:

barter
06-10-2008, 11:04 PM
Okay, so figured it out with the help of a friend....However, it still does not work in IE! I hate IE. Anybody know how to fix this?

function toggle_visibility(id) {
var f = document.getElementById('cou1');
var g = document.getElementById('cou2');
var h = document.getElementById('cou3');
var i = document.getElementById('cou4');
var j = document.getElementById('cou5');
var k = document.getElementById('cou6');

var e = document.getElementById(id);

f.style.display = 'none';
g.style.display = 'none';
h.style.display = 'none';
i.style.display = 'none';
j.style.display = 'none';
k.style.display = 'none';

f.getElementsByTagName("select")[0].selectedIndex = 0;
g.getElementsByTagName("select")[0].selectedIndex = 0;
h.getElementsByTagName("select")[0].selectedIndex = 0;
i.getElementsByTagName("select")[0].selectedIndex = 0;
j.getElementsByTagName("select")[0].selectedIndex = 0;
k.getElementsByTagName("select")[0].selectedIndex = 0;

if(e.style.display == 'block') {
e.style.display = 'none';
}
else {
e.style.display = 'block';
}
}

rangana
06-11-2008, 03:46 AM
How is the function being triggerred BTW? Could you show us the complete code instead.

barter
06-11-2008, 02:56 PM
I sure did miss that part.

It is set up in an array. This goes into the parent select menu:


<option value="<!--ID CODING From SERVER-->" onclick="toggle_visibility('<!--ID CODING-->');">"<!--Name from server-->"</option>

rangana
06-12-2008, 02:03 AM
I'm sorry, but I don't get what you mean. Up the "whole" code that is involved.

barter
06-12-2008, 03:20 PM
Okay, here it is....I have been researching it quite a bit, nothing I found so far has worked.....Here is where I am at now.


Here's the script....

<script type="text/javascript">
<!--
function toggle_visibility(id) {
var f = document.getElementById('cou1');
var g = document.getElementById('cou2');
var h = document.getElementById('cou3');
var i = document.getElementById('cou4');
var j = document.getElementById('cou5');
var k = document.getElementById('cou6');

var e = document.getElementById(id);

f.style.display = 'none';
g.style.display = 'none';
h.style.display = 'none';
i.style.display = 'none';
j.style.display = 'none';
k.style.display = 'none';

f.getElementsByTagName("select")[0].selectedIndex = 0;
g.getElementsByTagName("select")[0].selectedIndex = 0;
h.getElementsByTagName("select")[0].selectedIndex = 0;
i.getElementsByTagName("select")[0].selectedIndex = 0;
j.getElementsByTagName("select")[0].selectedIndex = 0;
k.getElementsByTagName("select")[0].selectedIndex = 0;

if(e.style.display == 'block') {
e.style.display = 'none';
}
else {
e.style.display = 'block';
}
}
//-->
</script>


Here is the html for the Children....


<div style="display:none;" ID="cou0"></div> <!--this is empty for when the page first opens or user goes back to no bus location selected-->
<!--All of these following are defined to be <option value="variable">Name</option>-->

<div style="display:none;" ID="cou1"><p><select name="specific_area"><%=Pre-defined ASP-variable1%></select>
</p></div>


<div style="display:none;" ID="cou2"><p><select name="specific_area"><%=Pre-defined ASP-variable2%></select></p></div>


<div style="display:none;" ID="cou3"><p><select name="specific_area"><%=Pre-defined ASP-variable3%></select>
</p></div>

<div style="display:none;" ID="cou4">
<p><select name="specific_area"><%=Pre-defined ASP-variable4%></select></p>
</div>


<div style="display:none;" ID="cou5"><p><select name="specific_area"><%=Pre-defined ASP-variable5%></select></p></div>


<div style="display:none;" ID="cou6"><p><select name="specific_area"><%=Pre-defined ASP-variable6%></select>

And here is the parent select....

<select name="bus_area">
<option value="6" selected onclick="toggle_visibility('cou0');">No Bus</option>
<option value="1" onclick="toggle_visibility('cou1');">name1</option>
<option value="2" onclick="toggle_visibility('cou2');">name2</option>
<option value="3" onclick="toggle_visibility('cou3');">name3</option>
<option value="4" onclick="toggle_visibility('cou4');">name4</option>
<option value="5" onclick="toggle_visibility('cou5');">name5</option>
</select>


Like I said, it works perfect in FireFox, but doesn't work at all in Explorer. The error I get is generic 'object expected'

Thanks again!

rangana
06-13-2008, 03:01 AM
Don't use onclick, use onchange instead.

You have a long lines of codes that could be reduced to:


<script type="text/javascript">
<!--
window.onload=function()
{
var sel=document.getElementsByTagName('select');
sel[0].onchange=function()
{
var divs=document.getElementsByTagName('div');
//This part is to reset the child select
for(var i=1;i<divs.length;i++)
{divs[i].style.display='none';}
//This part is to let the choosen option depict the divs to be seen
switch(this.value)
{
case this.value:
document.getElementById('cou'+this.value+'').style.display='';
break;
}
}
}
//-->
</script>


...and your parent select to:


<select name="bus_area">
<option value="0" selected>No Bus</option>
<option value="1">name1</option>
<option value="2">name2</option>
<option value="3">name3</option>
<option value="4">name4</option>
<option value="5">name5</option>
</select>

Note, the id of your div should be coun, where n is the number of div, the same as the value of your options.

Tested cross-browser, and hopefully should work.

barter
06-13-2008, 07:56 PM
hmmm.... can't seem to get this to work at all, in FF or IE. Not sure what is going on . The Div IDs are set properly, all the rest of the coding looks good as far as I can tell (although that don't mean much -- I'm more of a db type and I really don't know much about JS).

OK, here is the code:


<script type="text/javascript">
<!--
window.onload=function()
{
var sel=document.getElementsByTagName('select');
sel[0].onchange=function()
{
var divs=document.getElementsByTagName('div');
//This part is to reset the child select
for(var i=1;i<divs.length;i++)
{divs[i].style.display='none';}
//This part is to let the choosen option depict the divs to be seen
switch(this.value)
{
case this.value:
document.getElementById('cou'+this.value+'').style.display='';
break;
}
}
}
//-->
</script>

I tried to make the .style.display='block', that didn't work.


<select name="bus_area">

<option value="0" Selected>No Bus Pick Up Needed</option>
<option value=2>O1</option>
<option value=3>O2</option>
<option value=4>O3</option>
<option value=19>O6</option>
<option value=20>O5</option>
<option value=21>O7</option>
</SELECT>

Ok that was the parent, now for the children:


<div style="display:none;" ID="cou0"> </div>


<div style="display:none;" ID="cou1"><p><select name="specific_area"><option value="" Selected></option><option value="value1">20 some options</option></select>

<div style="display:none;" ID="cou2"><p><select name="specific_area"><option value="" Selected></option><option value="value2">20 some options</option></select>

<div style="display:none;" ID="cou3"><p><select name="specific_area"><option value="" Selected></option><option value="value3">20 some options</option></select>

<div style="display:none;" ID="cou4"><p><select name="specific_area"><option value="" Selected></option><option value="value4">20 some options</option></select>

<div style="display:none;" ID="cou5"><p><select name="specific_area"><option value="" Selected></option><option value="value5">20 some options</option></select>

<div style="display:none;" ID="cou6"><p><select name="specific_area"><option value="" Selected></option><option value="value6">20 some options</option></select>


I'm still lost. JS just doesn't make a whole lot of sense to me, but I think I'm catching on.

Thanks for looking!

rangana
06-14-2008, 02:35 AM
The error is not in the script but in the markups.
You're not closing your divs.

Highlighted should be added:


<div style="display:none;" ID="cou1"><p><select name="specific_area"><option value="" Selected></option><option value="value1">20 some options</option></select>
</div>
<div style="display:none;" ID="cou2"><p><select name="specific_area"><option value="" Selected></option><option value="value2">20 some options</option></select>
</div>
<div style="display:none;" ID="cou3"><p><select name="specific_area"><option value="" Selected></option><option value="value3">20 some options</option></select>
</div>
<div style="display:none;" ID="cou4"><p><select name="specific_area"><option value="" Selected></option><option value="value4">20 some options</option></select>
</div>
<div style="display:none;" ID="cou5"><p><select name="specific_area"><option value="" Selected></option><option value="value5">20 some options</option></select>
</div>
<div style="display:none;" ID="cou6"><p><select name="specific_area"><option value="" Selected></option><option value="value6">20 some options</option></select>
</div>

barter
06-16-2008, 04:17 PM
I'm sorry, I did not include that when I pasted that. This is not the error, the </div>'s are there, but I am still not able to get it to work in IE. The </p> is there as well.

abduraooft
06-16-2008, 05:34 PM
Validating the markup would help to solve errors in javascript. You may use http://validator.w3.org



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum