Javascript form verification help

Javascript form verification help - javascript

Hey guys, I just updated my signup form to include drop down menu selectors to select gender and class and section. But I don't know how to verify them and check that a value is selected.
Here is the code:
<form name="registration_form" method="post" action="register.php" onsubmit="return Validate();"><input type=hidden name=todo value=post>
<table>
<tr><td class="label">First Name:</td><td><input type="text" name="fname"></td></tr>
<tr><td class="label">Last Name:</td><td><input type="text" name="lname"></td></tr>
<tr><td class="label">Gender:</td><td><select name="gender">
<option>Select your gender:</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select></td></tr>
<tr><td class="label">E-Mail Address:</td><td><input type="email" name="email"></td></tr>
<tr><td class="label">Username:</td><td><input type="text" name="username"></td></tr>
<tr><td class="label">Password:</td><td><input type="password" name="password"></td></tr>
<tr><td class="label">Password Confirmation:</td><td><input type="password" name="password_confirmation"></td></tr>
<tr><td class="label">Class:</td><td><select name="class">
<option>Select your class:</option>
<option value="1">Grade 1</option>
<option value="2">Grade 2</option>
<option value="3">Grade 3</option>
<option value="4">Grade 4</option>
<option value="5">Grade 5</option>
<option value="6">Grade 6</option>
<option value="7">Grade 7</option>
<option value="8">Grade 8</option>
<option value="9">Grade 9</option>
<option value="10">1S</option>
<option value="11">2S</option>
<option value="12">3S</option>
</select></td></tr>
<tr><td class="label">Section:</td><td><select name="section">
<option>Select a section:</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="S">S</option>
<option value="SE">SE</option>
<option value="GS">GS</option>
<option value="LS">LS</option>
</select></td></tr>
<tr><td>Are you human?</td></tr>
</table>
<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);
require_once('recaptchalib.php');
$publickey = "6LfF478SAAAAAFR1_ZfSFzGyEhkcXlNVRg8iJeWU"; // you got this from the signup page
echo recaptcha_get_html($publickey);
?>
<table>
<tr><td class="label"><input class="submitButton" type="submit" value="Register"></td></tr>
</table>
</form>
</div>
<script language = "Javascript">
function Validate()
{
if (document.registration_form.fname.value == '')
{
alert('Please fill in your first name!');
return false;
}
if (document.registration_form.lname.value == '')
{
alert('Please fill in your last name!');
return false;
}
if (document.registration_form.email.value == '')
{
alert('Please fill in your email address!');
return false;
}
if (document.registration_form.username.value == '')
{
alert('Please fill in your desired username!');
return false;
}
if (document.registration_form.password.value == '')
{
alert('Please fill in your desired password!');
return false;
}
if (document.registration_form.password_confirmation.value == '')
{
alert('Please fill in your password again for confirmation!');
return false;
}
if (document.registration_form.password.value !=
document.registration_form.password_confirmation.value)
{
alert("The two passwords are not identical! "+
"Please enter the same password again for confirmation!");
return false;
}
return true;
}
</script>
My question is what can I add to the Validate function so that it returns false if the values selected are "Please select your ... "
Edit(1): Ok I tried this but it didn't seem to work, what's wrong?
var selectedClass = document.getElementById("class");
if(selectedClass.selectedIndex ==0){
alert('Please select your class!');
return false;
}
Edit(2): Never mind I got it to work.

function validate(){
var selectedClass = doument.getElementById("Class");
if(selectedClass.selectedIndex ==0){
alert(selectedClass.options[0].text);
return false;
}
}

The selectedIndex of "Please select your... " would be 0 so your code should check that the selectedIndex of the select control is always greater than 0.

Related

html get Method sending wrong url

on using html get method my url should be shown as
http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text=10.1.17.20&subquery=&subfilter=&sub_search_text=
but it shows as
http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text+=10.1.17.20&subquery=&subfilter=&sub_search_text=
there is a plus sign between query=ip&filter=like&search_text+=10.1.17.20
which creates problem in getting data
my html form code is like
<form method="get" action="log_table_view.php" onsubmit="return submit_query_form_check();" enctype="multipart/form-data">
<label>Log for Year</label>
<select id="year" name="year">
<option value="">Select Year</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<br>
<label>From</label>
<select id="frommonth" name="frommonth">
<option value="">Select Month</option>
</select>
<select id="fromdate" name="fromdate">
<option value="">Select Date</option>
</select>
<label>To</label>
<select id="tomonth" name="tomonth">
<option value="">Select Month</option>
</select>
<select id="todate" name="todate">
<option value="">Select Date</option>
</select>
<br>
<label>Query</label>
<select name="query" id="query">
<option value="">Select</option>
<option value="time">Time</option>
<option value="ip">Server IP</option>
<option value="username">Username</option>
<option value="nasip">Nas IP</option>
<option value="groupname">Group name</option>
<option value="cmd">CMD</option>
<option value="callerid">Caller ID</option>
<option value="realname">Real Name</option>
<option value="network_device_group">Network Device Group</option>
</select>
<select name="filter" id="filter">
<option value="">filter</option>
<option value="like">%</option>
<option value="equal">=</option>
</select>
<input type="text" placeholder="Search Text" name="search_text" id="search_text">
<label>AND</label>
<label>Sub-Query</label>
<select name="subquery" id="subquery">
<option value="">Select</option>
<option value="time">Time</option>
<option value="ip">Server IP</option>
<option value="username">Username</option>
<option value="nasip">Nas IP</option>
<option value="groupname">Group name</option>
<option value="cmd">CMD</option>
<option value="callerid">Caller ID</option>
<option value="realname">Real Name</option>
<option value="network_device_group">Network Device Group</option>
</select>
<select name="subfilter" id="subfilter">
<option value="">filter</option>
<option value="like">%</option>
<option value="equal">=</option>
</select>
<input type="text" placeholder="Search Text" name="sub_search_text" id="sub_search_text">
<button type="submit" class="search">Search</button>
</form>
function submit_query_form_check() {
var year = $("#year").val();
var frommonth = $('#frommonth').val();
var fromdate = $('#fromdate').val();
var tomonth = $('#tomonth').val();
var todate = $('#todate').val();
var query = $('#query').val();
var subquery = $('#subquery').val();
if (year == "") {
alert("Year Not Selected");
$("#year").focus();
return false;
}
if (frommonth == "") {
alert("From Month Not Selected");
$("#frommonth").focus();
return false;
}
if (fromdate == "") {
alert("From date Not Selected");
$("#fromdate").focus();
return false;
}
if (tomonth == "") {
alert("To Month Not Selected");
$("#tomonth").focus();
return false;
}
if (todate == "") {
alert("To date Not Selected");
$("#todate").focus();
return false;
}
if (query != "") {
var filter = $('#filter').val();
var search_text = $('#search_text').val();
if (filter == "") {
alert("You have not selected any filter for query");
$('#filter').focus();
return false;
} else if (search_text == "") {
alert("You have not input any search text for query");
$('#search_text').focus();
return false;
} else if (query == "groupname") {
if (filter != "like") {
alert("With Group Name Query You Can Only Use Like Filter");
$('#filter').focus();
return false;
}
}
}
if (subquery != "") {
var subfilter = $('#subfilter').val();
var sub_search_text = $('#sub_search_text').val();
if (query == "") {
alert("You have not selected any for query before using sub query");
$('#query').focus();
return false;
}
if (subfilter == "") {
alert("You have not selected any sub filter for query");
$('#subfilter').focus();
return false;
} else if (search_text == "") {
alert("You have not input any sub search text for query");
$('#sub_search_text').focus();
return false;
} else if (subquery == "groupname") {
if (subfilter != "like") {
alert("With Group Name Query You Can Only Use Like Filter");
$('#subfilter').focus();
return false;
}
}
}
return true;
}

Right before you actually pass in the string to be called to the endpoint, just strip the '+' out of the URL using the str_replace method.
<?
$badUrl = "http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text+=10.1.17.20&subquery=&subfilter=&sub_search_text=";
$goodUrl = str_replace('?/', '?', $badUrl);
then you simply pass the goodUrl to make the GET request

Validate select dropdown with javascript

I'm having trouble with validating my dropdown list with javascript. What I want is to display an error message underneath the field inside span tags if the user hasn't selected any options. I've checked almost every tutorials out there but no luck.
Here is the code for the form:
<form name="subform" id="subform" action="submit.php" onsubmit="return checkForBlank()" method="POST" enctype="multipart/form-data">
<div class="md-form">
<input type="text" id="subcim" name="subcim" class="form-control"><span class="error_form" id="subcim_error_message"></span>
<label for="subcim" class="">Title</label><br>
</div>
<div class="md-form">
<select class="mdb-select" id="subcat" name="subcat"><span class="error_form" id="subcat_error_message"></span>
<option value="0" selected>Please select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<label id="subcat_info">Category</label><br>
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>
and here is the Javascript code (the first if statement validates the input field in the form:
function checkForBlank() {
if(document.getElementById("subcim").value == "") {
document.getElementById("subcim_error_message").textContent="You must add a title!";
return false;
} else if(document.getElementById("subcim").value.length < 5 || document.getElementById("subcim").value.length > 80) {
document.getElementById("subcim_error_message").textContent="The title must be between 5 and 80 characters!";
return false;
}
var result = document.getElementById('subcat').value;
if (result === "0") {
document.getElementById("subcat_error_message").textContent="You must select an option!";
return false;
}
}
I'm using
onsubmit="return checkForBlank()"
inside the form tag.
When I submit the form without selecting an option, the form seems to be submitted properly, but it does not display the error message.
Any help is appreciated

function Validate() {
var subcat= document.getElementById("subcat");
if (subcat.value == "") {
//If the "Please Select" option is selected display error.
alert("Please select an option!");
return false;
}
return true;
}
onsubmit ="return Validate()"

function Validate() {
var subcat= document.getElementById("subcat");
if (subcat.value == "0") {
//If the "Please Select" option is selected display error.
alert("Please select an option!");
return false;
}
return true;
}
onsubmit ="return Validate();"

Change your syntex from
<div class="md-form">
<select class="mdb-select" id="subcat" name="subcat"><span class="error_form" id="subcat_error_message"></span>
<option value="0" selected>Please select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<label id="subcat_info">Category</label><br>
</div>
To syntex as below
<div class="md-form">
<select class="mdb-select" id="subcat" name="subcat">
<option value="0" selected>Please select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<span class="error_form" id="subcat_error_message"></span>
<label id="subcat_info">Category</label><br>
</div>
The only mistake that you are doing is putting your error span within your select tag it self which is not a predefined HTML format for select tag. As you can see that after putting your span tag out side your select tag every thing will work as you want.

Html
<div class="md-form">
<select class="mdb-select" id="subcat" name="subcat">
<option value="0" selected>Please select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<span class="error_form" id="subcat_error_message"></span>
<label id="subcat_info">Category</label><br>
</div>
JavaScript
function Validate() {
var subcat= document.getElementById("subcat");
if (subcat.value == "0") {
//If the "Please Select" option is selected display error.
document.getElementById("subcat_error_message").innerHTML="Error Message";
//OR
document.getElementById("subcat_error_message").textContent="Error Message";
return false;
}
return true;
}
onsubmit ="return Validate();"

Javascript HTML drop down validation

i want to be able to add a validation to my dropdown lists. If the user was to select cardiff in the first dropdown(select1) and again in the second dropdown(select2) if should give a alert message to the user saying "destination can't be same as the departure".
I know this isn't user friendly but it needs to be done=S
I was getting issues with the second drop down as it doesn't seem to work as a double AND if statement.
Please use jsfiddle.net to help me thanks.
Departure: <br>
<select id="select1">
<option value="" disabled selected>Please Select</option>
<option>Birmingham</option>
<option>Bristol</option>
<option>Cardiff</option>
<option>Liverpool</option>
<option>London</option>
<option>Manchester</option>
</select>
<br><br>
Destination: <br>
<select id="select2">
<option value="" disabled selected>Please Select</option>
<option>Birmingham</option>
<option>Bristol</option>
<option>Cardiff</option>
<option>Liverpool</option>
<option>London</option>
<option>Manchester</option>
</select>
<br><br>
<input type="Button" value="Order Tickets" onClick="myFunction()">
<script>
function myFunction()
{
if (document.getElementById("select1" && "select2").value == "Cardiff")
alert("Destination can't be same as Departure.");
else
alert("That's Fine");
}
</script>

You need to get the values of both selects.
var one=document.getElementById("select1");
var two=document.getElementById("select2");
if (one.options[one.selectedIndex].value == two.options[two.selectedIndex].value)
alert("Destination can't be same as Departure");

Its better to use unique names as option values.
Departure: <br>
<select id="select1">
<option value="" disabled selected>Please Select</option>
<option value="1">Birmingham</option>
<option value="2">Bristol</option>
<option value="3">Cardiff</option>
<option value="4">Liverpool</option>
<option value="5">London</option>
<option value="6">Manchester</option>
</select><br><br>
Destination: <br>
<select id="select2">
<option value="" disabled selected>Please Select</option>
<option value="1">Birmingham</option>
<option value="2">Bristol</option>
<option value="3">Cardiff</option>
<option value="4">Liverpool</option>
<option value="5">London</option>
<option value="6">Manchester</option>
</select><br><br>
<input type="Button" value="Order Tickets" onClick="myFunction()">
<script>
function myFunction() {
if (document.getElementById("select1").value == document.getElementById("select2").value)
alert("Destination can't be same as Departure.");
else
alert("That's Fine");
}
</script>

function myFunction() {
if (document.getElementById("select1").value === "Cardiff" && document.getElementById("select2").value === "Cardiff")
alert("Destination can't be same as Departure.");
else
alert("That's Fine");
}
or better :
function myFunction() {
if (document.getElementById("select1").value === document.getElementById("select2").value)
alert("Destination can't be same as Departure.");
else
alert("That's Fine");
}

Replace
if (document.getElementById("select1" && "select2").value == "Cardiff")
with
if (document.getElementById("select1").value == document.getElementById("select1").value ) {
...
}
Also, you would be better off if you stripped the departure from the destination list. But the code in your question sounds like that is a bit too much for your current skills.

I have updated your JavaScript. Here's the code.
function myFunction() {
var dest1 = document.getElementById("select1").value;
var dest2 = document.getElementById("select2").value;
if (dest1 === dest2)
alert("Destination can't be same as Departure.");
else
alert("That's Fine");
}

javascript - how would you write the if(...) statement for selection options in a form?

How do you write the if statement for a select option using javascript?
I wrote a form and made a select option list. I want to write an if statement that will do something if an option is selected.
JS
function name(obj) {
if (option.value == "cat") {
document.getElementById("owner").jim.disabled = true;
}
}
HTML
<p>
selection:*
<select id="Sone" name="Selection" size="1">
<option>Select</option>
<option value="cat" onclick="name(this);">cat</option>
<option value="dog" onclick="name(this);">dog</option>
<option value="bird" onclick="name(this);">bird</option>
<option value="Other" onclick="name(this);">Other</option>
</select>
</p>

<select id= "Sone" name="Selection" onchange="check()">
<option value="cat">cat</option>
<option value="dog">dog</option>
</select>
<input type="text" id="res" size="25"/>
And the function is :-
function check() {
var val = document.getElementById('Sone').value;
if(val=='cat') {
document.getElementById('res').value = "Thanks for selecting cat";
} else {
document.getElementById('res').value = "please select CAT";
}
}

You have to work as below
<form name="AddEditUser">
.
.
<select name="listCompany" style="width:200px" id="listCompany" onchange="fnCompany()">
<option value="None">None</option>
<option value="ABC">ABC</option>
<option value="XYZ">XYZ</option>
</select>
</form>
You have to call the javascript function a
function fnCompany(){
if(document.frmAddEditUser.listCompany.value=='None'){
//do something
}
}

validate forms with js mutually exclusive

Hi I have almost finished a assignment on "Javascript" although I cant find any information on how to make some fields mutually exclusive, basically the top part of my form the user has to insert the address into mandatory fields then further down the form the is a radio check box the user must pick home address or other, (home being the top address they already inserted) the form is already validated to if the choose the home they do not have to insert any thing in other but I need to make it mutually exclusive so if they choose other it cant be the same as above, can any one please help me or give me a link for a tutorial, cause I can only find info on mutually exclusive radio button or check boxes nothing on what the user inputs to text box thanks
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Joes Fruit and Vegetable Store</title>
<script>
//calender dropdown menu
var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
function populatedropdown(dayfield, monthfield, yearfield){
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
dayfield.options[i]=new Option(i, i+1)
dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
// function validate
function validate_form ()
{
//validate name
valid = true;
if ( document.input.name.value == "")
{
alert ( "Please enter your name");
valid = false;
}
// validate address
if ( document.input.address.value == "")
{
alert ( "Please enter your Address" );
valid = false;
}
// validate Town
if ( document.input.town.value == "")
{
alert ( "Please enter your Town" );
valid = false;
}
// validate postcode
var y = document.getElementById("postcode").value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Postcode must be in numbers.");
document.getElementById("postcode").focus();
return false;
}
if (y.length>4 || y.length<4)
{
alert("Postcode should be 4 digit");
document.getElementById("postcode").focus();
return false;
}
// validate home phone
var y = document.getElementById('hphone').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Home Phone number must be in numbers.");
document.getElementById('hphone').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Home Phone number should be 10 digit");
document.getElementById('hphone').focus();
return false;
}
// validate work phone
var y = document.getElementById('wphone').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("work Phone number must be in numbers.");
document.getElementById('wphone').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Work Phone number should be 10 digit");
document.getElementById('wphone').focus();
return false;
}
// validate fax
var y = document.getElementById('fax').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Fax number must be in numbers.");
document.getElementById('fax').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Fax Phone number should be 10 digit");
document.getElementById('fax').focus();
return false;
}
// validate email
{
var x=document.forms["input"]["email"].value;
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
// validate radio buttons
var o = document.getElementById('rad1');
var t = document.getElementById('rad2');
if ( (o.checked == false ) && (t.checked == true ) )
{
// validate alternative address
if ( document.input.street.value == "")
{
alert ( "Please enter alternative Address" );
valid = false;
}
// validate alternative suburb town
if ( document.input.suburb.value == "")
{
alert ( "Please enter alternative Suburb or town" );
valid = false;
}
} // validate alternative postcode
if ( (o.checked == false ) && (t.checked == true ) )
{
var y = document.getElementById('postcode2').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Alternative Postcode must be in numbers.");
document.getElementById('postcode2').focus();
return false;
}
if (y.length>4 || y.length<4)
{
alert("Alternative Postcode should be 4 digit");
document.getElementById('postcode2').focus();
return false;
}
}
//validate message box
var o = document.getElementById("card");
if (o.checked == true )
{
if ( document.input.message.value == "" || document.input.message.value == "Please Enter message here" )
{
alert ( "Please enter message" );
valid = false;
}
return valid;
}
}
</script>
</head>
<body>
<b>Order form for Joe's Fruit Shop</b><br>
<br>
<b> * means you must fill in the details.</b><br>
<br>
<b>Your details:</b><br>
<br>
<!-- Beggining of Form -->
<form name="input" action="Joes.html" onsubmit="return validate_form ()">
<!--name input form -->
* Name: <input type="text" name="name" id="name" onclick="this.value='';" placeholder="Enter your Name"><br>
<br>
<!-- Address input form -->
* Address: <input type="text" name="address" id="address" onclick="this.value='';" placeholder="Enter your street address"><br>
<br>
<!-- Town & state dropdown form-->
* Suburb or Town: <input type="text" name="town" id="town" onclick="this.value='';" placeholder="Town"> * State:
<!-- state drop down list -->
<select name="state">
<option value="NSW">NSW</option>
<option selected="selected" value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
</select>
<!-- post code input form -->
* Postcode: <input type='text' name="postcode" id="postcode" onclick="this.value='';" placeholder="****"><br>
<br>
<!-- Home phone input form-->
* Phone: <input type='text' name="hphone" id="hphone" onclick="this.value='';" placeholder="x-xxxx-xxx">
<!-- work phone input form -->
* Work phone <input type='text' name="wphone" id="wphone" onclick="this.value='';" placeholder="x-xxxx-xxx"><br>
<br>
<!-- Fax input form-->
*Fax: <input type='text' name="fax" id="fax" onclick="this.value='';" placeholder="0x-xxxx-xxx">
<!-- Email input form-->
* Email address: <input type='text' name="email" id="email" onclick="this.value='';" onsubmit="return validateForm();" placeholder="Enter your current email"><br>
<br>
<br>
<!-- credit card form --> <b>Credit card details:</b><br>
<br>
* Type:
<select name="credit card">
<option selected="selected" value="AMEX">Amex</option>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
</select>
<!--credit card month expiry date-->
*Expiry date:
<select name="expiration_month">
<option value="">Choose...</option>
<option selected="selected" value="1">January</option>
<option value="2">Febuary</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<!-- Credit card year expiry date-->
<select name="expiration_year">
<option value="">Choose...</option>
<option selected="selected" value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
<br>
<br>
<b>Purchase details</b><br>
<br>
<!-- Product dropdown form-->
* Product:
<select name="product">
<option value="carrot">Bag of carrots</option>
<option value="zucchini">Zucchini</option>
<option value="cabbage">Cabbage</option>
<option value="grapes">Grapes</option>
<option value="tomatoes">TAS</option>
<option value="apples">Apples</option>
<option value="banana">banana</option>
<option selected="selected" value="cucumber">Cucumber</option>
</select>
<!-- Quantity dropdown form-->
Quantity:
<select name="quantity">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br>
<br>
<br>
* <b>Deliver to:</b>
<br>
<br>
<!-- Address Radio check buttons-->
<input type='radio' id="rad1" name='rad' checked="checked">Home Address<br>
<input type='radio' id="rad2" name='rad'/>Other Address<br>
<br>
<!-- alternative street form-->
Street <input type='text' name="street" id="street" onclick="this.value='';" placeholder="Street"><br>
<br>
<!-- alternative Suburb form-->
Suburb <input type='text' name="suburb" id="suburb" onclick="this.value='';" placeholder="Suburb or town"><br>
<br>
<!-- alternative State dropdown form-->
State
<select name="state">
<option value="NSW">NSW</option>
<option selected="selected" value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
</select>
<br>
<br>
<!-- alternative post code form -->
Postcode:<input type='text' name="postcode2" id="postcode2" onclick="this.value='';" placeholder="****"><br>
<br>
<br>
* Date delivery required:
<!-- Calender drop down menu-->
<select id="daydropdown">
</select>
<select id="monthdropdown">
</select>
<select id="yeardropdown">
</select>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
}
</script>
<br>
<br>
<!-- include a card option-->
Include a card: <input type="checkbox" name="card" id="card">Yes<br>
<br>
Personal message on card: <textarea name="message" id="message" cols="20" rows="10" onclick="this.value='';">Please Enter message here</textarea><br>
<br>
Click on <b>Submit</b> when done; click on <b> Clear form</b> to reset.
<!-- submit button-->
<input type="submit" value="Submit">
<!-- reset button-->
<input type="reset" value="Reset">
</form><br>
<script>
<!--
document.write("<i>Last updated "+document.lastModified+"<I>");
//-->
</script>
</body>
</html>

This is incomplete. I've added functions for some of your options. copy and check for yourself where the changes are. I think you can do the rest
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Joes Fruit and Vegetable Store</title>
<script>
//calender dropdown menu
var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
function populatedropdown(dayfield, monthfield, yearfield){
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
dayfield.options[i]=new Option(i, i+1)
dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
// function validate
function validate_form ()
{
//validate name
valid = true;
if ( document.input.name.value == "")
{
alert ( "Please enter your name");
valid = false;
}
// validate address
if ( document.input.address.value == "")
{
alert ( "Please enter your Address" );
valid = false;
}
// validate Town
if ( document.input.town.value == "")
{
alert ( "Please enter your Town" );
valid = false;
}
// validate postcode
var y = document.getElementById("postcode").value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Postcode must be in numbers.");
document.getElementById("postcode").focus();
return false;
}
if (y.length>4 || y.length<4)
{
alert("Postcode should be 4 digit");
document.getElementById("postcode").focus();
return false;
}
// validate home phone
var y = document.getElementById('hphone').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Home Phone number must be in numbers.");
document.getElementById('hphone').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Home Phone number should be 10 digit");
document.getElementById('hphone').focus();
return false;
}
// validate work phone
var y = document.getElementById('wphone').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("work Phone number must be in numbers.");
document.getElementById('wphone').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Work Phone number should be 10 digit");
document.getElementById('wphone').focus();
return false;
}
// validate fax
var y = document.getElementById('fax').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Fax number must be in numbers.");
document.getElementById('fax').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Fax Phone number should be 10 digit");
document.getElementById('fax').focus();
return false;
}
// validate email
{
var x=document.forms["input"]["email"].value;
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
// validate radio buttons
var o = document.getElementById('rad1');
var t = document.getElementById('rad2');
if ( (o.checked == false ) && (t.checked == true ) )
{
// validate alternative address
if ( document.input.street.value == "")
{
alert ( "Please enter alternative Address" );
valid = false;
}
// validate alternative suburb town
if ( document.input.suburb.value == "")
{
alert ( "Please enter alternative Suburb or town" );
valid = false;
}
} // validate alternative postcode
if ( (o.checked == false ) && (t.checked == true ) )
{
var y = document.getElementById('postcode2').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Alternative Postcode must be in numbers.");
document.getElementById('postcode2').focus();
return false;
}
if (y.length>4 || y.length<4)
{
alert("Alternative Postcode should be 4 digit");
document.getElementById('postcode2').focus();
return false;
}
}
//validate message box
var o = document.getElementById("card");
if (o.checked == true )
{
if ( document.input.message.value == "" || document.input.message.value == "Please Enter message here" )
{
alert ( "Please enter message" );
valid = false;
}
return valid;
}
}
function fnc1()
{
document.getElementById("hsuburb").value=document.getElementById("town").value;
document.getElementById("hstate").value=document.getElementById("state").value;
document.getElementById("postcode2").value=document.getElementById("postcode").value;
document.getElementById("hsuburb").disabled="disabled";
document.getElementById("hstate").disabled="disabled";
document.getElementById("postcode2").disabled="disabled";
}
function fnc2(myid)
{
value=document.getElementById(myid).value;
a=document.getElementById("town").value;
b=document.getElementById("state").value;
c=document.getElementById("postcode").value;
if(value==a)
{alert("change your town");
document.getElementById(myid).value='';
}
else if(value==b)
{alert("change your state");
document.getElementById("default").selected="Selected";
}
else if(value==c)
{alert("change your postcode");
document.getElementById(myid).value='';
}
}
function fnc3()
{
document.getElementById("hsuburb").disabled=false;
document.getElementById("hstate").disabled=false;
document.getElementById("postcode2").disabled=false;
}
</script>
</head>
<body>
<b>Order form for Joe's Fruit Shop</b><br>
<br>
<b> * means you must fill in the details.</b><br>
<br>
<b>Your details:</b><br>
<br>
<!-- Beggining of Form -->
<form name="input" action="Joes.html" onsubmit="return validate_form ()">
<!--name input form -->
* Name: <input type="text" name="name" id="name" onclick="this.value='';" placeholder="Enter your Name"><br>
<br>
<!-- Address input form -->
* Address: <input type="text" name="address" id="address" onclick="this.value='';" placeholder="Enter your street address"><br>
<br>
<!-- Town & state dropdown form-->
* Suburb or Town: <input type="text" name="town" id="town" onclick="this.value='';" placeholder="Town"> * State:
<!-- state drop down list -->
<select name="state" id="state" >
<option value="NSW">NSW</option>
<option selected="selected" value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
</select>
<!-- post code input form -->
* Postcode: <input type='text' name="postcode" id="postcode" onclick="this.value='';" placeholder="****"><br>
<br>
<!-- Home phone input form-->
* Phone: <input type='text' name="hphone" id="hphone" onclick="this.value='';" placeholder="x-xxxx-xxx">
<!-- work phone input form -->
* Work phone <input type='text' name="wphone" id="wphone" onclick="this.value='';" placeholder="x-xxxx-xxx"><br>
<br>
<!-- Fax input form-->
*Fax: <input type='text' name="fax" id="fax" onclick="this.value='';" placeholder="0x-xxxx-xxx">
<!-- Email input form-->
* Email address: <input type='text' name="email" id="email" onclick="this.value='';" onsubmit="return validateForm();" placeholder="Enter your current email"><br>
<br>
<br>
<!-- credit card form --> <b>Credit card details:</b><br>
<br>
* Type:
<select name="credit card">
<option selected="selected" value="AMEX">Amex</option>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
</select>
<!--credit card month expiry date-->
*Expiry date:
<select name="expiration_month">
<option value="">Choose...</option>
<option selected="selected" value="1">January</option>
<option value="2">Febuary</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<!-- Credit card year expiry date-->
<select name="expiration_year">
<option value="">Choose...</option>
<option selected="selected" value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
<br>
<br>
<b>Purchase details</b><br>
<br>
<!-- Product dropdown form-->
* Product:
<select name="product">
<option value="carrot">Bag of carrots</option>
<option value="zucchini">Zucchini</option>
<option value="cabbage">Cabbage</option>
<option value="grapes">Grapes</option>
<option value="tomatoes">TAS</option>
<option value="apples">Apples</option>
<option value="banana">banana</option>
<option selected="selected" value="cucumber">Cucumber</option>
</select>
<!-- Quantity dropdown form-->
Quantity:
<select name="quantity">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br>
<br>
<br>
* <b>Deliver to:</b>
<br>
<br>
<!-- Address Radio check buttons-->
<input type='radio' id="rad1" name='rad' onClick="fnc1()">Home Address<br>
<input type='radio' id="rad2" name='rad' onClick="fnc3()" />Other Address<br>
<br>
<!-- alternative street form-->
Street <input type='text' name="street" id="hstreet" onclick="this.value='';" placeholder="Street"><br>
<br>
<!-- alternative Suburb form-->
Suburb <input type='text' name="suburb" id="hsuburb" onclick="this.value='';" placeholder="Suburb or town" onChange="fnc2(this.id)"><br>
<br>
<!-- alternative State dropdown form-->
State
<select name="state" id="hstate" onChange="fnc2(this.id)">
<option value="-1" id="default">select</option>
<option value="NSW">NSW</option>
<option selected="selected" value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
</select>
<br>
<br>
<!-- alternative post code form -->
Postcode:<input type='text' name="postcode2" id="postcode2" onclick="this.value='';" placeholder="****" onChange="fnc2(this.id)"><br>
<br>
<br>
* Date delivery required:
<!-- Calender drop down menu-->
<select id="daydropdown">
</select>
<select id="monthdropdown">
</select>
<select id="yeardropdown">
</select>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
}
</script>
<br>
<br>
<!-- include a card option-->
Include a card: <input type="checkbox" name="card" id="card">Yes<br>
<br>
Personal message on card: <textarea name="message" id="message" cols="20" rows="10" onclick="this.value='';">Please Enter message here</textarea><br>
<br>
Click on <b>Submit</b> when done; click on <b> Clear form</b> to reset.
<!-- submit button-->
<input type="submit" value="Submit">
<!-- reset button-->
<input type="reset" value="Reset">
</form><br>
<script>
<!--
document.write("<i>Last updated "+document.lastModified+"<I>");
//-->
</script>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

Javascript form verification help - javascript

function validate(){ var selectedClass = doument.getElementById("Class"); if(selectedClass.selectedIndex ==0){ alert(selectedClass.options[0].text); return false; } }

The selectedIndex of "Please select your... " would be 0 so your code should check that the selectedIndex of the select control is always greater than 0.

Related

html get Method sending wrong url

Validate select dropdown with javascript

Javascript HTML drop down validation

javascript - how would you write the if(...) statement for selection options in a form?

validate forms with js mutually exclusive

Categories

Resources