Further input required from a checked radio button

CAO

03-26-2012, 08:28 AM

Hey
I'm trying to create a function which when my "other address" radio button is checked, the "address2", "suburb2" and "postcode2" fields MUST be filled out by the user. I think I need to be using a for loop to determine which button is checked , but I don't know how to apply this checked button to prompt my client that the remaining fields must be completed (as seen in red)? Here is what I have come up with so far...
Many thanks in advance for advice or pointers

[CODE][ICODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Order Form for Joe's Fruit Shop</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Cherie_ONeill">

<style type="text/css">
body {font-family:arial;color:#000000;font-size:10px;}
h4 {font-style:italic;}
.input {font-size:10px;color:#483D8B;}
</style>
<script type='text/javascript'>

function formValidator()
{
// Make quick references to our fields
var fullname = document.getElementById("fullname");
var stnumber = document.getElementById("stnumber");
var address = document.getElementById("address");
var suburb = document.getElementById("suburb");
var state = document.getElementById("state");
var postcode = document.getElementById("postcode");
var phone = document.getElementById("phone");
var email = document.getElementById("email");

// Check each input in the order that it appears in the form!
if(isAlphabet(fullname, "Please enter letters only for your name")){

if (isNumeric(stnumber, "Please enter numbers only for your house number")){

if(isAlphanumeric(address, "Please enter your street name")){

if(isAlphabet(suburb, "Please enter letters only for your suburb")){

if(madeSelection(state, "Please Choose a State")){

if(isNumeric(postcode, "Please enter a valid postcode")){

if(lengthRestriction(postcode, 4, 4)){

if(isNumeric(phone, "Please enter a valid phone")){

if(lengthRestriction(phone, 10, 10)){

if(emailValidator(email, "Please enter a valid email address")){

return true;

}
}
}
}
}
}
}
}
}
}
return false;
}

//ensure all fields are filled but this funtion may not be required on this form
function notEmpty(elem, helperMsg)
{

if(elem.value.length == 0)
{
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}

//ensures a field is numeric only
function isNumeric(elem, helperMsg)
{
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}

//ensures a field contains letters only
function isAlphabet(elem, helperMsg)
{
var alphaExp = /^[a-zA-Z _]+$/;
if(elem.value.match(alphaExp))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}

//ensures a field has both numbers & letters
function isAlphanumeric(elem, helperMsg)
{
var alphaExp = /^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$/;
if(elem.value.match(alphaExp))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}

//restricts the amount of digits required in a numeric field
function lengthRestriction(elem, min, max)
{
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max)
{
return true;
}
else
{
alert("Please enter between " +min+ " and " +max+ " characters");
elem.focus();
return false;
}
}

//validates a selection has been made from the select lists
function madeSelection(elem, helperMsg)
{
if(elem.value == "Please Choose")
{
alert(helperMsg);
elem.focus();
return false;
}
else
{
return true;
}
}

//validates the email address
function emailValidator(elem, helperMsg)
{
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}

}

//resets the form

function formReset()
{
document.getElementById("orderForm").reset();
}

</script>

</head>

<body>

<h2>Order Form</h2>

<h4>* Indicates required fields.</h4>

<h4>Your details:</h4>

<form name="orderForm" id="orderForm" onsubmit="return formValidator()">

<p>* Name: <input id="fullname" name="fullname" class="input"></p>

* Number: <input id="stnumber" size="5" class="input"> * Address: <input id="address" name="address" class="input"></p>

<p>* Suburb or Town: <input id="suburb" name="suburb" class="input">

 * State: <select class="input"id="state"><option>Please Choose</option><option>ACT</option><option>NSW</option><option>NT</option><option>QLD</option><option>SA</option><option>VIC</option><option>WA</option></select>

 * Postcode: <input id="postcode" name="postcode" maxlength="4" size="4" class="input" ></p>

<p>* Home phone: <input name="phone" id="phone" maxlength="10" size="10" class="input"></p>

<p>* Email:&nbsp<input name="email" id="email" value="enter your current email address" class="input"></p>

<br>

<h4>Purchase details</h4>

<p>* Basket choice: <select class="input"><option>Fruit Deluxe</option><option>Vege Deluxe<option>Fruit & Vege Deluxe</option><option>Tropical Treat</option><option>Vege Basics</option></select>

 Quantity: <select class="input"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></p>

<p>* Deliver to:</p>

<input type="radio" id="deliverhome" name="delivery" value="home" checked="checked"><label for="deliverhome">Home address</label><br>

<input type="radio" id="deliverother" name="delivery" value="other"><label for="deliverother">Other address</label><br>

<br>

<input type="text" name="address2" id="address2" class="input"> (Street)

 <input type="text" name="suburb2" id="suburb2" class="input"> (Suburb/Town)

 <select class="input"><option>ACT</option><option>NSW</option><option>NT</option><option>QLD</option><option>SA</option><option>VIC</option><option>WA</option></select> (State)

 <input type="text" name="postcode2" id="postcode2" maxlength="4" size="4" class="input"> (Postcode)

<br>

<input type="submit" value="Submit"> <input type="button" onclick="formReset()" value="Reset">

</form>

</body>

</html>

devnull69

03-26-2012, 08:47 AM

Please use the [ code ] and [ /code ] tags (with no spaces) to properly present your code. You can achieve that by using the # octathorpe button (not the #i button) above the input text area.

Philip M

03-26-2012, 10:58 AM

var fullname = document.getElementById("fullname");

It is somewhat dangerous and bad coding practice to use the same name/id for an HTML element and a Javascript variable.

if (document.orderForm.delivery[1].checked) { // other address has been selected
// check the required fields have been completed correctly
// if not return false
}

You could also place the fields in a <div> which is displayed only when the Other Address radio button is checked.

CAO

04-02-2012, 11:24 AM

Sorry for the late thanks Phillip M. Work + kids + study = BUSY!

I tried the <div> option and was happy with how it turned out BUT I can't rest my mind until i understand how the .checked option works! I've made use of your code suggestion, but I can't figure out how I
// check the required fields have been completed correctly
// if not return false
}

At the moment it's just stuck on rbChecked function. Do I apply my notEmpty function or is this function really not necessary?

Any suggestions would be most appreciated!

PS apologies for the poor/incorrect indentation of my code. I just have it lined up for my own ease of reading at the moment.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Order Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css">
body {font-family:arial;color:#000000;font-size:10px;}
h4 {font-style:italic;}
.input {font-size:10px;color:#483D8B;}
</style>
<script type='text/javascript'>

function formValidator()
{
// Make quick references to our fields
var customername = document.getElementById("customername");
var stnumber = document.getElementById("stnumber");
var address = document.getElementById("address");
var suburb = document.getElementById("suburb");
var state = document.getElementById("state");
var postcode = document.getElementById("postcode");
var phone = document.getElementById("phone");
var mobile = document.getElementById("mobile");
var fax = document.getElementById("fax");
var email = document.getElementById("email");
var deliverother = document.getElementById("deliverother");
var address2 = document.getElementById("address2");
var suburb2= document.getElementById("suburb");
var postcode2 = document.getElementById("postcode2");

// Check each input in the order that it appears in the form!
if(isAlphabet(customername, "Please enter letters only for your name")){

if (isAlphanumeric(stnumber, "Please enter your house number")){

if(isAlphabet(address, "Please enter letters only for your street name")){

if(isAlphabet(suburb, "Please enter letters only for your suburb")){

if(madeSelection(state, "Please Choose a State")){

if(isNumeric(postcode, "Please enter numbers only for your postcode")){
if(lengthRestriction(postcode, 4, "for your postcode")){

if(isNumeric(phone, "Please enter numbers only for your phone")){
if(lengthRestriction(phone, 10, "for your phone number")){

if(isNumeric(mobile, "Please enter numbers only for your mobile number")){
if(lengthRestriction(mobile, 10, "for your mobile number")){

if(isNumeric(fax, "Please enter numbers only for your fax number")){
if(lengthRestriction(fax, 10, "for your fax number")){

if(emailValidator(email, "Please enter a valid email address")){

if(rbChecked(address2, "Please advise other delivery details")){

return true;

}
}
}
}
}
}
}
}
}
}
}
}
}
}
}

return false;
}

function rbChecked(elem, helperMsg)
{

if (document.orderForm.delivery[1].checked) {
alert(helperMsg);
elem.focus();
return false;
}
return true;
}

function notEmpty(elem, helperMsg)
{
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return false;
}
return true;
}

//ensures a field is numeric only
function isNumeric(elem, helperMsg)
{
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}

//ensures a field contains letters only
function isAlphabet(elem, helperMsg)
{
var alphaExp = /^[a-zA-Z _]+$/;
if(elem.value.match(alphaExp))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}

//ensures a field has both numbers & letters
function isAlphanumeric(elem, helperMsg)
{
var alphaExp = /^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$/;
if(elem.value.match(alphaExp))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}

//restricts the amount of digits required in a numeric field
function lengthRestriction(elem, max, helperMsg)
{
var uInput = elem.value;
if(uInput.length >= max && uInput.length <= max)
{
return true;
}
else
{
alert("Please enter " +max+ " characters" +helperMsg);
elem.focus();
return false;
}
}

//validates a selection has been made from the select lists
function madeSelection(elem, helperMsg)
{
if(elem.value == "Please Choose")
{
alert(helperMsg);
elem.focus();
return false;
}
else
{
return true;
}
}

//validates the email address
function emailValidator(elem, helperMsg)
{
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}

//resets the form

function formReset()
{
document.getElementById("orderForm").reset();
}

</script>

</head>

<body>

<h2>Order Form</h2>

<h4>* Indicates required fields.</h4>

<h4>Your details:</h4>

<form name="orderForm" id="orderForm" onsubmit="return formValidator()">

<p>* Name: <input id="customername" name="fullname" class="input"></p>

* Number: <input id="stnumber" size="5" class="input"> * Address: <input id="address" name="address" class="input"></p>

<p>* Suburb or Town: <input id="suburb" name="suburb" class="input">

 * State: <select class="input"id="state"><option>Please Choose</option><option>ACT</option><option>NSW</option><option>NT</option><option>QLD</option><option>SA</option><option>VIC</option><option>WA</option></select>

 * Postcode: <input id="postcode" name="postcode" maxlength="4" size="4" class="input" ></p>

<p>* Home phone: <input name="phone" id="phone" maxlength="10" size="10" class="input"> * Mobile: <input name="mobile" id="mobile" maxlength="10" size="10" class="input"></p>

<p>Fax: <input name="fax" id="fax" maxlength="10" size="10" class="input"> * Email:&nbsp<input name="email" id="email" value="enter your current email address" class="input"></p>

<h4>Delivery</h4>

<input type="radio" id="deliverhome" name="delivery" value="home" checked="checked"><label for="deliverhome">Home address</label><br>

<input type="radio" id="deliverother" name="delivery" value="other"><label for="deliverother">Other address</label><br>

<br>

<input type="text" name="address2" id="address2" class="input"> (Street)

 <input type="text" name="suburb2" id="suburb2" class="input"> (Suburb/Town)

 <select class="input"><option>ACT</option><option>NSW</option><option>NT</option><option>QLD</option><option>SA</option><option>VIC</option><option>WA</option></select> (State)

 <input type="text" name="postcode2" id="postcode2" maxlength="4" size="4" class="input"> (Postcode)

<p>Click on Submit when done; click on Clear form to restart.</p>

<input type="submit" value="Submit"> <input type="button" onclick="formReset()" value="Clear Form">

</form>

</body>

</html>

Philip M

04-02-2012, 04:53 PM

var customername = document.getElementById("customername");
var stnumber = document.getElementById("stnumber");
var address = document.getElementById("address");

One more time, it is highly dangerous and very much not recommended to use the same name/id for a Javascript variable and an HTML element.

A customer's proper name may contain hyphens or apostrophes. Mary-Lou O'Flanaghan-MacDonald.

Your notEmpty() function is next to useless as even a single space or a ? will return false (that is pass the validation).

CAO

04-17-2012, 12:36 PM

Thanks Philip M, I finally got my // check the required fields have been completed correctly function to work.

Not sure whether I should be starting a new string for this, but my next issue is I decided in addition to my popup alerts, I needed a error message to appear next to my form fields which required further correction.
As you can see from my attempt below, it isn't quite working correctly. I haven't applied the <span id="error"> to all the required fields, I'll get to that later...
Any pointers would be appreciated.

<style type="text/css">
body {font-family:arial;color:#000000;font-size:10px;}
h4 {font-style:italic;}
.input {font-size:10px;color:#483D8B;}
</style>
<script type='text/javascript'>

function formValidator()
{
// Make quick references to our fields
var custName = document.getElementById("customername");
var stNumb = document.getElementById("stnumber");
var address1 = document.getElementById("address");
var suburb1 = document.getElementById("suburb");
var state1 = document.getElementById("state");
var postcode1 = document.getElementById("postcode");
var custPhone = document.getElementById("phone");
var custMobile = document.getElementById("mobile");
var custFax = document.getElementById("fax");
var custEmail = document.getElementById("email");
var custDeliverOther = document.getElementById("deliverother");
var addressDeliverOther = document.getElementById("address2");
var suburbDeliverOther= document.getElementById("suburb2");
var stateDeliverOther = document.getElementById("state2");
var postcodeDeliverOther = document.getElementById("postcode2");
var custCard = document.getElementById("card");

document.getElementById("error").innerHTML="";

if(isAlphabet(custName, "Please enter letters only for your street name")){

if(isNumeric(stNumb, "Please enter numbers only for your stress number")){

if(isAlphabet(address1, "Please enter letters only for your street name")){

if (isAlphanumeric(stNumb, "Please enter your house number")){

if(isAlphabet(suburb1, "Please enter letters only for your suburb")){

if(madeSelection(state1, "Please Choose a State")){

if(isNumeric(postcode1, "Please enter numbers only for your postcode")){

if(lengthRestriction(postcode1, 4, "for your postcode")){

if(isNumeric(custPhone, "Please enter numbers only for your phone")){

if(lengthRestriction(custPhone, 10, "for your phone number")){

if(isNumeric(custMobile, "Please enter numbers only for your mobile number")){

if(lengthRestriction(custMobile, 10, "for your mobile number")){

if(isNumeric(custFax, "Please enter numbers only for your fax number")){

if(lengthRestriction(custFax, 10, "for your fax number")){

if(emailValidator(custEmail, "Please enter a valid email address")){

//if other delivery address is required check those fields have been filled out
if(document.orderForm.delivery[1].checked)
{
if(!isAlphabet(addressDeliverOther, "Letters only for the street of your other delivery address"));
if(!isAlphabet(suburbDeliverOther, "Letters only for the suburb of your other delivery address"));
if(!madeSelection(stateDeliverOther, "Please choose a state for your other delivery address"));
if(!isNumeric(postcodeDeliverOther, "Numbers only for the postcode of your other delivery address"));
if(!lengthRestriction(postcodeDeliverOther, 4, " for the postcode of your other delivery address"))

{
return false;
elem.focus();
}
}

return true;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
return false;

}

//ensures a field is numeric only
function isNumeric(elem, helperMsg)
{
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression))
{
return true;
}
else
{
alert(helperMsg);

elem.focus();
return false;
}
}

//ensures a field contains letters only
function isAlphabet(elem, helperMsg)
{
var alphaExp = /^[a-zA-Z _]+$/;
if(elem.value.match(alphaExp))
{
return true;
}
else
{
alert(helperMsg);
document.getElementById("error").innerHTML = "Required Field";
elem.focus();
return false;
}

}

//ensures a field has both numbers & letters
function isAlphanumeric(elem, helperMsg)
{
var alphaExp = /^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$/;
if(elem.value.match(alphaExp))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}

//restricts the amount of digits required in a numeric field
function lengthRestriction(elem, max, helperMsg)
{
var uInput = elem.value;
if(uInput.length >= max && uInput.length <= max)
{
return true;
}
else
{
alert("Please enter " +max+ " numbers" +helperMsg);
elem.focus();
return false;
}
}

//validates a selection has been made from the select lists
function madeSelection(elem, helperMsg)
{
if(elem.value == "Please Choose")
{
alert(helperMsg);
elem.focus();
return false;
}
else
{
return true;
}
}

//validates the email address
function emailValidator(elem, helperMsg)
{
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}

}

</script>

</head>

<body>

<h2>Order Form</h2>

<h4>* Indicates required fields.</h4>

<h4>Your details:</h4>

<form name="orderForm" id="orderForm" onsubmit="return formValidator()">

<p>* Name: <input id="customername" name="fullname" class="input"> <span id="error" style="color:red"></span></p>

* Number: <input id="stnumber" size="5" class="input"> * Address: <input id="address" name="address" class="input"> <span id="error" style="color:red"></span></p>

<p>* Suburb or Town: <input id="suburb" name="suburb" class="input">

 * State: <select class="input"id="state"><option>Please Choose</option><option>ACT</option><option>NSW</option><option>NT</option><option>QLD</option><option>SA</option><option>VIC</option><option>WA</option></select>

 * Postcode: <input id="postcode" name="postcode" maxlength="4" size="4" class="input" ></p>

<p>* Home phone: <input name="phone" id="phone" maxlength="10" size="10" class="input"> * Mobile: <input name="mobile" id="mobile" maxlength="10" size="10" class="input"></p>

<p>Fax: <input name="fax" id="fax" maxlength="10" size="10" class="input"> * Email:&nbsp<input name="email" id="email" value="enter your current email address" class="input"></p>

<br>

<h4>Purchase details</h4>

<p>* Deliver to:</p>

<input type="radio" id="deliverhome" name="delivery" value="home" checked="checked"><label for="deliverhome">Home address</label><br>

<input type="radio" id="deliverother" name="delivery" value="other"><label for="deliverother">Other address</label><br>

<br>

<input type="text" name="otherAddress0" id="address2" class="input"> (Street)

 <input type="text" name="otherAddress1" id="suburb2" class="input"> (Suburb/Town)

 <select id="state2" class="input"><option>Please Choose</option><option>ACT</option><option>NSW</option><option>NT</option><option>QLD</option><option>SA</option><option>VIC</option><option>WA</option></select> (State)

 <input type="text" name="otherAddress2" id="postcode2" maxlength="4" size="4" class="input"> (Postcode)

<p>Click on Submit when done; click on Clear form to restart.</p>

<input type="submit" value="Submit"> <input type="reset" value="Clear Form">

</form>

</body>

</html>