|
JavaScript - Form Validation Code Needed To Make Sure A Radio Button Is Selected
here is the html code that i have
PHP Code: <td valign="middle" valign="middle"> <input type="radio" name="gender" id="genderM" value="Male" /> Male <input type="radio" name="gender" id="genderFM" value="Female" /> Female </td> and here is the js funtion PHP Code: var $j = jQuery.noConflict(); function isValidEmail(str) { return (str.indexOf(".") > 2) && (str.indexOf("@") > 0); } function validateForm(){ var firstName; var lastName; var email; var mobile; var comment; var error; firstName = $j('#firstName').val(); lastName = $j('#lastName').val(); email = $j('#email').val(); mobile = $j('#mobile').val(); comment = $j('#comment').val(); if(firstName=='' || firstName.length < 3){ error = 'Please Enter Your First Name'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } if(lastName=='' || lastName.length < 3){ error = 'Please Enter Your Second Name'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } //mob //$jmob_pattern = '^\d{10}$j'; if(mobile.length != 10 || isNaN(mobile)){ error = 'Please Enter Your Mobile Number'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } if(email=='' || !isValidEmail(email)){ error = 'Please Enter Your Email Address'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } if(comment.length < 5){ error = 'Please Enter A Comment'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } return true; } Does anybody know how i check to see if the radio button is select and also can anybody tell me how i can check for an email in the correct format the function isValidEmail in the above alows emails to pass through if they are in this format aaa@aaa. i only want them to go through if they are aaa@aaa.com Thanks for your help if you give it Similar TutorialsI'm only validating one (Consent) radio button with this code but i need to validate multiple different questions/buttons. Code: <script>
function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
return fnd;
}
function checkForm() {
var chosen = getRBtnName('Consent');
if (chosen < 0) {
alert( "Please choose one answer when you are asked to select a number." );
return false;
} else { return true; }
}
</script>
<form action="congratulations_aff.php" method="post" name="congratulations_aff" onSubmit="return checkForm()">
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td colspan="3">I consent to providing my electronic signature.</p></td>
</tr>
<tr>
<td colspan="3" valign="top">
<input type="radio" name="Consent" value="Y" />
Yes
<input type="radio" name="Consent" value="N" />
No
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td>I consent to electronic receipt of my information reporting documentation.</td>
</tr>
<tr>
<td valign="top">
<input type="radio" name="Consent1099YesNo" value="Y" />
Yes
<input type="radio" name="Consent1099YesNo" value="N" />
No</td>
</tr>
<tr>
<td valign="top">
For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?
<input type="radio" name="USPersonYesNo" value="Y" />
Yes
<input type="radio" name="USPersonYesNo" value="N" />
No</tr>
</table>
<input type="submit" value="submit" value="Submit" />
</form>
Any help would be greatly appreciated. Greetings Programmers. I'm a graphics artist by trade but I also dabble in web design. I registered to this forum because I need your help. I've been handed a web project at work - to build an intranet site. My coding skills in HTML are sufficient to get the job done and I can plug in some JS and trobleshoot where needed but I've hit a wall with regard to one seemingly simple piece of code - I can't find a script anywhere that will generate a radio button that will, once selected, stay that way pretty much forever...or until I delete the listing on the page where these buttons will sit. I realize this isn't the concept behind these buttons but I need it to function this way because I'd like it to serve as a quick visual notification that a given employee review has been completed. These reviews will remain online for up to several months because there will be three reviews per employee over the course of that time. The selected buttons will indicate the reviews that are complete while the unselected ones will indicate which ones are still pending. I'd like the various levels of management viewing this information to know instantly, via the buttons, where we are with these reviews. So, that's my question, can a radio button be scripted to stay selected indefinitely once it's been clicked on? Thank you in advance for any help. It's greatly appreciated. - Sgt. Spanky Hi Experts .. not sure if this is the right forum. However here is my question: I have a date field with 25 values (prepopulated Radio Buttons) where we are asking the members to select one day to volunteer. Once a member selects a day we would like to disable that Radio button value (Greyed out) for other members. So basically out of 25 available days we would like to disable values as soon as a member selects one. The field is on a classic ASP form with SQL Server backend. How can I accomplish the above? Please advice. Regards Vinny Hi, Can somebody help me with the coding. I have a long list of events and I want somebody to be able to select one of those events & there will be a text box that shows the address pertaining to the event selected. Exactly how this website did he http://svacpa.com/live-webinars-and-...-registration/ Please advise! Thanks -------------- Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MySite Registration</title> </head> <body> <div style="width: 900px"> <p>Registration</P <form method="post" action="http://mysite.com" name="Registration"> <label id="Label1">First Name</label><input name="FirstName" type="text" /><br /><br /> <label id="Label1">Last Name</label><input name="LastName" type="text" /><br /><br /> <label id="Label2">Title</label><input name="Title" type="text" /><br /><br /> <label id="Label3">Company</label><input name="Company" type="text" /><br /><br /> <label id="Label5">Email</label><input name="Email" type="text" /><br /><br /> <label id="Label4">Phone</label><input name="Phone" type="text" /><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">San Francisco, Wednesday, March 16 Breakfast</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">San Francisco, Wednesday, March 16 Lunch</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">Santa Clara, Friday, March 18 Lunch</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">Santa Clara, Friday, March 18 Dinner</label><br /><br /> <br /> <input name="Submit1" type="submit" value="Register Now" class="submit" /> <input type="hidden" name="redirect" value="http://www.mysite.com/regsuccess.html"/> <input type="hidden" name="recipient" value="me@mysite.com"/> <input type="hidden" name="required" value="FirstName, LastName, Email, Phone"/> <input type="hidden" name="missing_field_redirect" value="http://mysite.com/regerror.html"/> </form> </div> </body> </html> Hey javascript newbie, Im trying to figure out how to add different radio if its selected or not example: Radio_Button1 value="5": Selected Radio_Button2 value="15": Not Selected Radio_Button3 value="25": Selected Radio_Button4 value="35": Selected var addingitup = ??? and im lost???? how would i check to see if my radio button is not checked. I know in javascript the term "checked" works. Is there a way to us unchecked? here is what i am trying to figure out. Code: with (thisform)
{
if(document.getElementById('m21').unchecked)
{
window.alert('Please Verify Your Age')
m21.focus();
return false;}
}
Wondering how come this doesn't work any ideas? its validating that the radio buttons have been selected. Code: if ( ( form.q1[0].checked == false ) && ( form.q2[1].checked == false) && ( form.q3[2].checked == false )) { alert ( "Please Choose a " ); return false; }
Hi hope someone here can help me with a problem i'm stuck on. Basically I have 3 radio buttons and one of them has to be selected otherwise display a error message but I cant figure it out. Here is my failed attempt: Code: <html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
function validateForm()
{
var x=document.forms["form1"]["name"].value;
var y=document.form1.difficulty.value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
if (y==false)
{
alert(y);
return false;
}
}
</script>
</head>
<body>
<div id="horizon">
<div id="content">
<img src="images/logo.jpg" width="649" height="410"></div>
<div id="content2"><form name ="form1" method ="post" action ="game.php" onSubmit="return validateForm()" >
Name: <input type ='text' name='name' />
<br />
<Input type = 'Radio' Name ='difficulty' value= '1' />Easy
<Input type = 'Radio' Name ='difficulty' value= '2' />Medium
<Input type = 'Radio' Name ='difficulty' value= '3' />Hard
<br /><Input type = "Submit" Name = "Submit" VALUE = "Submit">
</form></div></div>
</body>
</html>
Thanks in advance Hi everyone. I'm getting into javascript coding and i'm stumped with some problem about radio buttons. What I would like is to have a general function where I can pass in any group of radio buttons and have it return the textual value of the radio button selected. First, here is my code so far. Code: function Get_Radio_Selection(options)
{
var choice = "";
for (var index = 0; index <= options.length; index++)
if (options[index].checked == true)
choice = options[index].value;
return choice;
}
Now here's a sample form: Code: <form name="form1">
<input type="radio" name="food" value="Banana">Banana
<input type="radio" name="food" value="Mango">Mango
<input type="radio" name="food" value="Orange">Orange
<input type="radio" name="food" value="Oatmeal">Oatmeal
<input type="button" name="blah" value="Get Selection"
onclick="Get_Radio_Selection(document.form1.food);">
</form>
My question is, when i run this function and pass it in the group of radio buttons by means of the onclick event handler, firefox 3.6.22 reports in the error console on line 22 that "options[index] is undefined". It seems that if i use the variable "index" more than one time it reports this error but if I take out the assignment to variable "choice" that it works just fine. I rewrote the function using a separate variable and this time it works perfectly: Code: function Get_Radio_Selection(options)
{
var choice = "";
var index;
for (var i = 0; i < options.length; i++)
{
if (options[i].checked == true)
{
index = i;
choice = options[index].value;
}
}
return choice;
}
Notice the indexing variables in the "if" statement and the assignment to "choice" are different. Does anyone have any suggestions on why this happens? Thanks. Hi, i'm new here and I need help. I need a script that can alert in 2 ways for multiple radio button groups of "yes" and "no." I got the first question to alert the way I need (with alert #1 for yes and alert#2 for no.) However, starting from the 2nd question it alerts #1 for both yes and no. This is the script I'm working with: Code: <script type="text/javascript">
function valbutton(form) {
myOption = -1;
for (i=form.buttonset1.length-1; i > 0; i--) {
if (form.buttonset1[i].checked) {
myOption = i; i = -1;
}
}
if (myOption == -1) {
alert("Please select Yes or No");
return false;
}
if (myOption == 1) {
alert("Yes, it works!");
return false;
}
if (myOption == 2) {
alert("No, it won't work.");
return false;
}
}
</script>
The following are the 1st two sets of radio buttons: Code: <form name="myform" action="formstest.html"> <tr> <td> <input type="reset" value="Click to Reset"> <br><input type="radio" name="buttonset1" value="1" rel="none" id="r1" /><label for="r1">Click to Start Over</label><br /></td> </tr> <tr><td class="question">Question #1</td> <td><input type="radio" name="buttonset1" value="2" rel="flat" id="r2" /> <label for="r2">Yes</label><br /> <input type="radio" name="buttonset1" value="3" rel="none" id="r3" /> <label for="r3">No</label><br /> </td> </tr> <tr rel="flat"> <td class="question"><label for="flat"><span class="accessibility">If metal:</span>Question #2</label></td> <td><input type="radio" name="buttonset2" value="4" rel="uneven" id="r4" /> <label for="r4">Yes</label><br /> <input type="radio" name="buttonset2" value="5" rel="none" id="r5" /> <label for="r5">No</label><br /> </td> </tr> Is it possible to switch out the alerts for yes and no for next 4 questions? And finally, the following is the lengthy, thorough version of my question if it clarifies what I'm trying to do. I would really appreciate someone to point me the right direction. I've tried all kinds of variation to the script and I just can't seem to make it work. Thanks in advance! (Lengthy Version) I also need questions to appear (or not show) below as select radio buttons are clicked. I have 6 groups of yes and no radio buttons. I would like the first two groups to have "alert 1" when yes is clicked (and "alert 2" for no.) I would like the rest to show "alert 2" when yes is clicked (and "alert 1" for no.) (I also have all the questions hidden below question 1. Each subsequent questions appear upon clicking yes for questions 1&2, and no for the rest. I would like to keep this intact - I put that js code I downloaded at the end of this post.) Here's what I have so far... I got most of it working except after the first question, "alert 1" appears for all the clicks submitted. I've been at it for a few weeks and I can't seem to figure it out. Thanks in advance! Code: <html>
<head>
<title>Form Test</title>
<script type="text/javascript">
function valbutton(form) {
myOption = -1;
for (i=form.buttonset1.length-1; i > 0; i--) {
if (form.buttonset1[i].checked) {
myOption = i; i = -1;
}
}
if (myOption == -1) {
alert("Please select Yes or No");
return false;
}
if (myOption == 1) {
alert("Yes, it works!");
return false;
}
if (myOption == 2) {
alert("No, it won't work.");
return false;
}
}
</script>
</head>
<body>
<form name="myform" action="formstest.html">
<tr>
<td> <input type="reset" value="Click to Reset">
<br><input type="radio" name="buttonset1" value="1" rel="none" id="r1" /><label for="r1">Click to Start Over</label><br /></td>
</tr>
<tr><td class="question">Question #1</td>
<td><input type="radio" name="buttonset1" value="2" rel="flat" id="r2" /> <label for="r2">Yes</label><br />
<input type="radio" name="buttonset1" value="3" rel="none" id="r3" /> <label for="r3">No</label><br />
</td>
</tr>
<tr rel="flat">
<td class="question"><label for="flat"><span class="accessibility">If metal:</span>Question #2</label></td>
<td><input type="radio" name="buttonset2" value="4" rel="uneven" id="r4" /> <label for="r4">Yes</label><br />
<input type="radio" name="buttonset2" value="5" rel="none" id="r5" /> <label for="r5">No</label><br />
</td>
</tr>
<tr rel="uneven">
<td class="question"><label for="uneven"><span class="accessibility">If flat:</span> Question #3</label></td>
<td><input type="radio" name="buttonset3" value="6" rel="none" id="r6" /> <label for="r6">Yes</label><br />
<input type="radio" name="buttonset3" value="7" rel="ridges" id="r7" /> <label for="r7">No</label><br />
</td>
</tr>
<tr rel="ridges">
<td class="question"><label for="ridges"><span class="accessibility">If uneven:</span> Question #4</label></td>
<td><input type="radio" name="buttonset4" value="8" rel="none" id="r8" /> <label for="r8">Yes</label><br />
<input type="radio" name="buttonset4" value="9" rel="holes" id="r9" /> <label for="r9">No</label><br />
</td>
</tr>
<tr rel="holes">
<td class="question"><label for="holes"><span class="accessibility">If ridges:</span> Question #5</label></td>
<td><input type="radio" name="buttonset5" value="10" rel="none" id="r10" /> <label for="r10">Yes</label><br />
<input type="radio" name="buttonset5" value="11" rel="curved" id="r11" /> <label for="r11">No</label><br />
</td>
</tr>
<tr rel="curved">
<td class="question"><label for="curved"><span class="accessibility">If holes:</span>Question #6 </label></td>
<td><input type="radio" name="buttonset6" value="12" rel="none" id="r12" /> <label for="r12">Yes</label><br />
<input type="radio" name="buttonset6" value="13" rel="answer" id="r13" /> <label for="r13">No</label><br />
</td>
</tr>
<tr rel="answer">
<td></td>
<td class="question"><label for="answer"><span class="accessibility">If not curved:</span><strong> Yes, correct answer!</strong></label></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Submit" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
The following is the JS found to make corresponding questions appear as each relevant radio button answer is clicked: Code: /*****************************************/
/** Usable Forms 2.0, November 2005 **/
/** Written by ppk, www.quirksmode.org **/
/** Instructions for use on my site **/
/** **/
/** You may use or change this script **/
/** only when this copyright notice **/
/** is intact. **/
/** **/
/** If you extend the script, please **/
/** add a short description and your **/
/** name below. **/
/*****************************************/
var containerTag = 'TR';
var compatible = (
document.getElementById && document.getElementsByTagName && document.createElement
&&
!(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1)
);
if (compatible)
{
document.write('<style>.accessibility{display: none}</style>');
var waitingRoom = document.createElement('div');
}
var hiddenFormFieldsPointers = new Object();
function prepareForm()
{
if (!compatible) return;
var marker = document.createElement(containerTag);
marker.style.display = 'none';
var x = document.getElementsByTagName('select');
for (var i=0;i<x.length;i++)
addEvent(x[i],'change',showHideFields)
var x = document.getElementsByTagName(containerTag);
var hiddenFields = new Array;
for (var i=0;i<x.length;i++)
{
if (x[i].getAttribute('rel'))
{
var y = getAllFormFields(x[i]);
x[i].nestedRels = new Array();
for (var j=0;j<y.length;j++)
{
var rel = y[j].getAttribute('rel');
if (!rel || rel == 'none') continue;
x[i].nestedRels.push(rel);
}
if (!x[i].nestedRels.length) x[i].nestedRels = null;
hiddenFields.push(x[i]);
}
}
while (hiddenFields.length)
{
var rel = hiddenFields[0].getAttribute('rel');
if (!hiddenFormFieldsPointers[rel])
hiddenFormFieldsPointers[rel] = new Array();
var relIndex = hiddenFormFieldsPointers[rel].length;
hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0];
var newMarker = marker.cloneNode(true);
newMarker.id = rel + relIndex;
hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]);
waitingRoom.appendChild(hiddenFields.shift());
}
setDefaults();
addEvent(document,'click',showHideFields);
}
function setDefaults()
{
var y = document.getElementsByTagName('input');
for (var i=0;i<y.length;i++)
{
if (y[i].checked && y[i].getAttribute('rel'))
intoMainForm(y[i].getAttribute('rel'))
}
var z = document.getElementsByTagName('select');
for (var i=0;i<z.length;i++)
{
if (z[i].options[z[i].selectedIndex].getAttribute('rel'))
intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('rel'))
}
}
function showHideFields(e)
{
if (!e) var e = window.event;
var tg = e.target || e.srcElement;
if (tg.nodeName == 'LABEL')
{
var relatedFieldName = tg.getAttribute('for') || tg.getAttribute('htmlFor');
tg = document.getElementById(relatedFieldName);
}
if (
!(tg.nodeName == 'SELECT' && e.type == 'change')
&&
!(tg.nodeName == 'INPUT' && tg.getAttribute('rel'))
) return;
var fieldsToBeInserted = tg.getAttribute('rel');
if (tg.type == 'radio')
{
removeOthers(tg.form[tg.name],fieldsToBeInserted)
intoMainForm(fieldsToBeInserted);
}
}
function removeOthers(others,fieldsToBeInserted)
{
for (var i=0;i<others.length;i++)
{
var show = others[i].getAttribute('rel');
if (show == fieldsToBeInserted) continue;
intoWaitingRoom(show);
}
}
function intoWaitingRoom(relation)
{
if (relation == 'none') return;
var Elements = hiddenFormFieldsPointers[relation];
for (var i=0;i<Elements.length;i++)
{
waitingRoom.appendChild(Elements[i]);
if (Elements[i].nestedRels)
for (var j=0;j<Elements[i].nestedRels.length;j++)
intoWaitingRoom(Elements[i].nestedRels[j]);
}
}
function intoMainForm(relation)
{
if (relation == 'none') return;
var Elements = hiddenFormFieldsPointers[relation];
for (var i=0;i<Elements.length;i++)
{
var insertPoint = document.getElementById(relation+i);
insertPoint.parentNode.insertBefore(Elements[i],insertPoint);
if (Elements[i].nestedRels)
{
var fields = getAllFormFields(Elements[i]);
for (var j=0;j<fields.length;j++)
{
if (!fields[j].getAttribute('rel')) continue;
if (fields[j].checked || fields[j].selected)
intoMainForm(fields[j].getAttribute('rel'));
}
}
}
}
function getAllFormFields(node)
{
var allFormFields = new Array;
var x = node.getElementsByTagName('input');
for (var i=0;i<x.length;i++)
allFormFields.push(x[i]);
var y = node.getElementsByTagName('option');
for (var i=0;i<y.length;i++)
allFormFields.push(y[i]);
return allFormFields;
}
/** ULTRA-SIMPLE EVENT ADDING **/
function addEvent(obj,type,fn)
{
if (obj.addEventListener)
obj.addEventListener(type,fn,false);
else if (obj.attachEvent)
obj.attachEvent("on"+type,fn);
}
addEvent(window,"load",prepareForm);
/** PUSH AND SHIFT FOR IE5 **/
function Array_push() {
var A_p = 0
for (A_p = 0; A_p < arguments.length; A_p++) {
this[this.length] = arguments[A_p]
}
return this.length
}
if (typeof Array.prototype.push == "undefined") {
Array.prototype.push = Array_push
}
function Array_shift() {
var A_s = 0
var response = this[0]
for (A_s = 0; A_s < this.length-1; A_s++) {
this[A_s] = this[A_s + 1]
}
this.length--
return response
}
if (typeof Array.prototype.shift == "undefined") {
Array.prototype.shift = Array_shift
}
Dear All, I am trying to design a from with radio buttons and text boxes which will accept text values upon clicking the radio buttons. So basically the textbox only appears when the radio button is clicked. The problem I am facing is the textbox does not hide upon selecting different radio button. Below I am posting the javascript and the associated html form for the same. I would like to request some suggestions and directions for the same. Regards Code: Javascript:
<script type="text/javascript">
function show() {
var i = 0;
var el;
while(el = document.getElementsByName('radio')[i++] ) {
(document.getElementById('radio'+i).checked) ?
document.getElementById('text'+i).style.display="block" :
document.getElementById('text'+i).style.display="none"
}
}
</script>
Code: <div id="SeqInput">
<form method="post" action="the url to process this form" >
<div>
<label><input type="radio" name="seqinput" value="accession" id="radio1" onclick="show()"></label> NCBI accession number: <label for="accession"><input type="text" id="text1"></label><br>
<label><input type="radio" name="seqinput" value="gene" id="radio2" onclick="show()"></label> NCBI Gene Name: <label for="gene"> <input type="text" id="text2"></label><br>
<label><input type="radio" name="seqinput" value="file" id="radio3"></label> Upload fasta sequence from file: <label for="file"><input type="file" id="file"></label><br>
<label><input type="radio" name="seqinput" value="fasta" id="radio4" onclick="show()"></label> Click to type in or copy/paste the fasta sequence:<br>
<label><textarea rows="10" cols="100" id="text3" style="display: none"> </textarea></label>
</div>
</form>
</div>
Hello All. What my script does is if you do not select a radio button and you hit submit an error will pop up saying please select game1. this is taken from the name of the radio button.. How can i make it so it prints out the VALUES of the 2 radio buttons. end result should print please select Baltimore Ravens vs. Cincinnati Bengals rather than please select game1. Code: function isChecked(radgrp)
{
var i = radgrp.length;
do
if (radgrp[--i].checked)
return true;
while (i);
return false;
}
function validateTest(els)
{
var focus_me = null, msg = "";
if (!isChecked(els.game1))
{
msg += " Game #1\n";
focus_me = focus_me || els.game1[0];
}
if (!isChecked(els.game2))
{
msg += " Game #2\n";
focus_me = focus_me || els.game2[0];
}
if (!isChecked(els.game16))
{
msg += " Game #16\n";
focus_me = focus_me || els.game16[0];
}
if (msg != "")
{
var prefix = "\n WARNING: The following Games(s) were not selected:\n\n";
var suffix = "\nClick OK to submit your picks anyway.\n\n";
var suffix = suffix + "\n Click CANCEL to correct your picks."
var ask = confirm(prefix + msg + suffix);
if (ask) {
if (focus_me)
focus_me.focus();
return true;
}
else{
return false;
}
}
}
Here is the radio button. If you dont select the radio button i want the javascript validation pop but to say "please select Baltimore Ravens vs. Cincinnati Bengals rather than game1 like it does now. Code: <INPUT TYPE=RADIO NAME="game1" VALUE="Baltimore Ravens">Baltimore Ravens<BR> <INPUT TYPE=RADIO NAME="game1" VALUE="Cincinnati Bengals">Cincinnati Bengals<BR> Thanks I am using ASP validators and I have a contact form. I want to be able to have a phone and email radio button group. The email textbox also has a RegularExpressionValidator If the phone item is selected then I want the validation to be enabled on the phone text box making it mandatory while the email text box isn't, and if they choose the email as the contact it will be reversed. I want to be able to do this without having to do a postback. I already have the logic on the code behind and the enquiry object. also I am fairly new to javascript so I have been using mostly jQuery as easier to implement Here are the coding.. Code: <jsp:useBean id="chequeStopBean" scope="session" class="my.com.infopro.ibank.ui.bean.ChequeStopBean"/>
<jsp:useBean id="labelBean" scope="session" class="my.com.infopro.ibank.ui.bean.LabelBean"/>
<jsp:useBean id="lang" scope="session" class="my.com.infopro.ibank.ui.bean.LanguageBean" />
<%@ page language="java" import = "java.util.*" errorPage="" %>
<%@ page import="my.com.infopro.ibank.dto.ChequeDTO"%>
<%
request.getSession(true);
String contextPath = request.getContextPath();
chequeStopBean.queryAccList();
//RequestDispatcher dispatcher = null;
%>
<html>
<head>
<title><%=labelBean.getLabel("STOP_CHEQUE")%></title>
<meta HTTP-EQUIV="Pragma" content="no-cache">
<meta HTTP-EQUIV="Expires" content="-1">
<jsp:include page="/ScriptHeader.jsp"/>
<script language="javascript">
function validateAndSubmit() {
var msg1 = "<%=labelBean.getLabel("MSG_REQUIRED_FIELD")%>";
var msg2 = "<%=labelBean.getLabel("MSG_CANNOT_CONTAIN_CHARACTER")%>";
var msg3 = "<%=labelBean.getLabel("MSG_IN_THE_FIELD")%>";
var msg4 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER")%>";
var msg5 = "<%=labelBean.getLabel("WITH")%>";
var msg6 = "<%=labelBean.getLabel("TO")%>";
var msg7 = "<%=labelBean.getLabel("MSG_CHARACTER")%>";
var msg8 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_VALID_NUMBER")%>";
var msg9 = "<%=labelBean.getLabel("MSG_REQUIRED_FIELD")%>";
var msg10 = "<%=labelBean.getLabel("MSG_WITH_EXACTLY")%>";
var msg11 = "<%=labelBean.getLabel("MSG_WITH_VALID_DATE")%>";
var msg12 = "<%=labelBean.getLabel("MSG_EXAMPLE_DATE")%>";
var msgNum11 = "<%=labelBean.getLabel("MSG_WITH_A_MINIMUM_VALUE_OF")%>";
var msgNum12 = "<%=labelBean.getLabel("MSG_WITH_A_MAX_VALUE_OF")%>";
var msgNum13 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_ROUND_INETEGER")%>";
var msgNum14 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_AT_MOST")%>";
var msgNum15 = "<%=labelBean.getLabel("MSG_DECIMAL_PLACES")%>";
var msgEnter = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_VALID")%>";
var errorMsg = "<%=labelBean.getLabel("MSG_LOWECASE_ALPHABET_ALLOWED")%>"
var radioButtons = document.getElementsByName("radio");
for (var x = 0; x < radioButtons.length; x ++) {
if (radioButtons[x].checked) {
if(radioButtons[x].value=="1")
{
if (! validateTextEntry(form.chqNum, "<%=labelBean.getLabel("CHQNUM")%>" + " ", true,11,11, msg1, msg2, msg3,
msg4, msg5, msg6, msg7, msg10) )
return false;
if (! validateAlphabet(form.chqNum, "" + " ",1, msg2,"" ))
return false;
}
else if(radioButtons[x].value=="2")
{
if (! validateTextEntry(form.chqNumFrom, "<%=labelBean.getLabel("CHQNUMFROM")%>" + " ", true,11,11, msg1, msg2, msg3,
msg4, msg5, msg6, msg7, msg10) )
return false;
if (! validateTextEntry(form.chqNumTo, "<%=labelBean.getLabel("CHQNUMTO")%>" + " ", true,11,11, msg1, msg2, msg3,
msg4, msg5, msg6, msg7, msg10) )
return false;
if (! validateAlphabet(form.chqNumFrom, "" + " ",1, msg2,"" ))
return false;
if (! validateAlphabet(form.chqNumTo, "" + " ",1, msg2,"" ))
return false;
if(form.chqNumFrom.value == form.chqNumTo.value){
alert("<%=labelBean.getLabel("MSG_CANNOT_SAME")%>");
return false;
}
}
}
}
return true;
}
function show(id)
{
if (document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = 'block';
}
}
//-->
<!--
function hide(id)
{
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body onload="show('single')">
<form name="form" method="POST" action="<%=contextPath%>/ChequeStopServlet?tranx=confirm" dir="<%=lang.getDir()%>" >
<table width="500" align="center">
<tr>
<td align="left" colspan="3"> </td>
</tr>
<tr>
<td align="left" colspan="3" class="mainHeader"><%=labelBean.getLabel("STOP_CHEQUE")%></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" class="subHeader"><%=labelBean.getLabel("CHQ_DETAIL") %></td>
</tr>
<tr>
<td colspan="3"><div align="center">
<p class="statusError">
<%if(request.getParameter("error") != null) out.println(labelBean.getLabel(request.getParameter("error"))); else out.println("");%>
</p>
</div></td>
</tr>
</table><br />
<table width="500" align="center">
<tr>
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("ACC_NUMBER")%></td>
<td width="10" class="lbl">:</td>
<td width="305" align="left">
<select size="1" name="accNum">
<%
for (Iterator iter = chequeStopBean.getAccList().iterator(); iter.hasNext();) {
ChequeDTO chqDto = (ChequeDTO)iter.next();
%>
<option value="<%=chqDto.getAccNum()%>"><%=chqDto.getAccNum()%></option>
<% } %>
</select>
</td>
</tr>
<tr>
<td align="right">
<input type="radio" class="radioStyle" name="radio" value="1" onfocus="show('single');hide('multiple');hide('multiple1');return true;" checked="checked" >
<%=labelBean.getLabel("STOP_SINGLE")%>
</td>
<td> </td>
<td>
<input type="radio" class="radioStyle" name="radio" value="2" onfocus="hide('single');show('multiple');show('multiple1');return true;">
<%=labelBean.getLabel("STOP_MULTIPLE")%>
</td>
</tr>
<tr id="single">
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("CHEQUE_NUMBER")%></td>
<td class="lbl"width="10">:</td>
<td colspan="2" align="left">
<input name="chqNum" type="text" size="15">
</td></tr>
<tr id="multiple" style="display: 'none'">
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("FROM_CHEQUE_NUMBER")%></td>
<td class="lbl"width="10">:</td>
<td colspan="2" align="left">
<input name="chqNumFrom" type="text" size="15">
</td></tr>
<tr id="multiple1" style="display: 'none'">
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("TO_CHEQUE_NUMBER")%></td>
<td class="lbl"width="10">:</td>
<td colspan="2" align="left">
<input name="chqNumTo" type="text" size="15">
</td></tr>
<tr>
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("REASON")%></td>
<td class="lbl" width="10" >:</td>
<td colspan="2">
<select name="reason">
<option value="Lost"><%=labelBean.getLabel("LOST")%></option>
<option value="Stolen"><%=labelBean.getLabel("STOLEN")%></option>
<option value="Payment Cancellation"><%=labelBean.getLabel("PAYMENT_CANCELLATION")%></option>
<option value="Others"><%=labelBean.getLabel("OTHERS")%></option>
</select>
</td>
</tr>
<br/>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" align="center">
<input class="button" type="submit" value="Next" onClick="return validateAndSubmit();" >
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" align="left" class="footer"><%=labelBean.getLabel("NOTE")%>
</td>
</tr>
<tr><td colspan="3" class="footer">
<ul>
<li><%=labelBean.getLabel("THE_ASTERISK")%></li>
</ul>
</td>
</tr>
</table>
<jsp:include page="/Footer.jsp" />
</form>
</body>
</html>
This is error for the first page.. This is picture that which i wan.. Thanks! Hi guys, I am working on my first validation form and although the Submit button works fine and puts me to the landing page, I don't get the alert, when nothing is checked. Please look at my code and help if you can. I really don't need anything fancy, just working Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="social media survey, social media, media survey, survey, danish media, danish media survey" />
<meta name="description" content="This survey is a school project, not an actual research. It has been designed to figure out the connection between the gender of the Danish users and their knowledge and usage of social media." />
<script language="JavaScript" type="text/javascript"></script>
<script>
function isRadioButtonSelected(radioGrpName, errorMsg){
var radios = document.getElementsByName(radioGrpName);
var i;
for (i=0; i<radios.length; i=i+1 ){
if (radios[i].checked){
return true;
}
}
alert(errorMsg);
return false;
}
function validate(){
if(isRadioButtonSelected('gender', 'please select your gender')){
return true;
}
return false;
}
</script>
<title>The Social Media survey</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #8DC63F;
margin: 0;
padding: 0;
color: #000;
}
}
a img {
border: none;
}
.container {
width: 960px;
margin: 0 auto;
}
.header {
background: #FFF;
margin-top: 30px;
background-color:transparent;
background-image:url(header.jpg);
background-attachment: fixed;
background-position:left center;
background-repeat:no-repeat;
}
.content {
padding-left: 50px;
padding-right: 50px;
padding-top: 30px;
padding-bottom: 30px;
background-color:#E7EFB9;
font-family:Verdana, Geneva, sans-serif;
font-size: 13px;
}
.footer {
background: #FFF;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><img src="header1.jpg" alt="The Social Media survey" width="960" height="175" /></div>
<div class="content">
<form id="page1" action="http://projects.knord.dk/interaction/saveforminfo.aspx" onsubmit="return validate(); method="post">
<input type="hidden" name="surveyid" value="igakotra" />
<input type="hidden" name="landingpage" value="http://www.google.com" />
<input type="hidden" name="usecookie" value="true" />
<h3>1. Choose your gender</h3>
<input type="radio" name="gender" value="male" id="male"/><label for "male">Male</label>
<input type="radio" name="gender" value="female" id="female"/><label for "female">Female</label><br /><br />
<input type="submit" name="submit" value="Submit"/>
</form>
</div>
<div class="footer"><a href="page1.html"><img src="1page.jpg" width="960" height="99" alt="1/6 pages" /></div>
</div>
</body>
</html>
I really need it asap... thanks guys, you're awesome Hi all. I'm having some trouble w/ my radiobutton code and i dont know why. for instance if i select yes for the 1st radio button, and no for the 2nd, instead of doing what it should do for no, it gets rid of w/e it did for yes.. also, if i enter something into the 1st box, and select another radio button, it deletes w/e is in all boxes... Code: <html>
<head><title>So you want to make a website?</title></head>
<body>
<script>
var lvl=0;
var cssbgc=0;
var ischecked=0;
var isgroup1=0;
var isgroup2=0;
function get_funcs(lvl){
if(lvl == "Easy"){
a='<hr>\n';
a+='<h1>Website Controls</h1>\n';
a+='Do you want to add a title to your website?<br>\n';
a+='Yes <input onclick="checkchecks()" type="radio" name="group1" value="Yes"> No<input onclick="checkchecks()" type="radio" name="group1" value="No"><br><br>\n';
a+='<div id="websitep">- Does not want website title</div><br>\n';
a+='Do you want to add a background image to your website?<br>\n';
a+='Yes <input onclick="checkchecks()" type="radio" name="group2" value="Yes1"> No<input onclick="checkchecks()" type="radio" name="group2" value="No1"><br><br>\n';
a+='<div id="websiteq">- Does not want website background</div><br>\n';
a+='Your Website scripts:<br><input name="websitescripts" type="text" size="30"> <a href="javascript:answerq(\'websitescripts\');">Help?</a><br>\n';
a+='<br>Your website content (this will appear inbetween <body></body>)<br>This can be done for you if you wish: <a href="javascript:answerq(\'webcontent\');">Help?</a><br><textarea rows="15" cols="45" id="websitecontent" name="websitecontent"></textarea><br>\n';
a+='<input type="button" value="Submit" name="sub1" id="sub1" onClick="checkconts(lvl)"><br>\n';
a+='<h1>Your Website</h1><hr>\n';
a+='<textarea rows="15" cols="45" id="websitelvl" name="websitelvl"></textarea>\n';
document.getElementById("websitecontrols").innerHTML = a;
}else if(lvl == "Medium"){
a='<hr>\n';
a+='<h1>Website Controls</h1>\n';
a+='<table>\n';
a+='<tr><td>\n';
a+='Your Website background picture (if any):<br><input name="webback" type="file" size="30"> <a href="javascript:answerq(\'webback\');">Help?</a><br>\n';
a+='Your Website scripts:<br><input name="websitescripts" type="text" size="30"> <a href="javascript:answerq(\'websitescripts\');">Help?</a><br>\n';
a+='Do you want a website background color using css?<br><br>Yes<input onclick="check()" type="checkbox" value="Yes" id="group1" name="group1"> No<input onclick="check()" type="checkbox" value="No" id="group1" name="group1"><br>\n<div id="cssbc"></div>\n';
a+='<br>Your website content (this will appear inbetween <body></body>)<br>This can be done for you if you wish: <a href="javascript:answerq(\'webcontent\');">Help?</a><br><textarea rows="15" cols="45" id="websitecontent" name="websitecontent"></textarea><br>\n';
a+='<input type="button" value="Submit" name="sub1" id="sub1" onClick="checkconts(lvl)"><br>\n';
a+='</td></tr>\n';
a+='</table>\n';
a+='<h1>Your Website</h1><hr>\n';
a+='<textarea rows="15" cols="45" id="websitelvl" name="websitelvl"></textarea>\n';
document.getElementById("websitecontrols").innerHTML = a;
}
}
function checkchecks(){
for (i=0; i<document.forms.radioform.group1.length; i++){
if(i == 0 && document.forms.radioform.group1[i].checked == true){
ischecked = 1;
isgroup1 = 1;
isgroup2 = 0;
}else if(i == 1 && document.forms.radioform.group1[i].checked == true){
ischecked = 0;
isgroup1 = 0;
isgroup2 = 0;
}
}
for (i=0; i<document.forms.radioform.group2.length; i++){
if(i == 0 && document.forms.radioform.group2[i].checked == true){
ischecked = 1;
isgroup1 = 0;
isgroup2 = 1;
}else if(i == 1 && document.forms.radioform.group2[i].checked == true){
ischecked = 0;
isgroup1 = 0;
isgroup2 = 0;
}
}
if(isgroup1 == 1){
alert('Make SURE this option is what you want. If you select another option after entering data, it will erase your data...');
a='Your Website Title:<br><input name="webtitle" type="text" size="30"> <a href="javascript:answerq(\'webtitle\');">Help?</a><br>\n';
document.getElementById("websitep").innerHTML = a;
}else{
alert('Make SURE this option is what you want. If you select another option after entering data, it will erase your data...');
a='- Does not want website title<br>\n';
document.getElementById("websitep").innerHTML = a;
}
if(isgroup2 == 1){
alert('Make SURE this option is what you want. If you select another option after entering data, it will erase your data...');
b='Your Website background picture (if any):<br><input name="webback" type="file" size="30"> <a href="javascript:answerq(\'webback\');">Help?</a><br>\n';
document.getElementById("websiteq").innerHTML = b;
}else{
alert('Make SURE this option is what you want. If you select another option after entering data, it will erase your data...');
a='- Does not want website background image<br>\n';
document.getElementById("websiteq").innerHTML = b;
}
alert('isgroup1:'+isgroup1+'|'+'isgroup2:'+isgroup2+'');
}
function check(){
for (i=0; i<document.forms.radioform.website.length; i++){
if(document.forms.radioform.website[i].checked == true){
alert('Make SURE this option is what you want. If you select another option after entering data, it will erase your data...');
if(i == 0 && document.forms.radioform.website[1].checked == true){
cssbgc = 0;
document.forms.radioform.website[1].checked = false;
}else if(i == 1 && document.forms.radioform.website[0].checked == true){
cssbgc = 1;
document.forms.radioform.website[0].checked = false;
}
}
}
if(cssbgc == 0){
alert('ok then');
}else if(cssbgc == 1){
document.getElementById("cssbc").innerHTML = "";
}
}
function preview_website(){
if(document.forms.radioform.websitecontent.value != ""){
alert('Previewing your website...');
a='<center><h1>Website Preview<\/h1><\/center>\n<br><br>\n';
a+=document.forms.radioform.websitecontent.value+'\n';
document.write(a);
}
}
function previewconts(){
if(document.forms.radioform.websitecontent.value != "" || document.forms.radioform.webtitle.value != "" || document.forms.radioform.webback.value != "" || document.forms.radioform.weblvl.value != ""){
preview_website(lvl);
}else{
alert('Please enter something into the box before continuing...');
}
}
function checkconts(lvl){
if(document.forms.radioform.websitecontent == null || document.forms.radioform.websitecontent == null || document.forms.radioform.webtitle == null || document.forms.radioform.webback == null || document.forms.radioform.weblvl == null){
alert('Please select an option 1st...');
}else if(document.forms.radioform.websitecontent.value == null || document.forms.radioform.websitecontent.value == null || document.forms.radioform.webtitle.value == null || document.forms.radioform.webback.value == null || document.forms.radioform.weblvl.value == null){
alert('Please enter something into the box before continuing...');
}else{
a=document.forms.radioform.websitelvl.value = website(lvl);
document.getElementById('websitecontent').innerHTML = a;
}
}
function get_option(which){
if(which == "webtitle"){
return document.radioform.webtitle.value;
}else if(which == "webback"){
return document.radioform.webback.value;
}else if(which == "websitecontent"){
return document.radioform.websitecontent.value;
}else if(which == "websitescripts"){
return document.radioform.websitescripts.value;
}
}
function answerq(divname){
if(divname == "webtitle"){
alert('This is where you enter the name of your website that appears in the top left corner of your web browser.');
}else if(divname == "webback"){
alert('This is where you enter a background image link or a select a picture from your hard drive (IE: When selected you will see something like C:/mypics/pic.jpg appear in the box).');
}else if(divname == "webcontent"){
alert('this is where you enter what you want to appear on the page (this can be done for you if you wish).');
}else if(divname == "websitescripts"){
alert('This is where you enter any file locations to your script file(s).');
}
}
function website(lvl){
if(lvl == "Easy"){
a = "<html>\n";
a += "<head><title>"+get_option('webtitle')+"</title></head>\n";
if(document.forms.radioform.webback.value == ""){
a += "<body>\n";
}else{
a += "<body background=\""+get_option('webback')+"\">\n";
}
if(document.forms.radioform.websitecontent.value != ""){
a += get_option('websitecontent')+"\n";
a += "</body>\n";
}else{
a += "</body>\n";
}
a += "</html>\n";
}
return a;
}
function callcontrols(lvl){
if(lvl == "Easy" || lvl == "Medium" || lvl=="Hard" || lvl == "Extreme"){
get_funcs(lvl);
}else{
document.getElementById("websitecontrols").innerHTML = "NO!";
}
}
function getwebsite(lvl){
if(lvl == "Easy" || lvl == "Medium" || lvl == "Hard" || lvl == "Extreme"){
callcontrols(lvl);
}
}
function get_radio_value()
{
for (var i=0; i < document.radioform.website.length; i++)
{
if (document.radioform.website[i].checked)
{
var rad_val = document.radioform.website[i].value;
getwebsite(rad_val);
}
}
lvl = rad_val;
alert(lvl);
}
</script>
<center>
<h1>So you want to build a website?</h1><br>
Easy - HTML Website<br>
Medium - HTML / JavaScript / CSS Website<br>
Hard - HTML / JavaScript / CSS / PHP Website<br>
Extreme - HTML / Encrypted HTML / JavaScript / Encrypted JavaScript / CSS / PHP Website<br><br>
You have four choices: <br>
<form name="radioform">
Step 1:<br>Choose an option<br><br>
Easy<input type="radio" onclick="get_radio_value()" name="website" value="Easy">Medium<input onclick="get_radio_value()" type="radio" name="website" value="Medium">Hard<input onclick="get_radio_value()" type="radio" name="website" value="Hard">Extreme<input onclick="get_radio_value()" type="radio" name="website" value="Extreme"><br><br>
<div id="websitecontrols"></div>
</form>
</center>
</body>
</html>
The functions you are looking at are checkchecks() and checkconts(). here's the functions: checkchecks(): Code: function checkchecks(){
for (i=0; i<document.forms.radioform.group1.length; i++){
if(i == 0 && document.forms.radioform.group1[i].checked == true){
ischecked = 1;
isgroup1 = 1;
isgroup2 = 0;
}else if(i == 1 && document.forms.radioform.group1[i].checked == true){
ischecked = 0;
isgroup1 = 0;
isgroup2 = 0;
}
}
for (i=0; i<document.forms.radioform.group2.length; i++){
if(i == 0 && document.forms.radioform.group2[i].checked == true){
ischecked = 1;
isgroup1 = 0;
isgroup2 = 1;
}else if(i == 1 && document.forms.radioform.group2[i].checked == true){
ischecked = 0;
isgroup1 = 0;
isgroup2 = 0;
}
}
if(isgroup1 == 1){
alert('Make SURE this option is what you want. If you select another option after entering data, it will erase your data...');
a='Your Website Title:<br><input name="webtitle" type="text" size="30"> <a href="javascript:answerq(\'webtitle\');">Help?</a><br>\n';
document.getElementById("websitep").innerHTML = a;
}else{
alert('Make SURE this option is what you want. If you select another option after entering data, it will erase your data...');
a='- Does not want website title<br>\n';
document.getElementById("websitep").innerHTML = a;
}
if(isgroup2 == 1){
alert('Make SURE this option is what you want. If you select another option after entering data, it will erase your data...');
b='Your Website background picture (if any):<br><input name="webback" type="file" size="30"> <a href="javascript:answerq(\'webback\');">Help?</a><br>\n';
document.getElementById("websiteq").innerHTML = b;
}else{
alert('Make SURE this option is what you want. If you select another option after entering data, it will erase your data...');
a='- Does not want website background image<br>\n';
document.getElementById("websiteq").innerHTML = b;
}
alert('isgroup1:'+isgroup1+'|'+'isgroup2:'+isgroup2+'');
}
checkconts(): Code: function checkconts(lvl){
if(document.forms.radioform.websitecontent == null || document.forms.radioform.websitecontent == null || document.forms.radioform.webtitle == null || document.forms.radioform.webback == null || document.forms.radioform.weblvl == null){
alert('Please select an option 1st...');
}else if(document.forms.radioform.websitecontent.value == null || document.forms.radioform.websitecontent.value == null || document.forms.radioform.webtitle.value == null || document.forms.radioform.webback.value == null || document.forms.radioform.weblvl.value == null){
alert('Please enter something into the box before continuing...');
}else{
a=document.forms.radioform.websitelvl.value = website(lvl);
document.getElementById('websitecontent').innerHTML = a;
}
}
Below is some code I wrote for my assignment that is due tonight; however, I can't seem to get any of the validation features to work. Can someone help me? I'm really new to javascript and struggling through it, but really want to figure this out. Here are the things I'm trying to do: -Validate each textbox to make sure they aren't empty -Validate one textbox to make sure that the text entered is numeric only -Validate the two email addresses for proper email format -Validate the two email addresses to make sure they are exactly alike -Show all of your errors at once, in one alert box, not individually. -Only check for matching emails if the first is valid. Here is my attempt at the code: [CODE] <script type="text/javascript"> <!-- Hide from older browsers var ProductInquiryForm; function Validate( ProductInquiryForm ) { formName = ProductInquiryForm; } function ValidEmail( EmailSearch ) { var txtEmail = EmailSearch.value; var intAtSign = txtEmail.indexOf("@"); var intLastDot = txtEmail.lastIndexOf("."); if( txtEmail == "" || txtEmail == null ) { return false; } if( intAtSign == -1 || intLastDot == -1 ) { return false; } if( intLastDot < intAtSign ) { return false; } if( intLastDot - intAtSign == 1 ) { return false; } if( intLastDot >= txtEmail.length-2 ) { return false; } else { return true; } } function ValidEmail( ConfirmEmailSearch ) { var txtEmail = ConfirmEmailSearch.value; var intAtSign = txtEmail.indexOf("@"); var intLastDot = txtEmail.lastIndexOf("."); if( txtEmail == "" || txtEmail == null ) { return false; } if( intAtSign == -1 || intLastDot == -1 ) { return false; } if( intLastDot < intAtSign ) { return false; } if( intLastDot - intAtSign == 1 ) { return false; } if( intLastDot >= txtEmail.length-2 ) { return false; } if (EmailSearch!= ConfirmEmailSearch) { return false; } else { return true; } } function ApprovedEmail ( ConfirmEmailSearch ) { if( HasText(EmailSearch) && ValidEmail(EmailSearch) && HasText(ConfirmEmailSearch) && ValidEmail(ConfirmEmailSearch)) { return true; } else { alert("A valid email must be entered and match in both fields!"); return false; } } function validateZIP(ZIPSearch) { if( ZIPSearch.value != 0||1||2||3||4||5||6||7||8||9) { alert("Please enter digits only for the ZIP code."); return false; } if (field.length!=5) { alert("Please enter no more than 5 digits for your ZIP code."); return false; } function HasText( ProductSearchDescription ) { if( ProductSearchDescription.value.length != 0 ) { return true; } else { alert("Please enter your product needs."); return false; } } // Stop hiding --> </script> <noscript> This site uses JavaScript code for validation and calculations based on user input. </noscript> <form name="form1" id="form1" method="post" action="intercept-searchform.asp" onsubmit="return Validate(this)"> <div> <label for="EmailSearch">Email Address:</label> <input name="EmailSearch" type="text" class="TextBox" id="EmailSearch" /> </div> <div> <label for="ConfirmEmailSearch">Confirm Email Address:</label> <input name="ConfirmEmailSearch" type="text" class="TextBox" id="ConfirmEmailSearch" /> </div> <div> <label for="ZIPSearch">ZIP Code</label> <input name="ZIPSearch" type="zip" class="zip" id="zip" /> </div> <div> <label for="ProductSearchDescription">Describe the product you are looking for.</label> <textarea name="ProductSearchDescription" id="ProductSearchDescription" class= "Comments" rows="6" cols="50"></textarea> </div> <br /> <div id="buttons"> <input name="Submit" type="Submit" value="Submit" /> <input name="Reset" type="Reset" /> </div> </form> [CODE] Thank you so much to anyone willing to help give me some guidance! Here's my HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>The Happy Hoppin' Hotel</title> <script src="happyhoppin.js" language="javascript" type="text/javascript"></script> </head> <body> <h1>The Happy Hoppin' Hotel Checkout Page</h1> <h2>Fill out the form below to calculate balance due</h2> <form> Guest ID Number: <input type="text" id="guestID" /> <br /> <br /> Room Type: <select id="roomType"> <option></option> <option>Parlor</option> <option>Single</option> <option>Double</option> </select> <br /> <br /> Length of Stay: <input type="text" id="stayLength" /> <br /> <br /> Number of Drinks: <input type="text" id="drinkNumber" /> <br /> <br /> Number of Towels: <input type="text" id="towelNumber" /> <br /> <br /> Number of Flushes: <input type="text" id="flushNumber" /> <br /> <br /> Bug Complaints?: <br /> <form name="bugComplaintRadio"> <input type="radio" name="bugComplaint" value="No" />No</label> <br /> <input type="radio" name="bugComplaint" value="Yes" />Yes</label> <br /> </form> <br /> Customer Comments: <br /> <textarea name="customerComment" cols="50" rows="5">Enter your comments here...</textarea> <br /> <br /> <input type="button" onclick="calculateBill()" value="Calculate Bill"> </form> </body> </html> Here's my Javascript: Code: const parlorPrice = 80;
const singlePrice = 100;
const doublePrice = 150;
const drinkPrice = 5;
const towelPrice = 3;
const flushPrice = 1;
var guestID = 0;
var roomPrice = 0;
var stayLength = 0;
var drinkNumber = 0;
var towelNumber = 0;
var flushNumber = 0;
var totalDue = 0;
var totalCharge = 0;
function calculateBill(){
validateForm();
//roomType//
if(roomType == "Parlor"){
roomPrice = parlorPrice;
}
if(roomType == "Single"){
roomPrice = singlePrice;
}
if(roomType == "Double"){
roomPrice = doublePrice;
}
//roomType//
//drinkCharge//
drinkCharge = drinkNumber * drinkPrice;
//drinkCharge//
//towelCharge//
towelCharge = towelNumber * towelPrice;
//towelCharge//
//flushCharge//
flushCharge = flushNumber * flushPrice;
//flushCharge//
//totalCharge//
totalCharge = roomPrice + drinkCharge + towelCharge + flushCharge;
//totalCharge//
//**bugDiscount**//
function getCheckedRadio() {
bugValue = "";
bugLength = document.bugComplaintRadio.bugComplaint.length;
var bugDiscount = 0;
for (x = 0; x < bugLength; x ++) {
if (document.bugComplaintRadio.bugComplaint[x].checked) {
bugValue = document.bugComplaintRadio.bugComplaint[x].value;
}
}
if (bugValue == "") {
alert("You did not choose whether you had a bug complaint or not");
}
if (bugValue = "No"){
bugDiscount = 0;
}
if (bugValue = "Yes"){
bugDiscount = 20;
}
}
//**bugDiscount**//
getCheckedRadio();
//totalDue//
totalDue = totalCharge + bugDiscount
//totalDue//
displayBill();
}
function validateForm(){
//guestID//
guestID = parseInt(document.getElementById("guestID").value);
if(isNaN(guestID)){
alert("Guest ID must be a number");
return;
}
if(guestID <= 0){
alert("Guest ID must be greater than zero");
return;
}
//guestID//
//roomType//
roomType = document.getElementById("roomType").value;
if(roomType == ""){
alert("Room type must be selected");
return;
}
//roomType//
//stayLength//
stayLength = parseInt(document.getElementById("stayLength").value);
if(isNaN(stayLength)){
alert("Length of stay must be a number");
return;
}
if(stayLength <= 0){
alert("Length of stay must be greater than zero");
return;
}
//stayLength//
//drinkNumber//
drinkNumber = parseInt(document.getElementById("drinkNumber").value);
if(isNaN(drinkNumber)){
alert("Number of drinks must be a number");
return;
}
if(drinkNumber <= 0){
alert("Number of drinks must be greater than zero");
return;
}
if(drinkNumber > 25){
alert("Number of drinks has exceeded 25");
return;
}
//drinkNumber//
//towelNumber//
towelNumber = parseInt(document.getElementById("towelNumber").value);
if(isNaN(towelNumber)){
alert("Number of towels must be a number");
return;
}
if(towelNumber <= 0){
alert("Number of towels must be greater than zero");
return;
}
//towelNumber//
//flushNumber//
flushNumber = parseInt(document.getElementById("flushNumber").value);
if(isNaN(flushNumber)){
alert("Number of flushes must be a number");
return;
}
if(flushNumber <= 0){
alert("Number of flushes must be greater than zero");
return;
}
//flushNumber//
//customerComment//
customerComment = document.getElementById("customerComment");
//customerComment//
}
function displayBill(){
var newPage = "<html><head><title>Billing Summary</title></head>";
newPage += "<body><h1>Happy Hoppin Hotel</h1>";
newPage += "<h2>Guest Billing Statement</h2>";
newPage += "Guest Identification: #" + guestID;
newPage += "<br />";
newPage += "Room Type: " + roomType;
newPage += "<br />";
newPage += "Room Charge: $" + roomPrice;
newPage += "<br />";
newPage += "Length of Stay: " + stayLength + " days";
newPage += "<br />";
newPage += "Drink Charge: $" + drinkCharge;
newPage += "<br />";
newPage += "Towel Charge: $" + towelCharge;
newPage += "<br />";
newPage += "Flushing Charge: $" + flushCharge;
newPage += "<br />";
newPage += "Total Charge: $" + totalCharge;
newPage += "<br />";
newPage += "Discount: $" + bugDiscount;
newPage += "<br />";
newPage += "Total Due: $" + totalDue;
newPage += "<br />";
newPage += "<h3>Come back and visit us again at the Happy Hoppin' Hotel!</h3>";
var z = window.open("","","width=400,height=500");
z.document.write(newPage);
z.document.close();
}
My question is, I've been spending countless hours trying to: 1. Make two radio buttons indicating "No" and "Yes", 2. Retrieve which selection the user has made, 3. Change the value of "bugDiscount" or the amount of money ($20 or $0) depending on which choice the user made; $0 for No & $20 for Yes. 4. Subtract the value of bugDiscount (0 or 20) from the totalCharge to get TotalDue I know I'm close, but I've tried any number of variations in my code and I still can't seem to get it right. Can anyone help? I am trying to build a page that has a form on it with three questions, each having two answers via radio button. When the user hits submit, depending on their answers to the three questions, it redirects them to a different page. This is all I have so far and am stuck, I dont know much JS. <script type="text/javascript"> function whereTo () { if ((Goods==true) && (Direct==true) && (SoleSource==true)) { window.location = "http://www.somesite/page1"; } if ((Goods==true) && (Direct==true) && (NetworkID==true) && (Competed==true)) { window.location = "http://www.somesite/page2"; } if ((Goods==true) && (Indirect==true) && (CostCenter==true) && (SoleSource==true)) { window.location = "http://www.somesite/page3"; } if ((Goods==true) && (Direct==true) && (NetworkID==true) && (SoleSource==true)) { window.location = "http://www.somesite/page4"; } if ((Goods==true) && (Indirect==true) && (CostCenter==true) && (Competed==true)) { window.location = "http://www.somesite/page5"; } if ((Goods==true) && (Direct==true) && (NetworkID==true) && (Competed==true)) { window.location = "http://www.somesite/page6"; } } </script> The form (it only has the inputs not the questions, i know its not setup properly, just wanted to show the inputs): <form> <input type="radio" id="Goods" name="good" /> Goods<br /><input type="radio" id="Services" name="Services" /> Services <input type="radio" id="Direct" name="good" /> Direct<br /><input type="radio" id="Indirect" name="Indirect" /> Indirect <input type="radio" id="CostCenter" name="CostCenter" /> Cost Center<br /><br /><input type="radio" id="NetworkID" name="NetworkID" /> Network ID <input type="radio" id="SoleSource" name="order" /> Sole Source<br /><input type="radio" id="Competed" name="order" /> Can Be Competed</td> <input alt="Submit" onclick=" return whereTo()" /> </form> |
|||||||