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!

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

Modifying form button style after two form selections made 1

Status
Not open for further replies.
Overspeed

Overspeed

Programmer
Jul 10, 2007
15
CA
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
 
Sort by date Sort by votes
Hi

In a perfect world you would read the documentation before writing stupidities like "[tt]display:hidden[/tt]". Sorry, I will not point out the rest of bugs, I simply have no time. Giving you a solution takes less time, so here it is :
Code: 
<html>
<head>
<title></title>
<script type="text/javascript">
function showButton(theSelect)
{
  var theButton=document.getElementById('whatever');
  theButton.style.visibility=theSelect.selectedIndex==0?'hidden':'visible';
}
</script>
</head>
<body>
<form id="form1">
<select name="country" onchange="showButton(this)">
<option value="">Please choose...</option>
<option value="CA">Canada</option>
<option value="US">United States</option>
</select>
<input type="submit" value="Submit" style="visibility:hidden" id="whatever">
</form>
</body>
</html>

Feherke.
 
Upvote 0 Downvote
feherke,

Thank you for your response. I did catch that css bug after posting my appologies. How would we modify your example to accommodate two select fields that must both have a valid selection before the submit appears? And where the button would dissapear if any given valid selection was changed?

Again I really appreciate your efforts.

Jenny
 
Upvote 0 Downvote
Hi

Code: 
<html>
<head>
<title></title>
<script type="text/javascript">
var depends=new Array('country','second');
function showButton()
{
  var ok=true;
  for (var i=0,dl=depends.length;i<dl;i++)
  if (!(one=document.getElementById(depends[i])) || one.selectedIndex==0) ok=false;
  var theButton=document.getElementById('whatever');
  theButton.style.visibility=ok?'visible':'hidden';
}
</script>
</head>
<body>
<form id="form1">
<select name="country" id="country" onchange="showButton()">
<option value="">Please choose...</option>
<option value="CA">Canada</option>
<option value="US">United States</option>
</select>
<select name="second" id="second" onchange="showButton()">
<option value="">Please choose...</option>
<option value="foo">bla</option>
<option value="bar">bla bla</option>
</select>
<input type="submit" value="Submit" style="visibility:hidden" id="whatever">
</form>
</body>
</html>

Feherke.
 
Upvote 0 Downvote
Feherke,

I owe you a beer or wine depending on where your from. Thank you much.

J
 
Upvote 0 Downvote
Feherke,

Odd things are happening. I integrated your script into a test page. It works fine in IE, Opera, but no go in FF or NS. If I fun your script as written in FF or NS it works, just not when integrated into my page. Here are two pages with different features:

Works in IE, doesn't in FF, modified code a little:

This page uses your exact script, doesn't work in FF:

I have looked the script over and over and can't figure out why it fails, yet when I use your code as written it does.

Jenny
 
Upvote 0 Downvote
Ok...

RIGHT after I worte this post I found the problem in that I didn't include the ID's in each select as YOU HAD WRITTEN. It's 4am and had a long day, sorry to bother you.

J
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
176
gmmastros
gmmastros
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
561
Rayj0000
Rayj0000
TheLazyPig
  • Locked
  • Question
Disable radio button after edit button click
Replies
1
Views
173
xwb
xwb
berkshirea
  • Locked
  • Question
Radio Button Clicked, Another Radio Becomes Mandatory 1
Replies
2
Views
552
berkshirea
berkshirea
dvannoy
  • Locked
  • Question
Enable ASP button
Replies
1
Views
147
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top