How do you validate an HTML form using JavaScript? - javascript

I am creating a basic survey using the tag, but I am having trouble with using JavaScript to validate the form. I would like it to check all forms and not just one. Please help! Thanks! Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>SurveyBot v1</title>
</head>
<body>
<form action="">
What is your first name?: <input type="text" name="firstname"><br>
What is your last name?: <input type="text" name="lastname">
</form>
<h5>What is your gender?</h5>
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<h5>Which of the following vehicles do you own? (Check all that apply):</h5>
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Scooter">I have a scooter<br>
<input type="checkbox" name="vehicle" value="Quad">I have a quad<br>
<input type="checkbox" name="vehicle" value="Snowmobile">I have a snowmobile<br>
<input type="checkbox" name="vehicle" value="Skateboard">I have a skateboard<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
<h5>Which of the following car brands do you drive as your primary car?</h5>
<form action="">
<select name="cars">
<option value="none">None</option>
<option value="other">Other</option>
<option value="volvo">Volvo</option>
<option value="kia">Kia</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
<option value="honda">Honda</option>
<option value="mitsubishi">Mitsubishi</option>
<option value="toyota">Toyota</option>
<option value="ford">Ford</option>
</select>
</form>
<h5>Please check the box that says "I have finished" and press submit. Thank you for taking the survey.</h5>
<form name="input" action="html_form_action.html" method="get">
<input type="checkbox" name="finished" value="I am finished">I have finished<br>
<br><br>
<input type="submit" value="Submit">
</body>
</html>


Just add JavaScript function call near submit button.
<input type="submit" onclick="return validateForm(this.form);" />
Make JavaScript function. Take help from following link: link or you can google some examples.
Moreover, You need to put all stuffs inside single <form></form> tags to make it work. Else you need a workaround that makes your work more tedious.

Related

Disable All Form Elements with Radio Button

Trying to find a solution that allows me to enable ALL fields in a form if the first radio button (Feedback) is changed to "On" but the page must load with Feedback defaulting to "Off". All of the fields must load in the disabled state. If Feedback is changed to "on", other fields should become enabled. And then of course, if Off is selected, the fields become disabled again.
I've tried many bits and pieces of code, trying to patch together a single solution but I can't figure it out. Many of the solutions are based on very old versions of jQuery, and I'm using a current version. Not that jQuery is a requirement, pure JavaScript would be fine (if possible).
Grateful for any help. Here's the code.
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<label>Feedback</label>
<input id="controlon" class="w3-radio" type="radio" name="feedback" value="on">
<label>On</label>
<input id="controloff" class="w3-radio" type="radio" name="feedback" value="off" checked>
<label>Off</label>
<hr />
<label>Name</label>
<input id="name" class="" type="text" name="text">
<label>Species</label>
<select id="species" class="" name="species">
<option value="0" disabled selected>- Select -</option>
<option value="1">Cat</option>
<option value="1">Dog</option>
</select>
<label>Age</label>
<input id="kp" class="" type="radio" name="age" value="on">
<label>Kitten/Puppy</label>
<input id="adult" class="" type="radio" name="age" value="off" checked>
<label>Adult</label>
<label>Comments</label>
<textarea id="comments" class="" rows="4"></textarea>
<button id="send" class="">Send</button>
</body>
</html>

Here is what ended up working for me
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="w3-container">
<label>Feedback</label>
<input id="controlon" class="w3-radio" type="radio" name="feedback" value="on">
<label>On</label>
<input id="controloff" class="w3-radio" type="radio" name="feedback" value="off" checked>
<label>Off</label>
</div>
<hr />
<div class="w3-container">
<label>Name</label>
<input id="name" class="" type="text" name="text" disabled>
<label>Species</label>
<select id="species" class="" name="species" disabled>
<option value="0" disabled selected>- Select -</option>
<option value="1">Cat</option>
<option value="1">Dog</option>
</select>
<label>Age</label>
<input id="kp" class="" type="radio" name="age" value="on" disabled checked>
<label>Kitten/Puppy</label>
<input id="adult" class="" type="radio" name="age" value="off" disabled>
<label>Adult</label>
<label>Comments</label>
<textarea id="comments" class="" rows="4" disabled></textarea>
<button id="send" class="" disabled>Send</button>
</div>
<script>
$('input:radio[name="feedback"]').change(function() {
if ($(this).val()=='on') {
$('#name,#species,#kp,#adult,#comments,#send').attr('disabled', false);
}
else if ($(this).val()=='off') {
$('#name,#species,#kp,#adult,#comments,#send').attr('disabled', true);
}
});
</script>
</body>
</html>

You might need to be more specific about exactly you want enabled or disabled. Here's the general idea:
if (document.getElementById("controlon").checked === true) {
document.getElementById('whatever').disabled = false;
// or get multiple elements by whatever you want
}
For multiple fields you can do something like:
var inputs = document.getElementsByClassName('whatever');
for(var i = 0; i < inputs.length; i++) {
inputs[i].disabled = false;
}
Detect change / jquery:
$( ".w3-radio" ).change(function() {
if ($('#controlon').is(':checked')) {
// apply the same class to everything you want enabled
$('.whatever').prop("disabled", false);
} else {
$('.whatever').prop("disabled", true);;
}
});
working example:
https://codepen.io/jfitzsimmons/pen/QRboYj?editors=1111

AngularJS add selects based on dropdown value change

I have a form where users would be able to select the number of adults attending an event. Once this value is selected I would like a section to appear the has meal selection values for the number of adults chosen. IE, user selects 2 adults, Adult Meal 1 select appears, Adult Meal 2 select Appears. All I have right now are the form fields. I have researched and have seen that fields can be added dynamically, but I haven't figured out how to accomplish what I am trying to accomplish. Can anyone help?
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14 /angular.min.js"></script>
</head>
<body>
<form name="oitrsvp">
<div ng-app="">
<p><b>First Name : </b><input type="text" ng-model="fname" required></p>
<p><b>Last Name : </b><input type="text" ng-model="lname" required></p>
<p><b>Email Address : </b><input type="email" ng-model="email" required></p>
<label><b>How many parking passes will you need (for non-GT employees)?<b></label><br>
<select ng-model="model.ppass" convert-to-number>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<br>
<label><b>Please Select your meal time :</b></label><br>
<input type="radio" ng-model="mealtime" value="1">
11:30am
<br/>
<input type="radio" ng-model="mealtime" value="2">
12:30pm
<br/>
<br>
<label><b>How many adults will be attending with you?</b></label><br>
<select ng-model="model.numad" ng-change="addFields(model.numad)" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<label><b>How many children will be attending with you?</b></label><br>
<select ng-model="model.numch" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
</form>
</body>
</html>
UPDATE:
So I figured how to do this via JavaScript. I have divs set up to initially hide, but once a value in the dropdown in selected it shows that div. The problem I'm facing now is that I have two different drop downs that need to have this fnctionality, one for adults and one for children. When I select a number for the adults, the correct selects appear. Then when I go to the next dropdown for the children, the correct number of selects appear there too, but the selects for the adults go away. How cna I get them both to stay?
<!DOCTYPE html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
var currentlyShown = null;
function selectAdMeal(value){
//alert(value);
if(currentlyShown){
currentlyShown.style.display = 'none';
}
var elem='am_' + value;
// alert(elem);
currentlyShown = document.getElementById(elem);
if(currentlyShown){
currentlyShown.style.display = '';
}
}
function selectChMeal(value){
alert(value);
if(currentlyShown){
currentlyShown.style.display = 'none';
}
var elem='ch_' + value;
alert(elem);
currentlyShown = document.getElementById(elem);
if(currentlyShown){
currentlyShown.style.display = '';
}
}
</script>
</head>
<body>
<div ng-app="">
<form name="oitrsvp">
<p><b>First Name : </b><input type="text" ng-model="fname" required></p>
<p><b>Last Name : </b><input type="text" ng-model="lname" required></p>
<p><b>Georgia Tech Email Address : </b><input type="email" ng-model="gtemail" required></p>
<label><b>How many parking passes will you need (for non-GT employees)?<b></label><br>
<select ng-model="model.ppass" convert-to-number>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<h1>Hello {{fname}} {{lname}} {{model.ppass}}</h1>
<br>
<label><b>Please Select your meal time :</b></label><br>
<input type="radio" ng-model="mealtime" value="1">
11:30am
<br/>
<input type="radio" ng-model="mealtime" value="2">
12:30pm
<br/>
<br>
<label><b>How many adults will be attending with you?</b></label><br>
<select ng-model="numad" id='numad' onchange="selectAdMeal(this.options[this.selectedIndex].value);" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<div id="am_0" style="display:none;">
Please select the meal for yourself:<br>
<input type="radio" ng-model="selfmeal" value="p">
Pork<br>
<input type="radio" ng-model="selfmeal" value="c">
Chicken<br>
<input type="radio" ng-model="selfmeal" value="v">
Vegetarian
<br><br>
</div>
<div id="am_1" style="display:none;">
Please select the meal for yourself:<br>
<input type="radio" ng-model="selfmeal" value="p">
Pork<br>
<input type="radio" ng-model="selfmeal" value="c">
Chicken<br>
<input type="radio" ng-model="selfmeal" value="v">
Vegetarian
<br><br>
Please select the meal for Adult 1:<br>
<input type="radio" ng-model="ad1meal" value="p">
Pork<br>
<input type="radio" ng-model="ad1meal" value="c">
Chicken<br>
<input type="radio" ng-model="ad1meal" value="v">
Vegetarian
</div>
<div id="am_2" style="display:none;">
Please select the meal for yourself:<br>
<input type="radio" ng-model="selfmeal" value="p">
Pork<br>
<input type="radio" ng-model="selfmeal" value="c">
Chicken<br>
<input type="radio" ng-model="selfmeal" value="v">
Vegetarian
<br><br>
Please select the meal for Adult 1:<br>
<input type="radio" ng-model="ad1meal" value="p">
Pork<br>
<input type="radio" ng-model="ad1meal" value="c">
Chicken<br>
<input type="radio" ng-model="ad1meal" value="v">
Vegetarian
<br><br>
Please select the meal for Adult 2:<br>
<input type="radio" ng-model="ad2meal" value="p">
Pork<br>
<input type="radio" ng-model="ad2meal" value="c">
Chicken<br>
<input type="radio" ng-model="ad2meal" value="v">
Vegetarian
<br><br>
</div>
<label><b>How many children will be attending with you?</b></label><br>
<select ng-model="numch" id='numch' onchange="selectChMeal(this.options[this.selectedIndex].value);" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<div id="ch_0" style="display:none;">
</div>
<div id="ch_1" style="display:none;">
Please select the meal for Child 1:<br>
<input type="radio" ng-model="ch1meal" value="hd">
Hot Dog<br>
<input type="radio" ng-model="ch1meal" value="h">
Hamburger<br>
<input type="radio" ng-model="ch1meal" value="v">
Vegetarian
</div>
<div id="ch_2" style="display:none;">
Please select the meal for Child 1:<br>
<input type="radio" ng-model="ch1meal" value="hd">
Hot Dog<br>
<input type="radio" ng-model="ch1meal" value="h">
Hamburger<br>
<input type="radio" ng-model="ch1meal" value="v">
Vegetarian
<br><br>
Please select the meal for Child 2:<br>
<input type="radio" ng-model="ch2meal" value="hd">
Hot Dog<br>
<input type="radio" ng-model="ch2meal" value="h">
Hamburger<br>
<input type="radio" ng-model="ch2meal" value="v">
Vegetarian
<br><br>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
</form>
</div>
</body>
</html>

In AngularJs you have ng-show attribute, You can set the appearance of an element according to variable in the scope:
<body ng-app="myApp">
<div ng-controller="myctrl">
<form name="oitrsvp">
<select ng-model="numad" id='numad' convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="am_0" ng-show="numad=='0'">am_0</div>
<div id="am_1" ng-show="numad=='1'">am_1</div>
<div id="am_2" ng-show="numad=='2'">am_2</div>
<select ng-model="numch" id='numch' convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="ch_0" ng-show="numch=='0'">
ch_0
</div>
<div id="ch_1" ng-show="numch=='1'">
ch_1
</div>
<div id="ch_2" ng-show="numch=='2'">
ch_2
</div>
</form>
</div>
var myApp = angular.module('myApp',[]);
myApp.controller("myctrl",function(){
});

Result of the radio buttons does not work properly if I have the code for both of the options

I have a problem, i have two radio buttons which if you select on the Doctor radio button it will display all the next fields which are needed to show for the doctors and the same we want to happen if you select the patient radio button , i did it to work fine if I have the code for the patient for example but if i write the code also for the doctor it destroy the result of the both options
HERE IS THE CODE...
<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<fieldset>
<legend>Registration Form</legend>
<label>First Name
<input type="text" name="fname" required="required" />
</label>
<br/>
<br/>
<label>Last Name
<input type="text" name="lname" required="required" />
</label>
<br />
<br />
<label>Username
<input type="text" name="username" required="required" />
</label>
<br />
<br />
<label>Email
<input type="text" name="email" required="required" />
</label>
<br />
<br />
<label>Password
<input type="text" name="password" required="required" />
</label>
<br/><br/>
User Type:
<br/>
Doctor <input type="radio" name="answer" value="Doctor" />
Patient <input type="radio" name="answer" value="Patient" />
<br/>
<br/>
<!--DOCTOR OPTIONS
<label style="display:none;" id="Male">Male</label>
<input style="display:none;" type="radio" name="DoctorG" value="male" id="DoctorGM">
<label style="display:none;" id="Female">Female</label>
<input style="display:none;" type="radio" name="DoctorG" value="male" id="DoctorGF">
<br/>
<br/>
<label style="display:none;" id="Age">Age:</label>
<input style="display:none;" type="text" name="DoctorAge" id="DoctorAge" />
<br/>
<br/>
<label style="display:none;" id="Specialty">Specialty:</label>
<select style="display:none;" id="SelectSpecialty">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
<label style="display:none;" id="ID">Doctor ID:</label>
<input style="display:none;" type="text" name="Doctor_ID" id="Doctor_ID" />
-->
<!--PATIENT OPTIONS -->
<label style="display:none;" id="Male">Male</label>
<input style="display:none;" type="radio" name="PatientGender" value="male" id="PatientGM">
<label style="display:none;" id="Female">Female</label>
<input style="display:none;" type="radio" name="PatientGender" value="male" id="PatientGF">
<br/>
<br/>
<label style="display:none;" id="Age">Age:</label>
<input style="display:none;" type="text" name="PatientAge" id="PatientAge" />
<br/>
<br/>
<label style="display:none;" id="Disease">Disease:</label>
<select style="display:none;" id="SelectDisease">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
<label style="display:none;" id="SPID">SPID:</label>
<input style="display:none;" type="text" name="PatientSPID" id="PatientSPID" />
</fieldset>
</body>
<script>
$("input[type='radio'][name='answer']").change(function () {
if ($(this).val() == "Doctor") {
$("#DoctorGM").show();
$("#DoctorGF").show();
$("#DoctorAge").show();
$("#SelectSpecialty").show();
$("#Male").show();
$("#Female").show();
$("#Age").show();
$("#Disease").show();
$("#ID").show();
$("#Doctor_ID").show();
} else {
$("#PatientGM").hide();
$("#PatientGF").hide();
$("#PatientAge").hide();
$("#SelectDisease").hide();
$("#Male").hide();
$("#Female").hide();
$("#Age").hide();
$("#Disease").hide();
$("#ID").hide();
$("#Doctor_ID").hide();
}
if ($(this).val() == "Patient") {
$("#PatientGM").show();
$("#PatientGF").show();
$("#PatientAge").show();
$("#SelectDisease").show();
$("#Male").show();
$("#Female").show();
$("#Age").show();
$("#Disease").show();
$("#SPID").show();
$("#PatientSPID").show();
} else {
$("#PatientGM").hide();
$("#PatientGF").hide();
$("#PatientAge").hide();
$("#SelectDisease").hide();
$("#Male").hide();
$("#Female").hide();
$("#Age").hide();
$("#Disease").hide();
$("#SPID").hide();
$("#PatientSPID").hide();
}
});</script>
</html>
PS 1: I COMMENTED THE CODE FOR THE DOCTOR IN ORDER TO WORK PROPERLY FOR THE PATIENT
PS 2: http://jsfiddle.net/niklakis/qp7s409a/24/ HERE IS A LINK TO SEE WHAT HAPPENS IF A HAVE BOTH OF THE CODE

Assuming you can edit the HTML of this form, you should put the extra fields inside separate divs and hide just those divs. Then, your jQuery becomes much simpler, too.
Now in this jQuery, what we're doing is hiding both of the "expansion" sections by default. That's the line $("[id^=expand]").hide(). What this does is select all elements whose id starts with expand and hides them.
Then, we select the expansion section associated with the clicked radio and show that.
$("input[type='radio'][name='answer']").change(function() {
$("[id^=expand]").hide();
$("#expand" + $(this).val()).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
User Type:
<br/>Doctor
<input type="radio" name="answer" value="Doctor" />
Patient
<input type="radio" name="answer" value="Patient" />
<!--DOCTOR OPTIONS -->
<div id="expandDoctor" style="display:none;">
<label id="Male">Male</label>
<input type="radio" name="DoctorG" value="male" id="DoctorG">
<label id="Female">Female</label>
<input type="radio" name="DoctorG" value="male" id="DoctorG">
<br/>
<br/>
<label id="Age">Age:</label>
<input type="text" name="DoctorAge" id="DoctorAge" />
<br/>
<br/>
<label id="Specialty">Specialty:</label>
<select id="SelectSpecialty">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
<label id="ID">Doctor ID:</label>
<input type="text" name="Doctor_ID" id="Doctor_ID" />
</div>
<!--PATIENT OPTIONS -->
<div id="expandPatient" style="display:none;">
<label id="Male">Male</label>
<input type="radio" name="PatientG" value="male" id="PatientGM">
<label id="Female">Female</label>
<input type="radio" name="PatientG" value="male" id="PatientGF">
<br/>
<br/>
<label id="Age">Age:</label>
<input type="text" name="PatientAge" id="PatientAge" />
<br/>
<br/>
<label id="Disease">Disease:</label>
<select id="SelectDisease">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
<label id="SPID">SPID:</label>
<input type="text" name="PatientSPID" id="PatientSPID" />
</div>
</fieldset>
However, you were having your problem because you were trying to show and hide elements that weren't actually there. For example, you were trying to show/hide #DoctorGM, which doesn't exist, you only have #DoctorG. You should change those ids, too, because it's invalid to have any elements sharing the same id in HTML.

Copy select value data form one form to another without button in form1

Hi I have problems to figure out how to copy select value data from one form to another form. I need a copy javascript for this I guess.
Form1
<form id="form1" name="form1">
<input type="checkbox" name="email'.$emailCount++.'" value="'.email.'"/>
<input type="hidden" name="name'.$nameCount++.'" value="'.$id.'"/>
</form>
Form2
<form id="form2" method="POST" action="script/do-something.php" name="form2">
<label for="name">Add Selected</label>
<select name="list" id="list" class="form-text">
<option value="">Add To List</option>
<option value="All">All</option>
<option value="All">Blog</option>
<option value="All">Dj</option>
</select>
<input type="hidden" name="name'.$nameCount++.'" value="'.$id.'"/>
<input type="button" name="new_address" id="clicky3" value="Add Selected">
</form>

Javascript Show hide variable for form

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>
<input type="hidden" name="on1" value="Username Verification">Username Verification
<input type="text" name="os1" maxlength="200">
<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>

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>
<input type="hidden" name="on1" value="Username Verification">Username Verification
<input type="text" name="os1" maxlength="200">
<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> ​

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.

Categories

Resources