Javascript Show hide variable for form

Question

Here is the code I am having trouble with everyone. This is what I have been working on for 8 hours since I do not know js. I got most of this from the w3school.com site and just have been trying to piece everything together. ugh please help

<script type="text/javascript">
var stringToMatch = 'christopher',  
input = document.getElementById('text'),  
div = document.getElementById('divColor1');  

 function toggle (switchElement){  
 if (this.value == stringToMatch){  
    div.style.display = 'block';  
}  
else {  
    div.style.display = 'none';  
}  
};?  
 </script>


 <!--This is the start of the code which i want to appear--> 
 <h3>Coupon Redeem</h3> 
 <form action="test" method="post"> 
Please type in the Coupon Code you have recieved: 
 <form id='coupon' onChange="javascript: ShowMenu(document.getElementById('text').value,'divColor1');">  
<input id="text" type="text"> 
<input type="button" id="text" value="Redeem" onClick="toggle(this)" /> 
</form>
 <!--This is the start of the hidden field that i want to appear when the coupon code is entered     correctly--> 
<div id="divColor1" style="display:none;"> 
<form action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
<input type="hidden" name="cmd" value="_s-xclick"> 
<input type="hidden" name="hosted_button_id" value="asjsanxci"> 

  <input type="hidden" name="on0" value="Tokens">Tokens 
    <select name="os0"> 
  <o ption value="5 tokens">5 tokens$5.00 USD</option> 
 <option value="10 tokens">10 tokens$10.00 USD</option> 
 <option value="15 tokens">15 tokens$13.00 USD</option> 
 <option value="20 tokens">20 tokens$18.00 USD</option> 
 <option value="25 tokens">25 tokens$23.00 USD</option> 
 <option value="30 tokens">30 tokens$27.00 USD</option> 
 <option value="35 tokens">35 tokens$33.00 USD</option> 
 <option value="40 tokens">40 tokens$38.00 USD</option> 
  <option value="50 tokens">50 tokens$45.00 USD</option> 
 </select>  
&nbsp;&nbsp;&nbsp;&nbsp; 
<input type="hidden" name="on1" value="Username Verification">Username Verification 
 <input type="text" name="os1" maxlength="200"> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<input type="hidden" name="currency_code" value="USD"> 
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> 
</form> 
</div> 

<br> 
</form>

Sibu · Accepted Answer · 2012-07-31 04:09:18Z

1

your code has a syntax error

<div id="divColor1" style="displayed:none"

change that to

<div id="divColor1" style="display:none;">

also some other bugs that i found

<form id='coupon' onChange="javascript: ShowMenu(document.getElementById('text').var,'divColor1',);">

your ShowMenu is missing a variable, and another syntax error document.getElementById('text').var

>

<form id='coupon' 
    onChange="javascript: ShowMenu(document.getElementById('text').value,'divColor1');">

Update I have made some changes to your code. you can see the working code here

Updated code

<script>
var stringToMatch = 'christopher';  
function toggle (){  
 var input = document.getElementById('text').value; 

 if (input == stringToMatch){ 
    document.getElementById('divColor1').style.display = 'block';  
}  
else {  
   document.getElementById('divColor1').style.display = 'none';  
}  
};
</script>

 <!--This is the start of the code which i want to appear--> 
 <h3>Coupon Redeem</h3> 
 <form action="test" method="post"> 
Please type in the Coupon Code you have recieved: 
 <form id='coupon' onChange="javascript: ShowMenu(document.getElementById('text').value,'divColor1');">  
<input id="text" type="text"> 
<input type="button" id="text" value="Redeem" onClick="toggle()" /> 
</form>
 <!--This is the start of the hidden field that i want to appear when the coupon code is entered     correctly--> 
<div id="divColor1" style="display:none;"> 
<form action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
<input type="hidden" name="cmd" value="_s-xclick"> 
<input type="hidden" name="hosted_button_id" value="asjsanxci"> 

  <input type="hidden" name="on0" value="Tokens">Tokens 
    <select name="os0"> 
  <o ption value="5 tokens">5 tokens$5.00 USD</option> 
 <option value="10 tokens">10 tokens$10.00 USD</option> 
 <option value="15 tokens">15 tokens$13.00 USD</option> 
 <option value="20 tokens">20 tokens$18.00 USD</option> 
 <option value="25 tokens">25 tokens$23.00 USD</option> 
 <option value="30 tokens">30 tokens$27.00 USD</option> 
 <option value="35 tokens">35 tokens$33.00 USD</option> 
 <option value="40 tokens">40 tokens$38.00 USD</option> 
  <option value="50 tokens">50 tokens$45.00 USD</option> 
 </select>  
&nbsp;&nbsp;&nbsp;&nbsp; 
<input type="hidden" name="on1" value="Username Verification">Username Verification 
 <input type="text" name="os1" maxlength="200"> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<input type="hidden" name="currency_code" value="USD"> 
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> 
</form> 
</div> 

<br> 
</form>

edited Jul 31, 2012 at 4:09

answered Jul 30, 2012 at 12:30

Sibu

4,6272 gold badges30 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

nextlevelgamingCO Over a year ago

Ive been messing with code, since I have no variable in the javascript of ShowMenu, so i took that out. here is what i have so far... <h3>Coupon Redeem</h3> <form method="post" form id="coupon" onChange="javascript:(document.getElementById('text').value,'divColor1');"> Please type in the Coupon Code you have recieved: <input id="text" type="text"> <input type="button" value="Submit" onClick="javascript:(document.getElementById('divColor1');"> </form>

Sibu Over a year ago

@nextlevelgamingCO have you made all the necessary changes mentioned by blueiur and me..if so update your code

Sibu Over a year ago

@nextlevelgamingCO your code still has lots of bugs..i have made some changes..check my answer and see if it works.. i also have put jsfiddle link

nextlevelgamingCO Over a year ago

Sibu i see that you have it working. but sadly testing it in coffeecup editor it seems to hate me or something haha. I put the javascript in the head tags correct? then the rest in html?

nextlevelgamingCO Over a year ago

also I am using IE. could this be the problem.

|

blueiur · Accepted Answer · 2012-07-30 12:33:38Z

1

fix the code

displayed:none => display:none

var input = document.getElementById('text'); 
// your html don't have id='text' 

<input type="text"> => <input id='text' type="text">

you have to fix two problem then

it works!

good luck.

edited Jul 30, 2012 at 12:33

answered Jul 30, 2012 at 12:28

blueiur

1,5071 gold badge11 silver badges17 bronze badges

3 Comments

nextlevelgamingCO Over a year ago

my bad, i was fixing the code on here from my editor, and i wrote displayed. thank you for pointing out. but yes it says display just not working at all.

blueiur Over a year ago

you'r code have two problem one is display and two is id text field

nextlevelgamingCO Over a year ago

ok so still not working exactly yet. Do you think my submit button is in wrong place? also the ShowMenu what do i do with that??

Collectives™ on Stack Overflow

Javascript Show hide variable for form

2 Answers 2

9 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related