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!

Show <div> if 2 inputs match

Status
Not open for further replies.
Diggum1

Diggum1

Programmer
Oct 14, 2004
67
US
Hey all, I've started a script but can't quite get it right.

I have two inputs for email address and confirm email address. If both those fields have the same value, then a <div> containing a checkbox should display. If they don't match, it should stay hidden.

That catch is that the script needs to trigger on both page load (if the fields are pre-popped), and as they fill out the confirm field.

This is what I have so have (has multiple issues):

<script>
function showAgree() {
if (document.getElementById("email").value=document.getElementById("confirm").value) {
document.getElementById("agree").style.display = '';
}
else {
document.getElementById("agree").style.display = 'none';
}
}

</script>
</head>

<body>
Email Address
<label>
<input type="text" name="email" id="email" />
</label>
<p>Confirm Address
<label>
<input type="text" name="confirm" id="confirm" onKeyUp="showAgree();"/>
</label>
</p>


<div id="agree">
<label>
<input type="checkbox" name="checkbox" id="checkbox" />
</label>
I agree to receive emails
</div>

</body>

Any ideas?

Thanks
RK
 
Sort by date Sort by votes
Just so you know, posting your code within [ignore]
Code:
[/ignore] tags makes it much easier to read.

As for your problem, you need to change this::
Code: 
function showAgree() {
if (document.getElementById("email").value=[!]=[/!]document.getElementById("confirm").value) {
    document.getElementById("agree").style.display = '';
    }
else {
    document.getElementById("agree").style.display = 'none';
    }
}

A single equal sign in javascript is the assignment operator. A double equal sign is the comparision operator.

Additionally, if you want the script to run on page load then do this:
Code: 
window.onload = showAgree;

And, one final thing. When the page first loads and the values aren't prepopulated the comparison will be true because both text fields will be blank, so you're probably gonna wanna check for that too:
Code: 
if ([!]document.getElementById("email").value.length[/!] && document.getElementById("email").value=[!]=[/!]document.getElementById("confirm").value) {

The added bit I put above checks the length of the value in the field. If it's 0 (or in other words, empty) it will return 0 which is the same as false, and the condition will not trigger.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
 
Upvote 0 Downvote
This is great,works fine, thanks!

My only question is where does the window.onload go?
 
Upvote 0 Downvote
My only question is where does the window.onload go?
Click to expand...

Anywhere within the script tags.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
 
Upvote 0 Downvote
You're welcome.

You know, it's a shame that there's not a link on this site that says Tell xxxxx "you're welcome" for the thanks he gave you

It would go great beside the thank xxxx for this valuable post link. [lookaround] [small]hint hint[/small]

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
718
Kennelbloke
Kennelbloke
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
1K
ggriffit
ggriffit
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
671
xwb
xwb
chrisjchrisj
  • Locked
  • Question
Allow camera access - show camera view -- don’t start recording video
Replies
0
Views
146
chrisjchrisj
chrisjchrisj
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
386
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top