javascript popup window with switch statement - javascript

Create a button called “GO TO OTHER WEBSITES” on your form that will call a function to give a popup window to go to the user’s choice of url and window size.
The function will use a prompt box to give the user at least 3 choices of urls (other websites related to your website) to choose from.
Use a switch statement to set the chosen url and validate the user choice, do not continue until you have a valid choice.
The user will then be prompted to enter the height and width of the window in pixels. This must be validated for a minimum height and width of 500. Do not continue until you have a valid height and width.
Display the chosen url in a window using this resolution. (Hint: to set the additional properties of the window.open method you will need to create a string variable to set the width and height.)
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<script src= "../javascript/a1.js"></script>
<title>HTML5 Template</title>
</head>
<body>
<h1>Sign Up form</h1>
<form name="userForm" onsubmit= "return validateForm()" >
First name: <input type="text" id="firstname" size="30" />
<br><br>
Last name: <input type="text" id="lastname" size="30" />
<br><br>
Postcode: <input type="text" id="postcode" size="30" />
<br><br>
Email: <input type="text" id="email" size="30" />
<br><br>
<h1>Payment details</h1>
<br>
Credit Card:<select name="Credit Card">
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
<option value="American Express">American Express</option>
</select>
<br><br>
Card Number: <input type="text" id="cardnumber" size="30" />
<br><br>
CCV: <input type="text" id="ccv" size="30" />
<br><br>
Expiry MM/YY:<SELECT id="exMonth" title="select a month" >
<OPTION VALUE="0" SELECTED>--Month--
<OPTION VALUE="01">01
<OPTION VALUE="02">02
<OPTION VALUE="03">03
<OPTION VALUE="04">04
<OPTION VALUE="05">05
<OPTION VALUE="06">06
<OPTION VALUE="07">07
<OPTION VALUE="08">08
<OPTION VALUE="09">09
<OPTION VALUE="10">10
<OPTION VALUE="11">11
<OPTION VALUE="12">12
</SELECT> /
<SELECT id="exYear" title="select a year">
<OPTION VALUE="0" SELECTED>--Year--
<OPTION VALUE="2016">2016
<OPTION VALUE="2017">2017
<OPTION VALUE="2018">2018
<OPTION VALUE="2019">2019
<OPTION VALUE="2020">2020
<OPTION VALUE="2021">2021
<OPTION VALUE="2022">2022
<OPTION VALUE="2023">2023
<OPTION VALUE="2024">2024
<OPTION VALUE="2025">2025
<OPTION VALUE="2026">2026
<OPTION VALUE="2027">2027
</SELECT>
<br><br>
<input type="submit" value="Submit Form" />
<input type="button" onClick="Help()" value="Help">
</form>
</body>
</html>
Here is my java script code
function validateForm()
{
var firstname=document.getElementById("firstname");
var lastname=document.getElementById("lastname");
var postcode=document.getElementById("postcode");
var email=document.getElementById("email");
var cardnumber=document.getElementById("cardnumber");
var ccv=document.getElementById("ccv");
//var message= ""
// message += \n makes all the message display in one box //
if (firstname.value=="")
{
alert("Please enter your first name");
firstname.focus();
return false;
}
if (lastname.value==""){
alert("Please enter your last name");
lastname.focus();
return false;
}
if (postcode.value.length!=4 || isNaN(postcode.value)){
alert("Please enter 4 numbers for your postcode");
postcode.focus();
return false;
}
if (email.value.indexOf("#")== -1 ) {
alert("Please include # symbol");
email.focus();
return false;
}
if (email.value.indexOf(".")== -1 ) {
alert("Please include . symbol");
email.focus();
return false;
}
if (cardnumber.value.length!=16 || isNaN(cardnumber.value)){
alert("Please enter yout 16 digit credit card number");
cardnumber.focus();
return false;
}
if (ccv.value.length!=3 || isNaN(cardnumber.value)){
alert("Please enter yout 3 digit ccv");
ccv.focus();
return false;
}
alert("Thank you for your submission");
return true;
}
function Help() {
var Window1 = window.open("", "", "width=350, height=100");
Window1.document.write("<p>Required fields cannot be left blank<br>The email address must contain an # and a dot<br>The credit card month and year must be valid<br>The postcode must contain four numbers<br>Enter the ccv<p>")
return;
}

Related

Why doesn't Javascript validate my html code?

This is my first attempt at working with javascript and forms; for some reason my html website elements aren't being validated and I am not sure why. My goal with this form is trying to validate the elements that have an '*' next to them. For some reason the only element that is being validated is email and nothing else. Name, dates, the checkbox aren't. I have been trying to find a fix, but nothing seems to work.
<!doctype html>
<html>
<head>
<link href="styles.css" rel="stylesheet">
<script src="script.js"></script>
<meta charset="utf-8">
<title>Form</title>
</head>
<body>
<div class="container">
<h1>Travel Reservation Form</h1>
<h4>* denotes mandotory field</h4>
<form name="myForm" action="action_page.php" onsubmit="return validateForm()" method="post">
<fieldset>
<legend>Personal Details</legend>
<label class="align">Full name:<span>*</span></label> <input type="text" name="fullname" placeholder="James Bond">
<br><br>
<label class="align">Email<span>*</span></label>
<input type="email" name="mail" placeholder="james#gmail.com">
<br><br>
<label class="align">Date of Birth<span>*</span></label> <input type="date" name="DOB" placeholder="dd/mm/yy">
</fieldset>
<br>
<label>Select Tour Package<span>*</span>:</label>
<select name="package">
<option value="1">Tokyo</option>
<option value="2">Shanghai</option>
<option value="3">Bangkok</option>
<option value="4">Jakarta</option>
<option value="5">Mumbai</option>
</select>
<label>Number of persons<span>*</span>:</label>
<select name="party">
<option value="1">One Adult</option>
<option value="2">Two Adults</option>
<option value="3">Three Adults</option>
<option value="4">Four Adults</option>
<option value="5">Five Adults</option>
</select>
<br><br>
<label>Arrival Date<span>*</span>:</label> <input type="date" name="arrival" placeholder="dd/mm/yy">
<br><br>
<p>What Intrests you the most?<span>*</span>:</p>
<input class="alignp" type="checkbox" name="interest" value="shopping"> Shopping <br><br>
<input class="alignp" type="checkbox" name="interest" value="dining"> Dining <br><br>
<input class="alignp" type="checkbox" name="interest" value="dancing"> Dancing <br><br>
<input class="alignp" type="checkbox" name="interest" value="SightS"> Sightseeing <br><br><br>
<label>Discount Coupon code:</label> <input type="text" name="dis_code" value=""><br><br>
<label>Terms and Conditions<span>*</span><input type="radio" name="tos" value="yes" checked>I agree</label>
<input type="radio" name="tos" value="yes">I disagree
<p>Please provide any additional information below:- </p>
<textarea name="message" rows="5" cols="45" placeholder="Please type here...."></textarea><br><br>
<button class="btn-submit" type="submit" value="Submit">Submit</button>
<button class="btn-reset" type="reset" value="Reset">Reset</button>
</form>
</div>
</body>
</html>
Here is the javascript that is being linked in the html. I am unsure whether the issue is with my html code or with my javascript.
// JavaScript Document
function validateForm()
{
var name = document.forms["myForm"]["name"].value;
var email = document.forms["myForm"]["email"].value;
var dob = document.forms["myForm"]["DOB"].value;
var packages = document.forms["myForm"]["package"].value;
var arrival = document.forms["myForm"]["arrival"].value;
//var interest = document.forms["form"]["interest"].value;
var ToS = document.forms["myForm"]["tos"].value;
var checkbox = document.querySelector('input[name="interest"]:checked');
var matches = name.match(/\d+/g);
if (matches != null) {
alert("Name has a number in it!");
}
if (name == "") {
alert("Name must be filled out");
return false;
}
if (email == "") {
alert("Email must be filled out");
return false;
}
if (dob == "") {
alert("Date of Birth must not be empty");
return false;
}
if (arrival == "") {
alert("Arrival Date must not be empty");
return false;
}
if(ToS == false) {
alert("You must agree to the Terms of Service");
return false;
}
if(validateEmail(email) == false){
alert("Must enter a valid email");
}
re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
if(dob != '' && !dob.match(re)) {
alert("Invalid date format");
return false;
}
if(arrival != '' && !arrival.match(re)) {
alert("Invalid arrival date format") ;
return false;
}
if(name.length >= 30){
alert("Name must be less than 30 characters!");
return false;
}
if(!checkbox){
alert("Please select an interest!");
return false;
}
}
function validateEmail(email)
{
return /\S+#\S+\.\S+/.test(email);
}
So I have no idea what your PHP form did, so I actually just pulled all the form code for now. There were a lot of little issues but honest mistakes. Example: you don't want a return statement after every validation if you want to continue validating the rest of the fields. I combined some separate validations into if/else's since they were validations on the same field. I used ID's to make my life easier and since I dumped the form code. Feel free to swap back to what you want. I also updated your regex since the date field returns YYYY/MM/DD. Since this doesn't post anywhere you can play with it for a while, before tying back into your php form. I also pulled the check for 30 characters and added a max field length to name. You could also set min and max date ranges for the date fields and a bunch of other things to help make the fields themselves more foolproof. There are also libraries that handle this kind of thing for you, you don't have to re-invent the wheel, but if you're just looking to play around with it this should get you started. Good Luck
<!doctype html>
<html>
<body>
<div class="container">
<h1>Travel Reservation Form</h1>
<h4>* denotes mandotory field</h4>
<fieldset>
<legend>Personal Details</legend>
<label class="align">Full name:<span>*</span></label> <input type="text" name="fullname" id='name' maxlength="30" placeholder="James Bond">
<br><br>
<label class="align">Email<span>*</span></label>
<input id="email" type="email" name="mail" placeholder="james#gmail.com">
<br><br>
<label class="align">Date of Birth<span>*</span></label> <input type="date" id="dob" name="DOB" placeholder="dd/mm/yy">
</fieldset>
<br>
<label>Select Tour Package<span>*</span>:</label>
<select id='package' name="package">
<option value="1">Tokyo</option>
<option value="2">Shanghai</option>
<option value="3">Bangkok</option>
<option value="4">Jakarta</option>
<option value="5">Mumbai</option>
</select>
<label>Number of persons<span>*</span>:</label>
<select name="party">
<option value="1">One Adult</option>
<option value="2">Two Adults</option>
<option value="3">Three Adults</option>
<option value="4">Four Adults</option>
<option value="5">Five Adults</option>
</select>
<br><br>
<label>Arrival Date<span>*</span>:</label> <input type="date" name="arrival" id="arrival" placeholder="dd/mm/yy">
<br><br>
<p>What Intrests you the most?<span>*</span>:</p>
<input class="alignp" type="checkbox" name="interest" value="shopping"> Shopping <br><br>
<input class="alignp" type="checkbox" name="interest" value="dining"> Dining <br><br>
<input class="alignp" type="checkbox" name="interest" value="dancing"> Dancing <br><br>
<input class="alignp" type="checkbox" name="interest" value="SightS"> Sightseeing <br><br><br>
<label>Discount Coupon code:</label> <input type="text" name="dis_code" value=""><br><br>
<label>Terms and Conditions<span>*</span>
<input type="radio" name="tos" id="accpeted" value="agree" checked>I agree</label>
<input type="radio" name="tos" id="unaccepted" value="disagree">I disagree
<p>Please provide any additional information below:- </p>
<textarea name="message" rows="5" cols="45" placeholder="Please type here...."></textarea><br><br>
<button class="btn-submit" id="submit" onclick="return validateForm()">Submit</button>
</div>
<script>
// JavaScript Document
function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var dob = document.getElementById("dob").value;
//Select Box
var e = document.getElementById("package");
// Selected Item
var packages = e.options[e.selectedIndex].value;
var arrival = document.getElementById("arrival").value;
//var interest = document.getElementById("").value;
var tos = document.querySelector('input[name="tos"]:checked').value;
//var checkbox = document.getElementById("").value;;
var matches = name.match(/\d+/g);
var re = /^\d{4}([.\/-])\d{2}\1\d{2}$/;
if (!name) {
alert("Name must be filled out");
} else {
if (matches != null) {
alert("Name has a number in it!: " + name);
}
}
if (!email) {
alert("Email must be filled out");
} else {
if (validateEmail(email) == false) {
alert("Must enter a valid email: " + email);
}
}
if (!dob) {
alert("Date of Birth must not be empty");
} else {
if (!dob.match(re)) {
alert(" Dob has Invalid date format: " + dob);
}
}
if (!arrival) {
alert("Arrival Date must not be empty");
} else {
if (!arrival.match(re)) {
alert(" Dob has Invalid date format: " + arrival);
}
}
if (tos != "agree") {
alert("You must agree to the Terms of Service");
}
}
function validateEmail(email) {
return /\S+#\S+\.\S+/.test(email);
}
</script>
</body>
</html>

How do I add checks to make the code to display 'Password too short' and 'Height is not a number?'

I have to add checks to the checkSubmit() function so that it will give the following response
Passwords do not match
Passwords is too short(minimum 4 characters)
Height is not a number
I have managed the first one however I have no idea where to start with the other two. I'll post all the code just to be safe in case I missed something.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Form Validation</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<link rel="stylesheet" type="text/css" href="styles/forms.css">
<script type="text/javascript">
window.onload=init;
var form;
function init() {
form = document.getElementById('testform');
form.addEventListener("submit", checkSubmit, false);
form.addEventListener("reset", checkReset, false);
form['colour'].addEventListener("change", checkSubmit, false);
form['name'].focus();
}
String.prototype.trim=function() {
return this.replace(/^\s+1\s+$/g, '');
}
function whichButton(name) {
var buttons=document.getElementsByName(name);
for (var i in buttons) {
if(buttons[i].checked) return buttons[i].value
}
return false;
}
function showOtherColour() {
document.getElementById('othercolour').style.visibility=
form['colour'].value=='other' ? 'visible' : 'hidden';
}
function checkSubmit() {
error = new Array();
//Fill the array with the error value
form['name'].value=form['name'].value.trim();
form['email'].value=form['email'].value.trim();
form['town'].value=form['town'].value.trim();
form['state'].value=form['state'].value.trim();
form['postcode'].value=form['postcode'].value.trim();
form['dob'].value=form['dob'].value.trim();
form['height'].value=form['height'].value.trim();
//Check required fields
if(!form['name'].value)
error.push('Missing Name');
if(!form['email'].value)
error.push('Missing Email Address');
if(!form['password'].value)
error.push('Missing Password');
//Check valid email address
var pattern=/^[a-zA-Z0-9._%-]+#[a-zA-Z0-9.-]+(\.[a-zA-Z]{2,4})$/;
if(!form['email'].value.match(pattern))
error.push('Invalid Email Address');
//Check State
//Check Post Code has 4 digits
var pattern=/^\d{4}$/;
if(!form['postcode'].value.match(pattern))
error.push('Invalid Post Code');
//Check password matches confirmation
//var password = ;
/*
if(!form['passwordConfirm'].value.match(password)){
error.push("Passwords don't match");
}*/
console.log(form['confirm'].value);
console.log(form['password'].value);
if(!form['confirm'].value.match(form['password'].value)){
error.push('Passwords do not match');
}
//Check that one Gender item is selected
if(whichButton('gender')===false)
error.push('Please choose a Gender');
//Check that "Other" field is filled
if (!form['colour'].value ||
(form['colour'].value=='other' && !form['othercolour'].value))
error.push('Colour is not selected');
if(error.length) { // if there are errors
alert(error.join("\n"))
return false;
}
else return true;
//return confirm("This will submit the form"); //Temporary placeholder
}
function checkReset() {
return confirm("This will clear the form data");
}
</script>
<style type="text/css">
body,td,th {
font-size: 0.9em;
}
</style>
</head>
<body>
<div id="body">
<h1>Form Validation</h1>
<form action="http://test.miform.net" method="post" id="testform">
<fieldset>
<label>Name<br><input type="text" name="name" class="wide"></label>
<label>Email Address<br><input type="text" name="email" class="wide"></label>
</fieldset>
<fieldset>
<label>Address<br><input type="text" name="street" class="wide"></label>
<label>Town<br><input type="text" name="town" class="narrow"></label>
<label>State<br><input type="text" name="state" class="narrow"></label>
<label>PostCode<br><input type="text" name="postcode" class="narrow"></label>
</fieldset>
<fieldset>
<label>Password<br><input type="password" name="password" class="medium"></label>
<label>Confirm Password<br><input type="password" name="confirm" class="medium"></label>
</fieldset>
<fieldset>
<label>Date of Birth<br><input type="text" name="dob" class="medium"></label>
<label>Height<br><input type="text" name="height" class="medium"></label>
</fieldset>
<fieldset>
<legend>Gender</legend>
<label><input type="radio" name="gender" value="f">Female</label>
<label><input type="radio" name="gender" value="m">Male</label>
</fieldset>
<fieldset>
<label>Colour
<select name="colour">
<option value="">Select...</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="cyan">Cyan</option>
<option value="magenta">Magenta</option>
<option value="yellow">Yellow</option>
<option value="other">Other</option>
</select>
</label>
<input type="text" id="othercolour">
</fieldset>
<input type="reset" name="reset" value="Clear Form">
<input type="submit" name="send" value="Send Off">
</form>
</div>
</body>
</html>
Do this for the second:
if (form['password'].value.length < 4) {
error.push("Password is too short");
}
And this for the third:
if (isNan(Number(form['height'].value))) {
error.push("Height is not a number");
}

Can't keep CSS change via Javascript

I have a simple "select" - show below.
<label>Best way to reach you?</label><br>
<select id="contactMethod">
<option value="wp">Work Phone?</option>
<option value="cp">Personal Cell Phone?</option>
<option value="email">Email?</option>
<option value="Im">Instant Messanger?</option>
</select>
<button onclick="showHidden()">Which way?</button>
the object I wish to show is in the HTML with the following properties:
<label>E-mail Address:</label>
<input id="email" type="text" style='display:none'>
I then have a .js file with the following function.
function showHidden() {
var dropSelection = document.getElementById("contactMethod").value;
console.log(dropSelection)
if(dropSelection == "email") {
document.getElementById("email").style.display = "block";
}
}
I then have the id listed within my CSS as the following:
#email{ display:none; }
The goal is to "show" the email text box when the "email" option is selected from the <select> above.
As of right now, I'm simply printing what was selected, so I can know for sure that I'm getting the right values to run the if statement against. That being said, when I select the email option, it literally flashes the email text box but immediately reverts back to a hidden state.
UPDATED CODE
<label>Best way to reach you?</label><br>
<select onchange="showHidden()" id="contactMethod">
<option value="select">Select...</option>
<option value="email">Email</option>
<option value="phone">Work Phone</option>
<option value="cPhone">Cell Phone</option>
<option value="Im">Instant Messanger</option>
</select>
MODIFIABLE FIELDS
<label id="emailLabel">E-mail Adress:</label>
<input id="email" type="text">
<label id="phoneLabel">Work Phone Number</label>
<input id="phone" type="text">
<label id="cPhoneLabel">Personal Cell Phone Number</label>
<input id="cPhone" type="text">
<label id="IMLabel">Instant Messenger Name</label>
<input id="Im" type="text">
JS
function showHidden() {
var dropSelection = document.getElementById("contactMethod").value;
if(dropSelection == "email") {
document.getElementById("email").style.display = "block";
document.getElementById("emailLabel").style.display = "inline";
}
else if(dropSelection == "phone") {
document.getElementById("phone").style.display = "block";
document.getElementById("phoneLabel").style.display = "inline";
}
else if(dropSelection == "cPhone") {
document.getElementById("cPhone").style.display = "block";
document.getElementById("cPhoneLabel").style.display = "inline";
}
else if(dropSelection == "Im") {
document.getElementById("Im").style.display = "block";
document.getElementById("IMLabel").style.display = "inline";
}
}
function showHidden(){
var dropSelection = document.getElementById("contactMethod").value;
console.log(dropSelection)
if(dropSelection == "email"){
document.getElementById("email").style.display = "block";
}
}
#email{
display:none;
}
<label>Best way to reach you?</label>
<br>
<select id="contactMethod">
<option value="wp">Work Phone?</option>
<option value="cp">Personal Cell Phone?</option>
<option value="email">Email?</option>
<option value="Im">Instant Messanger?</option>
</select>
<br>
<button onclick="showHidden()">Which way?</button>
<br>
<label>E-mail Adress:</label>
<br>
<input id="email" type="text" display="none">
<br>
I don't see any problem, it works fine.

Validating a form using Javascript

I'm having problems trying to validate an entire form using Javascript.
"Add JavaScript code to produce an error message and suppress submission of the form if any quantity field contains non-numeric data. (It's OK for a quantity to be empty, but if it's non-empty, it must have only numbers.) Add an action= attribute to your tag to submit the form to a website (not going to put actual website). Test that the form is submitted correctly when the quantities are numeric or empty, and that an error message is produced otherwise."
I've done all the instructions asked me to do and it isn't working. We are supposed to use the form that we created in one of the previous labs. Here is the code that I have been working on.
<!DOCTYPE html>
<html>
<head>
<title>Lab 6, Part 3</title>
<meta charset="UTF-8"/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<script type="text/javascript">
function validateForm(){
var a = document.forms["myform"]["Pokemon"].value;
var b = document.forms["myform"]["Pokeball"].value;
var c = document.forms["myform"]["Pikachu"].value;
var d = document.forms["myform"]["firstname"].value;
var e = document.forms["myform"]["lastname"].value;
var f = document.forms["myform"]["streetaddress"].value;
var g = document.forms["myform"]["city"].value;
var h = document.forms["myform"]["zipcode"].value;
if (a = null || a == ""){
alert("Grapes must be filled out!");
return false;
}
if (b = null || b == ""){
alert("Cherries must be filled out!");
return false;
}
if (c = null || c == ""){
alert("Strawberries must be filled out!");
return false;
}
if (d = null || d == ""){
alert("First Name must be filled out!");
return false;
}
if (e = null || e == ""){
alert("Last Name must be filled out!");
return false;
}
if (f = null || f == ""){
alert("Street Address must be filled out!");
return false;
}
if (g = null || g == ""){
alert("City must be filled out!");
return false;
}
if (h = null || h == ""){
alert("Zip Code must be filled out!");
return false;
}
}
</script>
</head>
<body><form>
<form name="myform" action="http://weblab.kennesaw.edu/formtest.php"
onsubmit="return validateForm()"
method = "post">
<h1 style="text-align:center">Lab 6, Part 3</h1>
<h2 style="text-align:center">IT 3203</h2>
<p style="text-align:center">Main Page!</p>
<p>Grapes</p><input type=text size=3 maxlength=3 name="Pokemon">
<p>Cherries</p><input type=text size=3 maxlength=3 name="Pokeball">
<p>Strawberries</p><input type=text size=3 maxlength=3 name="Pikachu">
<br>
<label>First Name
<input type="text"
name="firstname" id="firstname"
size="25" />
</label>
<br>
<br>
<label>Last Name
<input type="text"
name="lastname" id="lastname"
size="25" />
</label>
<br>
<br>
<label>Street Address
<input type="text"
name="streetaddress" id="streetaddress"
size="35" />
</label>
<br>
<br>
<label>City
<input type="text"
name="city" id="city"
size="25" />
</label>
<label>State:
<select name="state">
<option>Please Select</option>
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<option>California</option>
<option>Colorado</option>
<option>Connecticut</option>
<option>Delaware</option>
<option>Florida</option>
<option>Georgia</option>
<option>Hawaii</option>
<option>Idaho</option>
<option>Illinois</option>
<option>Indiana</option>
<option>Iowa</option>
<option>Kansas</option>
<option>Kentucky</option>
<option>Louisiana</option>
<option>Maine</option>
<option>Maryland</option>
<option>Massachusetts</option>
<option>Michigan</option>
<option>Minnesota</option>
<option>Mississippi</option>
<option>Missouri</option>
<option>Montana</option>
<option>Nebraska</option>
<option>Nevada</option>
<option>New Hampshire</option>
<option>New Jersey</option>
<option>New Mexico</option>
<option>New York</option>
<option>North Carolina</option>
<option>North Dakota</option>
<option>Ohio</option>
<option>Oklahoma</option>
<option>Oregon</option>
<option>Pennsylvania</option>
<option>Rhode Island</option>
<option>South Carolina</option>
<option>South Dakota</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Utah</option>
<option>Vermont</option>
<option>Virginia</option>
<option>Washington</option>
<option>West Virginia</option>
<option>Wisconsin</option>
<option>Wyoming</option>
</select>
</label>
<br>
<br>
<label>Zip code:
<input type="text"
name="zipcode" id="zipcode"
size="20" />
</label>
</form>
<br>
<br>
<label>Visa
<input type="radio" name="pref_payment"
id="pref_payment_visa" value="visa" checked />
</label><br />
<label>MasterCard
<input type="radio" name="pref_payment"
id="pref_payment_master" value="master" checked />
</label><br />
<label>American Express
<input type="radio" name="pref_payment"
id="pref_payment_american" value="american" checked />
</label><br />
<input type="button" onclick="confirmation()" value="submit">
</form>
</body>
</html>
It is probably something minor that I have overlooked or something. Oh and we had to save the files in .php so maybe that has a lot to do with it.
1) Check your form tag. You got two there.
<form>
2) Your submit button type.
Should be:
type="submit"
Not:
type="button"
And no need to add:
onclick="confirmation()"
http://plnkr.co/edit/Ml2KWgfU5KG5gmBpf8Fe?p=preview

Javascript Form validation not working for select element

So I'm trying to change a select box's style if the value is not changed ie. the user has not selected anything. That yesnoCheck is a function which shows an additional input field if the choice "other" is selected. I don't think it affects this form validation though. This same kind of validation works fine with an input field but it won't work with a select box.
I've also treid selectedIndex == 0 but it doesn't work either.
HTML:
<form name="myForm" method="post" action="" onsubmit="return(validate());">
<label for="lastname">Sukunimesi:</label>
<input type="text" id="lastname" name="lastname" /><br />
<select id="car" name="car" onchange="javascript:yesnoCheck()">
<option id="noCheck" value="none">Valitse automerkkisi</option>
<option id="noCheck" value="1">Lada</option>
<option id="noCheck" value="2">Mosse</option>
<option id="noCheck" value="3">Volga</option>
<option id="noCheck" value="4">Vartburg</option>
<option id="yesCheck" value="other">Muu</option>
</select>
<input type="submit" value="Submit" />
</form>
JS:
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById("yesCheck").selected) {
document.getElementById("ifYes").style.display = "block";
}
else document.getElementById("ifYes").style.display = "none";
}
function validate() {
if (document.myForm.lastname.value.length < 3) {
document.getElementById("lastname").className = "required";
return false;
}
if (document.myForm.car.value == "none") {
document.getElementById("car").className = "required";
return false;
}
alert ("Everything is fine!");
}
</script>
Your code works check your form name and make sure your form exists before the script is run.
function check(){
if (document.myForm.car.value == "none") {
document.getElementById("car").style.border = "1px solid #900";
document.getElementById("car").style.backgroundColor = "#ff9";
return false;
}
}
<form name="myForm">
<select id="car" name="car" onchange="javascript:yesnoCheck()">
<option id="noCheck" value="none">Valitse automerkkisi</option>
<option id="noCheck" value="1">Lada</option>
<option id="noCheck" value="2">Mosse</option>
<option id="noCheck" value="3">Volga</option>
<option id="noCheck" value="4">Vartburg</option>
<option id="yesCheck" value="other">Muu</option>
</select>
</form>
<button onclick="check()">Run script</button>
So the solution was to delete return false; from the function.

Categories

Resources