Forum Moderators: open

Message Too Old, No Replies

Radio Button not working

Javascript solution or simple HTML issue?

         

HighPriestess

11:02 am on Apr 13, 2008 (gmt 0)

10+ Year Member



Hi

I have a form (code below) that uses a javascript to perform its main function. What I want to do is add Google Search to the form with a radio button but I can't get it to work. I'm not sure if this is simply a HTML issue or whether I need another javascript. Any help would really be appreciated. Thanks!

<!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" />
<title>My Form</title>
</head>
<body>
<script>
function convert()
{
var first = document.getElementsByName( "first")[0],
second = document.getElementsByName( "second")[0];
first.value = first.value.replace( /\s/g, "");
second.value = "Nice "+ first.value +" color";
var response = true;
switch(first.value)
{
case 'blue':
break;
case 'green':
break;
case 'red':
break;
case 'purple':
second.value = "Horrible "+ first.value +" color!";
break;
default:
response = confirm(second.value + "?\n\nAre you serious?");
break;
}
if (response == false)
{
return false;
}
}
</script>
<form name= "run" onsubmit='return convert();'>
<input name='first' type='text' /> <input name='second' type='hidden' />
<input type='submit' value="Run" />
<br /><input id=all type=radio name=meta value="" checked><label for=all> My Form </label>
<input id=google type=radio method=get action="http://www.google.com/search">
<label for=google>
Google Search </label>
</form>
</body>
</html>

d40sithui

2:43 pm on Apr 15, 2008 (gmt 0)

10+ Year Member



I edited your code a bit. Try this

<!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" />
<title>My Form</title>
</head>
<body>
<script>
function convert()
{
var first = document.getElementsByName( "first")[0],
second = document.getElementsByName( "second")[0];
first.value = first.value.replace( /\s/g, "");
second.value = "Nice "+ first.value +" color";
var response = true;
switch(first.value)
{
case 'blue':
break;
case 'green':
break;
case 'red':
break;
case 'purple':
second.value = "Horrible "+ first.value +" color!";
break;
default:
response = confirm(second.value + "?\n\nAre you serious?");
break;
}
if (response == false)
{
return false;
}
}

function changeAction(radioValue, thisform){
// default value
thisform.action = "mySite.php";
if (radioValue == 'google')
{
thisform.action = "http://google.com/search";
}
return;
}
</script>
<form name="run" onsubmit="convert();">
<input name='first' type='text' /> <input name='second' type='hidden' />
<input type='submit' value="Run" />
<br />
<input type="radio" name="searchType" value="mySite" checked onclick="changeAction('mySite', this.form);" ><label for="all"> My Form </label>
<input type="radio" name="searchType" value="google" onclick="changeAction('google', this.form);">
<label for="google">
Google Search </label>
</form>
</body>
</html>

HighPriestess

6:54 pm on Apr 16, 2008 (gmt 0)

10+ Year Member



Hey that's great! It works! Is there a way to stop the alert when Google Search is checked though?

Thanks!

d40sithui

3:39 pm on Apr 17, 2008 (gmt 0)

10+ Year Member



Yeah just add a variable that tracks if google was checked.

<!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" />
<title>My Form</title>
</head>
<body>
<script>

//if google is checked do not run convert()
var googleChecked = false;

function convert() {
if(googleChecked==false){
var first = document.getElementsByName( "first")[0],
second = document.getElementsByName( "second")[0];
first.value = first.value.replace( /\s/g, "");
second.value = "Nice "+ first.value +" color";
var response = true;
switch(first.value) {
case 'blue':
break;
case 'green':
break;
case 'red':
break;
case 'purple':
second.value = "Horrible "+ first.value +" color!";
break;
default:
response = confirm(second.value + "?\n\nAre you serious?");
break;
}
if (response == false) {
return false;
}
}
}

function changeAction(radioValue, thisform){
// default value
googleChecked = false;
thisform.action = "mySite.php";
if (radioValue == 'google'){
thisform.action = "http://google.com/search";
googleChecked = true;
}
return;
}
</script>
<form name="run" onsubmit="convert();">
<input name='first' type='text' /> <input name='second' type='hidden' />
<input type='submit' value="Run" />
<br />
<input type="radio" name="searchType" value="mySite" checked onclick="changeAction('mySite', this.form);" ><label for="all"> My Form </label>
<input type="radio" name="searchType" value="google" onclick="changeAction('google', this.form);">
<label for="google">
Google Search </label>
</form>
</body>
</html>