Hello all,

This is my first time here and my first post so please bear with me as I an new to the world of JS. I have been asked to implement a "unique" function on a form on our Website. You see we are setting up a PayPal cart and we need to have 2 SELECT fields where users select their country and tax. To prevent users from submitting before an option is selected from each field I would like the submit button the be hidden using CSS. I was able to creating something basic using the coding below for only 1 form field:

HTML

<form id="form1">
<select name="country">
<option value="">Please choose...</option>
<option value="CA">Canada</option>
<option value="US">United States</option>
</select>
<input type="submit" value="Submit" style="display:hidden;">
</form>

JS

function showButton(objectID) {
var theElementStyle = document.getElementById(objectID);
if(theElementStyle.style.display == "hidden") {
theElementStyle.style.display = "visible"; }
}

Mergine the two

<form id="form1">
<select name="country">
<option value="">Please choose...</option>
<option value="CA" onSelect="showButton('omega');return false;">Canada</option>
<option value="US" onSelect="showButton('omega');return false;">United States</option>
</select>
<input id="omega" type="submit" value="Submit" style="display:hidden;">
</form>

Of course this does not handle two form elements. In a perfect world the final product would work as follows:

A user MUST select a value from each select field that is not "Please choose..." as it has a null value.

Only after a valid selection is made from both fields would the button be set to visible

And the script would need some sort or protection against a user selecting two valid options, making the button appear, and then selecting the "Please choose..." which would leave the button visible. It might work like something below (not real code):

if (form.form1.country.value NOT == null AND form.form1.tax.value NOT == null {
omega.style.display = "visible";
} else {
omega.style.display = "hidden";
}

I would have no idea however, how to call this fantasy function ... it would need to be monitoring the form at all times for valid selections. If two valid selections are made the button is visible otherwise it is not. Please, any help with this would be forever appreciated. I am studying my JS manuals and maybe one day I can return the favor. Thank you.

Hugz

Jenny