homepage Welcome to WebmasterWorld Guest from 54.161.200.144
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Radio Field Validate Problem
Radio Field Validate Problem
typomaniac




msg:4343873
 5:32 am on Jul 26, 2011 (gmt 0)

After searching this forum and some others I see I'm not the only one who has had the problem of validating radio buttons. I saw many answers but couldn't get any to work. The script I'm using displays a small image if there is an error. Here is the way the code works:
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Preload images
var empty = new Image(); empty.src = "fieldempty.gif";
var haveerrors = 0;
function showImage(imagename, imageurl, errors) {
document[imagename].src = imageurl;
if (!haveerrors && errors) haveerrors = errors;
}
function validateForm(f) {
haveerrors = 0;

(f.trms.checked != 1) // validate first name length
? showImage("termserror", "fieldempty.gif", true) // no semi-colon after this line!
: showImage("termserror", "blankimage.gif", false); // true = errors, false = no errors



return (!haveerrors);
}
// End -->
</script>


That is the part that goes in the <head> section. In the body tag it is like
<form method="post"action="somefile.pl"name="myform" onSubmit="return validateForm(this)">

In the form an image is inserted where the error is to show up as follows:
<img name=termserror src="blankimage.gif" width=350 height=10 border=0>

If no error the blank, or empty image is all that is there but if an error it is replaced with the image with the error on it.
I've been sitting here for two days trying to get this to somehow cooporate with radio buttons to no avail. I put up a demo page to show what I mean by the images(don't pay attention to the one that shows in the email field when you click on terms--that was part of figuring something out and will be removed when the time comes. The radio buttons are on a different page. [praisenpray.com ]

I've tied for loops into figure 4's the past couple days on this one and would like to get them untangled. Thanx. Dave

 

rocknbil




msg:4344126
 4:18 pm on Jul 26, 2011 (gmt 0)

First - that is a checkbox. Radio buttons are generally an array (list) of items with the same name:

<input type="radio" name="test" value="1" checked> 1
<input type="radio" name="test" value="2"> 2

formname.test[0] and formname.test[1] respectively.

Second, what happens if you do this?

alert(f.trms.checked);

I'll tell you - you get "false" unchecked, "true" checked. It will never be 1. But you don't even have to test for == true or == false. Just do

(! f.trms.checked)
? showImage("termserror", "fieldempty.gif", true)
: showImage("termserror", "blankimage.gif", false);

Equivalently (that ternary is a little confusing: )

if (! f.trms.checked) { alert('error'); }
else { alert('do whatever'); }

and inversely,

if (f.trms.checked) { alert('do whatever'); }
else { alert('error'); }

All three of those are identical, just showing how it relates to the ternary.

typomaniac




msg:4345704
 10:25 am on Jul 30, 2011 (gmt 0)

First, please accept my apology for giving the wrong link. It was one of them days and when I realized what happened I couldn't change it due to net connection problems this past week.

Anyway, here is a link for the first page I was dealing with(everything is working now. First link is:
[praisenpray.com ]
and next is
[praisenpray.com ]
and lastly
[praisenpray.com ]

I'm using these two forms as examples because of what they do....for instance, in the prayer request form it is configed to require an email address if join online prayer team is checked.

In the other form the neat thing(or so I thought) was if you opt for either the first or third radio choice it also requires and email address

In the guestbook form, while email address is not initially required it does require that an address entered is valid.

Having somewhat of a problem in the word/text counter as the numbers never seem to be right at the start.

I want to thank you much Mr.rocknbil(yes, I'm using Mr---much respect for you). Seems no matter where I post in this forum you have the answer I need and always quick to reply. If everyone in the world were like you it would be much better. If I knew one percent of the things you have probably forgotten I would feel like a pro. Thanx

rocknbil




msg:4346254
 4:39 pm on Aug 1, 2011 (gmt 0)

Right, see first post about radio buttons. Here's a simplified example from which you can gather what needs to be done.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Radios</title>
<script type="text/javascript">
function validateRadios (formObject) {
// Array of radios
var atLeastOne = false;
for (j=0;j<formObject.test.length;j++) {
if (formObject.test[j].checked) {
atLeastOne=true;
alert(formObject.test[j].id + ' is checked.');
}
}
if (! atLeastOne) {
alert('Make at least one selection.');
return false;
}
// Change to return true if no errors found.
return false;
}
</script>
</head>
<body>
<form method="post" action="whatever" onsubmit="return validateRadios(this);">
<p><input type="radio" name="test" id="test-1" value="1"> <label for="test-1">One</label></p>
<!-- Proper usage: at least one MUST load checked.
Most clients say no to this, but it's the way radios work
<input type="radio" name="test" id="test-1" value="1" checked>
or for XHTML
<input type="radio" name="test" id="test-1" value="1" checked="checked"/>
-->
<p><input type="radio" name="test" id="test-2" value="2"> <label for="test-2">Two</label></p>
<p><input type="radio" name="test" id="test-3" value="3"> <label for="test-3">Three</label></p>
<p><input type="submit" value="test"></p>
</form>
</body>
</html>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved