Boy or Girl

**TimFA** · 08-24-2007, 02:51 PM

Ok, I made a form to select between Boy or Girl and direct between pages, but I'm not sure how the JavaScript should go, I have nothing. Heres my form.

Code:

<form method="post" action="jscript/boygirl.js">
Boy <input name="boygirl" value="boy" type="radio"><br>
Girl <input name="boygirl" value="girl" type="radio"><br>
  <br>
  <input name="submit_boygirl" value="Continue"
 type="submit"></form>

All I need is a little direction, specifically I want to know how to make it compare what it gets submitted through the form. I'm not sure how you do that. I was trying to use getSelectedRadio, and getSelectedRadioValue. But I couldn't figure it out.

Thanks,
Tim

**jscheuer1** · 08-24-2007, 04:35 PM

The real value of something like this would be to redirect server side (where forms have their real power) on the basis of the submitted value with no javascript involved. However, here is an interesting example of something that could be done with javascript:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>BOY GIRL</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function getQval(n, m) {
/*my n=name, m=searchString(optional)*/
if(!arguments[0]||typeof n!='string')
return null;
var r=new RegExp('[?&;]'+n+'=([^&;#]*)'), m=arguments[1]?m:location.search;
return (m=r.exec(m))? unescape(m[1]) : null;
}
function showHide(v){
var c=v=='boy'? 'girl' : v=='girl'? 'boy' : 'boygirl';
document.write('<style type="text/css">.'+c+' {display:none;}<\/style>')
if(v)
document.title=v.toUpperCase();
}
showHide(getQval('boygirl'));
</script>
</head>
<body>
<form action="#">
<div class="boy girl">
Boy <input name="boygirl" value="boy" type="radio"><br>
Girl <input name="boygirl" value="girl" type="radio"><br>
  <br>
  <input value="Continue" type="submit">
</div>
</form>
<div class="boygirl">
<div class="boy">It's a Boy!</div>
<div class="girl">It's a Girl!</div>
</div>
</body>
</html>

**TimFA** · 08-24-2007, 06:32 PM

Originally Posted by jscheuer1

The real value of something like this would be to redirect server side (where forms have their real power) on the basis of the submitted value with no javascript involved. However, here is an interesting example of something that could be done with javascript:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>BOY GIRL</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function getQval(n, m) {
/*my n=name, m=searchString(optional)*/
if(!arguments[0]||typeof n!='string')
return null;
var r=new RegExp('[?&;]'+n+'=([^&;#]*)'), m=arguments[1]?m:location.search;
return (m=r.exec(m))? unescape(m[1]) : null;
}
function showHide(v){
var c=v=='boy'? 'girl' : v=='girl'? 'boy' : 'boygirl';
document.write('<style type="text/css">.'+c+' {display:none;}<\/style>')
if(v)
document.title=v.toUpperCase();
}
showHide(getQval('boygirl'));
</script>
</head>
<body>
<form action="#">
<div class="boy girl">
Boy <input name="boygirl" value="boy" type="radio"><br>
Girl <input name="boygirl" value="girl" type="radio"><br>
  <br>
  <input value="Continue" type="submit">
</div>
</form>
<div class="boygirl">
<div class="boy">It's a Boy!</div>
<div class="girl">It's a Girl!</div>
</div>
</body>
</html>

Interesting. So the content is there all along, JavaScript just reveals it? How should I do what I wanted?

Code:

Boy <input onclick="parent.location='boys.html';"
 name="boyorgirl" value="boy1" type="radio"><br>
Girl <input onclick="parent.location='girls.html';"
 name="boyorgirl" value="girl1" type="radio">

I made something up, it seems to work.

Thread: Boy or Girl

Thread Tools

Search Thread

Boy or Girl

Bookmarks

Bookmarks

Posting Permissions