Change Form Fields On Subject Change. Multiple Fields hidden/shown 1

[hawkhorrow]

I have been trying to get this code to work for days now and I finally have to throw my hands up and ask for help. What seems like something easy is getting more difficult as I go line by line.

Here is the concept, upon clicking to send a contact form - depending on which subject the client chooses, it will correctly show which fields need to be entered based for that specific selection, and upon php submit it will run validation and send by email ALL fields. (will tackle those issues next)
The options for the subject bar, numbers 1&2 will never show/hide any specific fields (general entry), but be shown in Selection 3/4/5. selection #3 will show for example fields "a,b,c"; selection #4 will show "A,D,E" and #5 may show "D,F,G". I will post the excerpt of code I have been working with, omitting additional form fields which wont add to help the debug.

What I have been running into is when i code the single hide/show for selection # 3, it works perfectly. But when I go to code the combination of selection 3&4, selection#4 show/hide works, but #3 breaks.

Furthermore, the code that I am using does not work on radio buttons or checkboxes, which is a necessity for this specific application, so if anyone could assist adding that functionality as well, it would be much appreciative. [it is commented out at this time, feel free to modify] I appreciate any and all assistance with this and will, after it is finished, post the website for where you can find the form. (You can reference to it for a portfolio)
P.S. This form is going to need to submit without refresh happening, and I may also add that since I will be using other javascript to perform validation, I am slightly concerned that there may be some conflict between my current script and the jquery.validationEngine.js and jquery.jqtransform.js I will be using moving forward.

Thanks for any anticipated assistance!

[CODE<script type="text/javascript">
onload = function(e) {
//hide everything
document.forms["contactform"]["commod"].style.display = "none";
document.forms["contactform"]["shipweight"].style.display = "none";
document.forms["contactform"]["dimensions"].style.display = "none";
// document.forms["contactform"]["tarpreq"].style.display = "none";
// document.forms["contactform"]["eqrequest"].style.display = "none";
document.forms["contactform"]["dateavail"].style.display = "none";
document.forms["contactform"]["rate"].style.display = "none";
document.forms["contactform"]["mcnum"].style.display = "none";
document.forms["contactform"]["proref"].style.display = "none";
document.forms["contactform"]["eqavail"].style.display = "none";
document.forms["contactform"]["subject"].onchange = function (e) {
//show subject#3=sendinfo
e.target.form["commod"].style.display = e.target[e.target.selectedIndex].value == "sendinfo" ? "inline" : "none";
e.target.form["shipweight"].style.display = e.target[e.target.selectedIndex].value == "sendinfo" ? "inline" : "none";
e.target.form["dimensions"].style.display = e.target[e.target.selectedIndex].value == "sendinfo" ? "inline" : "none";
// e.target.form["tarpreq"].style.display = e.target[e.target.selectedIndex].value == "sendinfo" ? "inline" : "none";
// e.target.form["eqrequest"].style.display = e.target[e.target.selectedIndex].value == "sendinfo" ? "inline" : "none";
e.target.form["dateavail"].style.display = e.target[e.target.selectedIndex].value == "sendinfo" ? "inline" : "none";
//show subject#3&4=inform
e.target.form["commod"].style.display = e.target[e.target.selectedIndex].value == "inform" ? "inline" : "none";
e.target.form["shipweight"].style.display = e.target[e.target.selectedIndex].value == "inform" ? "inline" : "none";
e.target.form["dimensions"].style.display = e.target[e.target.selectedIndex].value == "inform" ? "inline" : "none";
// e.target.form["tarpreq"].style.display = e.target[e.target.selectedIndex].value == "inform" ? "inline" : "none";
// e.target.form["eqrequest"].style.display = e.target[e.target.selectedIndex].value == "inform" ? "inline" : "none";
e.target.form["dateavail"].style.display = e.target[e.target.selectedIndex].value == "inform" ? "inline" : "none";
e.target.form["rate"].style.display = e.target[e.target.selectedIndex].value == "inform" ? "inline" : "none";
//show subject#5=available
e.target.form["dateavail"].style.display = e.target[e.target.selectedIndex].value == "available" ? "inline" : "none";
e.target.form["mcnum"].style.display = e.target[e.target.selectedIndex].value == "available" ? "inline" : "none";
e.target.form["proref"].style.display = e.target[e.target.selectedIndex].value == "available" ? "inline" : "none";
// e.target.form["eqavail"].style.display = e.target[e.target.selectedIndex].value == "available" ? "inline" : "none";
};
document.forms["contactform"]["subject"].selectedIndex = 0;
}
</script>
</head>
<body>
<form id="contactform" action="">
<div>
<!--GENERAL TOP-Always Show-->
<label for="name">Name</label>
<input type="text" name="name" id="name" value="<?=$_SESSION['post']['name']?>" />
<br>
<!--SUBJECT-->
<select name="subject">
<option value="1" selected="selected">General Message / Inquiry</option>
<option value="2">I Want More Information</option>
<option value="sendinfo">I Need A Quote</option>
<option value="inform">I Have A Shipment</option>
<option value="available">I Have a Truck Available For A Shipment!</option>
</select>
<br>
<!-- CODE FOR sendinfo & inform-->
<label for="dateavail">Date Shipment Is Available:</label>
<input type="text" name="dateavail" id="dateavail" value="<?=$_SESSION['post']['dateavail']?>" />
<label for="commod">Commodity:</label>
<input type="text" name="commod" id="commod" value="<?=$_SESSION['post']['commod']?>" />
<label for="shipweight">Shipment Weight: </label>
<input type="text" name="shipweight" id="shipweight" value="<?=$_SESSION['post']['shipweight']?>" />
<label for="dimensions">Dimensions:</label>
<input type="text" name="dimensions" id="dimensions" value="<?=$_SESSION['post']['dimensions']?>" />
<!--<label for="tarpreq">Is A Tarp Required?: </label>
<label><input type="radio" name="tarpreq" value="yes" id="tarpreq_0" />Yes</label>
<label><input type="radio" name="tarpreq" value="no" id="tarpreq_1" />No</label>
<label><input type="radio" name="tarpreq" value="NA" id="tarpreq_2" />Unknown</label>-->
<!--<label for="eqrequest">Equipment To Ship On:</label>
<label><input type="checkbox" name="eqrequest" value="FB" id="eqrequest_0" />Flatbed</label>
<label><input type="checkbox" name="eqrequest" value="SD" id="eqrequest_1" />Step-Deck</label>
<label><input type="checkbox" name="eqrequest" value="V" id="eqrequest_2" />Dry Van</label>
<label><input type="checkbox" name="eqrequest" value="R" id="eqrequest_3" />Reefer</label>
<label><input type="checkbox" name="eqrequest" value="O" id="eqrequest_4" />Other/Special</label>-->
<!--CODE FOR INFORM-->
<label for="rate">Shipment Rate:</label>
<input type="text" name="rate" id="rate" value="<?=$_SESSION['post']['rate']?>" />
<br>
<!--Code For available-->
<label for="mcnum">Motor Carrier (MC)#:</label>
<input type="text" name="mcnum" id="mcnum" value="<?=$_SESSION['post']['mcnum']?>" />
<label for="proref">Reference# / Pro#:</label>
<input type="text" name="proref" id="proref" value="<?=$_SESSION['post']['proref']?>" />
<!--<label for="eqavail">Equipment Available:</label>
<label><input type="radio" name="eqavail" value="FSD" id="eqavail_0" />Flat/Step</label>
<label><input type="radio" name="eqavail" value="Van" id="eqavail_1" />Van</label>
<label><input type="radio" name="eqavail" value="Reefer" id="eqavail_2" />Reefer</label>
<label><input type="radio" name="eqavail" value="Other" id="eqavail_3" />Other</label>-->
</form>
</div>
</body>
</html>[/CODE]

 

[vacunita]

Your code is a little confusing and convoluted.
From what I can gather you want to show/hide form elements based on the dropdown selection.

[ol]
[li]Personally I wouldn't use the e object to access elements, instead I prefer to be deliberate in what I'm accessing. You need 2 things, the form object, and the dropdown object. Since both can be gotten from the dropdown object

<html>
<head><title>Confusing</title>
<script type="text/javascript">
function toggleElements(formObj,selectObj)
{
	
	formObj.elements["commod"].style.display = "none";	
	formObj.elements["shipweight"].style.display = "none";	
	formObj.elements["dimensions"].style.display = "none";	
	// document.forms["contactform"]["tarpreq"].style.display = "none";	
	// document.forms["contactform"]["eqrequest"].style.display = "none";	
	formObj.elements["dateavail"].style.display = "none";
	formObj.elements["rate"].style.display = "none";	
	formObj.elements["mcnum"].style.display = "none";	
	formObj.elements["proref"].style.display = "none";	
	//formObj.elements["eqavail"].style.display = "none";	
  if(typeof(selectObj) !== "undefined")
  {
	if(selectObj.value=='sendinfo' || selectObj.value=='inform')
	{
		formObj.elements["commod"].style.display = "inline";	
		formObj.elements["shipweight"].style.display = "inline";	
		formObj.elements["dimensions"].style.display = "inline";	
	}
	if(selectObj.value=='inform')
	{
		formObj.elements["dateavail"].style.display = "inline";
	}
	if(selectObj.value=='available')
	{
		formObj.elements["dateavail"].style.display = "inline";
		formObj.elements["mcnum"].style.display = "inline";	
		formObj.elements["proref"].style.display = "inline";	
	}
  }
	return false;
}


</script>
</head>
<body onload="toggleElements(document.getElementById('contactform'));">
<form id="contactform" name="contactForm" action="">
<div>
<!--GENERAL TOP-Always Show-->
<label for="name">Name</label>
<input type="text" name="name" id="name" value="<?=$_SESSION['post']['name']?>" />
<br>
<!--SUBJECT-->
<select name="subject" onchange="toggleElements(this.form,this);">
<option value="1" selected="selected">General Message / Inquiry</option>
<option value="2">I Want More Information</option>
<option value="sendinfo">I Need A Quote</option>
<option value="inform">I Have A Shipment</option>
<option value="available">I Have a Truck Available For A Shipment!</option>
</select>
<br>
<!-- CODE FOR sendinfo & inform--> 
<label for="dateavail">Date Shipment Is Available:</label>
<input type="text" name="dateavail" id="dateavail" value="<?=$_SESSION['post']['dateavail']?>" />
<label for="commod">Commodity:</label>
<input type="text" name="commod" id="commod" value="<?=$_SESSION['post']['commod']?>" />
<label for="shipweight">Shipment Weight: </label>
<input type="text" name="shipweight" id="shipweight" value="<?=$_SESSION['post']['shipweight']?>" />
<label for="dimensions">Dimensions:</label>
<input type="text" name="dimensions" id="dimensions" value="<?=$_SESSION['post']['dimensions']?>" />
<!--<label for="tarpreq">Is A Tarp Required?: </label>
<label><input type="radio" name="tarpreq" value="yes" id="tarpreq_0" />Yes</label>
<label><input type="radio" name="tarpreq" value="no" id="tarpreq_1" />No</label>
<label><input type="radio" name="tarpreq" value="NA" id="tarpreq_2" />Unknown</label>-->
<!--<label for="eqrequest">Equipment To Ship On:</label>
<label><input type="checkbox" name="eqrequest" value="FB" id="eqrequest_0" />Flatbed</label>
<label><input type="checkbox" name="eqrequest" value="SD" id="eqrequest_1" />Step-Deck</label>
<label><input type="checkbox" name="eqrequest" value="V" id="eqrequest_2" />Dry Van</label>
<label><input type="checkbox" name="eqrequest" value="R" id="eqrequest_3" />Reefer</label>
<label><input type="checkbox" name="eqrequest" value="O" id="eqrequest_4" />Other/Special</label>-->
<!--CODE FOR INFORM-->
<label for="rate">Shipment Rate:</label>
<input type="text" name="rate" id="rate" value="<?=$_SESSION['post']['rate']?>" />
<br>
<!--Code For available-->
<label for="mcnum">Motor Carrier (MC)#:</label>
<input type="text" name="mcnum" id="mcnum" value="<?=$_SESSION['post']['mcnum']?>" />
<label for="proref">Reference# / Pro#:</label>
<input type="text" name="proref" id="proref" value="<?=$_SESSION['post']['proref']?>" />
<!--<label for="eqavail">Equipment Available:</label>
<label><input type="radio" name="eqavail" value="FSD" id="eqavail_0" />Flat/Step</label>
<label><input type="radio" name="eqavail" value="Van" id="eqavail_1" />Van</label>
<label><input type="radio" name="eqavail" value="Reefer" id="eqavail_2" />Reefer</label>
<label><input type="radio" name="eqavail" value="Other" id="eqavail_3" />Other</label>-->
<input type="submit" value="SEND">

</form>
</div>
</body>
</html>

For the radio buttons and checkboxes, I'd wrap them in a fieldset and hide/show that.

<fieldset name="[b][COLOR=#992200]eqrequestset[/color][/b]">
<legend>Equipment To Ship On:</legend>
<label><input type="checkbox" name="eqrequest" value="FB" id="eqrequest_0" />Flatbed</label>
<label><input type="checkbox" name="eqrequest" value="SD" id="eqrequest_1" />Step-Deck</label>
<label><input type="checkbox" name="eqrequest" value="V" id="eqrequest_2" />Dry Van</label>
<label><input type="checkbox" name="eqrequest" value="R" id="eqrequest_3" />Reefer</label>
<label><input type="checkbox" name="eqrequest" value="O" id="eqrequest_4" />Other/Special</label>
</fieldset>

formObj.elements['[b][COLOR=#992200]eqrequestset[/color][/b]'].style.display = 'block';

P.S. This form is going to need to submit without refresh happening, and I may also add that since I will be using other javascript to perform validation, I am slightly concerned that there may be some conflict between my current script and the jquery.validationEngine.js and jquery.jqtransform.js I will be using moving forward.

That's not possible, submitting a form by definition requires a page change hence a refresh if it submits to itself. You can show/hide the elements without submitting though as shown above. What exactly do you wish to achieve by not refreshing?

The other validation code should not affect what this does.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[hawkhorrow]

Thank you so much!

Your code is a much MUCH better way to do the selects for what I need. I am not a javascript programmer so my code had come from someones example that I had found, and had tried to modify it for my specific purposes.

In regards to your refresh question, our website is dynamic and uses modal windows to show sitewide content. Upon bringing up a window, div's hide the background using a front overlay for the content they want to see- so basically when they click the contact form, the rest of our site will be grayed out using more javascript and jquery, only showing the contact form. When we click submit though, I do not want them to have to go directly back to our home page, but rather another modal window that says "Thank you for submitting form", please feel free to go elsewhere.
After doing a little reading, it appeared that this can be submitted using php to a form, which is why I will be using the session php tag...

Do you have a better suggestion on how I can achieve this?

Thank you again for all your help. I will pm you the link of the final site so you can see your hard work applied

 

[vacunita]

When we click submit though, I do not want them to have to go directly back to our home page, but rather another modal window that says "Thank you for submitting form", please feel free to go elsewhere.
After doing a little reading, it appeared that this can be submitted using php to a form, which is why I will be using the session php tag...

As I said submitting to a PHP page requires a page change, which will refresh the page.

If you wish to remain in your current page, and only show the message, you may want to look into Ajax, as it uses Javascript to contact a PHP script and have it run without submitting the page, hence no refresh.

forum1600

http://www.w3schools.com/ajax/default.asp

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[hawkhorrow]

Thank you. Will do.

While we are on the topic, do you have any ideas on a smarter way to hide/show the label fields along with the form entry fields?
I was trying to find a smart way to do this, but it seems like your miles ahead of me on this kinda stuff

 

[vacunita]

I would probably wrap both the label and the field in something with an id and hide that, to get both things at once.

Like I suggested with the radio buttons, you could use a fieldset, or a div perhaps. Alternatively you could give each label an ID, and set its display to none along with the input; though that seems like a lot work.

Another alternative, and the one I'd employ would be to simply wrap the labels around the elements, and hide them. This would effectively hide both the label and the element in one go. You can still access the element, and simply target its parentNode property, as that would reference the label around it.

[COLOR=#882200][b]<label[/b][/color] [b][COLOR=blue]for[/color][/b]="[COLOR=#009922]dateavail[/color]">[COLOR=gray]Date Shipment Is Available:
<input type="text" name="dateavail" id="dateavail" value="<?=$_SESSION['post']['dateavail']?>" />[/color] 
[COLOR=#882200][b]</label>[/b][/color]

formObj.elements["dateavail"].[COLOR=#882200][b]parentNode[/b][/color].style.display = "none";

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[hawkhorrow]

hmmmm....everything is working perfectly with the regular form fields.

I had tried to implement your code for the fieldset but its still not working with the

formObj.elements['eqrequestset'].style.display = 'block'

;
-or-

formObj.elements['eqrequestset'].parentnode.style.display = 'block'

;

Also, is the code line to unblock it :

formObj.elements['eqrequestset'].parentnode.style.display = 'inline';

Feel free to reference the actual live code@

http://www.shiptribros.com/test/index2.php

Implemented Using All Your Code (Which I am deeply grateful btw)

 

[hawkhorrow]

And that is using the

<fieldset name="eqrequestset">
<legend>Equipment To Ship On:</legend>
<label><input type="checkbox" name="eqrequest" value="FB" id="eqrequest_0" />Flatbed</label>
<label><input type="checkbox" name="eqrequest" value="SD" id="eqrequest_1" />Step-Deck</label>
<label><input type="checkbox" name="eqrequest" value="V" id="eqrequest_2" />Dry Van</label>
<label><input type="checkbox" name="eqrequest" value="R" id="eqrequest_3" />Reefer</label>
<label><input type="checkbox" name="eqrequest" value="O" id="eqrequest_4" />Other/Special</label>
</fieldset>

that you had provided previously (sorry forgot to include that in the previous post)

 

[vacunita]

block sets the element to be a block level element. Basically a Box with line breaks before and after it.

inline as its name implies sets the elements to have no line breaks. They will be in line.

none means its not displayed at all. This is all just altering CSS styles. Nothing more.

As far as the fieldset, seems IE does not recognize the fieldset as a form element so it can't be accessed through the form elements collection.
The easiest solution is to simply get an object reference directly using getElementById, or the parent node of the parent node of one of the checkboxes.

I'd use the direct approach.

var eqrequestObj = document.getElementById('eqrequestset');
[green]//setting the display property to none will hide the element and everything inside it.[/green]
eqrequestObj.style.display='none';

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[hawkhorrow]

Using your

var eqrequestObj = document.getElementById('eqrequestset');
eqrequestObj.style.display='none';

Looks Like it would work perfectly.
What is the code form you would use for the

<fieldset name="eqrequestset">
<legend>Equipment To Ship On:</legend>
<label><input type="checkbox" name="eqrequest" value="FB" id="eqrequest_0" />Flatbed</label>
<label><input type="checkbox" name="eqrequest" value="O" id="eqrequest_4" />Other/Special</label>
</fieldset>

as the browser does not correctly identify the fieldset.

Would it be (tested, doesn't work):

<label for="eqrequest">Equipment To Ship On:</label>
<label><input type="checkbox" name="eqrequest" value="FB" id="eqrequest_0" />Flatbed</label>
<label><input type="checkbox" name="eqrequest" value="O" id="eqrequest_4" />Other/Special</label>

Its Also Not (tested doesn't work)

<span id="eqrequestset">
<label for="eqrequest">Equipment To Ship On:</label>
<label><input type="checkbox" name="eqrequest" value="FB" id="eqrequest_0" />Flatbed</label>
<label><input type="checkbox" name="eqrequest" value="O" id="eqrequest_4" />Other/Special</label>
</span>

And would a radio button form element have a different coding structure?

Its allllllmost there!

 

[hawkhorrow]

Also, Ive been trying to implement another javascript on top of your functionality and as of right now, its just not working correctly. I'm trying to do the styling for the form fields using the fancyform(jqtransformplugin/jquery.jqtransform.js) plugin....

Should there be any reason that there is a conflict or anything that I could watch out for to avoid having this conflict between the two scripts?

See

http://www.shiptribros.com/test/index.php

vs

http://www.shiptribros.com/test/index2.php.

I will try and use the minimalistic version to upgrade the form layout now, which will be named

http://www.shiptribros.com/test/index3.php.

Hopefully this will work...

 

[vacunita]

For the field set and getElementById I forgot to add an I'd to the field set instead.

<fieldset id="eqrequestset" for="eqrequestset">
...

That should let the js pick up the element through the getElementById function as above.

The radio buttons should work exactly the same way.

As for conflicts, it would depend on what the other code is doing. As long as it doesn't alter the display property of the element's style it should be fine.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[hawkhorrow]

Thank you very much for your assistance. All the fields are working properly now and I could not do it without you. Now the next challenge, setting up the submit.php script. Can you point me in the right direction for one or do you think the phpmailer plugin would do it?

 

[vacunita]

You are very welcome, glad I could help.

As far as PHP mailer goes, it simply sends the email. It won't help you build it from your form fields. It should not be to difficult though, but just to keep this in the proper places I suggest you post in forum434 for specifics about building the email for phpmailer to send.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[hawkhorrow]

Hey Vacunita,

Thanks for all the help you have given, it has really allowed me to develop the form into something usable. Now I need to ask one more piece of help....

If you refer to

http://www.shiptribros.com/test/index2.php,

you will see a gigantic space right under the subject field of the form. Since this will be a part of a spiffy dynamic website, I need to essentially enable the form to have no "empty blocky space" when they click the subject. I believe this space is here because the form fields "are there", they are just hidden. Is there a way with the code in the js to allow it to hide/show those form fields specifically so it can dynamically change the size of space needed in the form? (basically I want to remove all unused empty form field space, and the code is implemented correctly (and works! yay!)) in the previous webpage for your reference. Thanks again!

 

[vacunita]

Its not the fields, but but all the <br> tags you have there. They aren't altered when the form fields are hidden, so they still provide the line breaks.

Remove them, and you'll see the space will disappear.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[hawkhorrow]

Vacunita,

Good afternoon. Since I still have some issues with the active website, and since you have been helping tremendously I thought maybe you could help me pin up the two final remaining issues on the final site.

Using reference in:

http://www.shiptribros.com/live/

1) The modal windows that popup have been implemented (or so I thought) with the functionality to "close on background click". The example used implemented worked correctly, but there seems to be a conflict when I added the modal windows. Due to the functionality of our website (and with limited js knowledge) I was unable to rewrite the code for the modal windows. Therefore, can you identify where the conflict is, and any possible workaround so that the modal windows correctly close upon background click?

2) a) When I click one modal window, then another in succession - the "close" button works correctly on the highest zindex modal, but then breaks for the other modal window opened. Any ideas?
b) When you click one modal window, and then another - can it "autoclose" the first modal and then go onto the second modal window?

Thanks again

 

[vacunita]

I'd suggest you ask the makers of the Reveal code as they would probably now. As it stands I would need to look through the reveal code and see what it does to even begin to find out why its not closing when you click the background.

As a quick guess, and based on their example, I'd say you are missing a background to click on.

They have a darker background div, that appears when the modal window opens which seems to be the one they use as the background to get the click to close the modal window.

As afar as opening other windows that can;t be closed then, I'd say its because once you open a second window you loose the reference to the last one, so it can no longer be closed by the code.

If I were doling this, I'd write a jquery routine, or even plain Javascript to close all modal Windows if they are open, and have it execute when you click on a button, before opening the target window.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech