/    Sign up×
Community /Pin to ProfileBookmark

Javascript ???

Copy linkTweet thisAlerts:
Dec 23.2004

I was wondering if the following is possible. 5 Radio buttons, when the red button is selected it says you selected red, instead of just displaying Red, if the green button is selected, you selected green, instead of just displaying Green and so on. Can this be done with javascript onclick??

<form name=”form1″ method=”post” action=””>
<input type=”radio” name=”Red” value=”radiobutton”>Red<br>
<input type=”radio” name=”Blue” value=”radiobutton”>Blue<br>
<input type=”radio” name=”Green” value=”radiobutton”>Green<br>
<input type=”radio” name=”Yellow” value=”radiobutton”>Yellow<br>
<input type=”radio” name=”Blue” value=”radiobutton”>Blue
</form>

Thanks,

Jeff

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@JonaDec 23.2004 — <i>
</i>&lt;script type="text/javascript"&gt;&lt;!--
function updateField(o,id){
document.getElementById(id).firstChild.data = "You selected "+o.name;
}
//--&gt;&lt;/script&gt;


<i>
</i>&lt;input type="radio" name="green" onclick="updateField(this,'colorBox')"&gt;


<i>
</i>&lt;div id="colorBox"&gt;&lt;/div&gt;
Copy linkTweet thisAlerts:
@CharlesDec 23.2004 — [font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<meta name="Content-Style-Type" content="text/css">

<title>Example</title>

<style type="text/css">

<!--

fieldset {width:10em; padding:1em}

label {display:block; text-align:left}

input.highlight {background-color:#ff0}

button {display:block; margin:auto}

-->

</style>

<script type="text/javascript">

<!--

onload = function () {

var f, i = 0;

while (f = document.forms[i++]) {

var e, j = 0;

while (e = f.elements[j++]) {

if (e.type == 'radio')e.onclick = function () {

this.form.getElementsByTagName ('FIELDSET')[0].style.backgroundColor = this.value;

alert (this.nextSibling.data);

}

}

}

}

// -->

</script>

</head>

<body>

<form action="some-script.pl">

<fieldset>

<legend>Background Color</legend>

<label><input type="radio" name="color" value="#f00">Red</label>

<label><input type="radio" name="color" value="#00f">Blue</label>

<label><input type="radio" name="color" value="#0f0">Green</label>

<label><input type="radio" name="color" value="#ff0">Yellow</label>

<label><input type="radio" name="color" value="#0ff">Teal</label>

<label><input type="radio" name="color" value="#f0f">Purple</label>

</form>

<button type="submit">Submit</button>

</fieldset>

</form>

</body>

</html>[/font]
Copy linkTweet thisAlerts:
@Warren86Dec 23.2004 — <HTML>

<Head>

<Script Language=JavaScript>

function update(isVal){

isMsg = "You have chosen "+isVal.toUpperCase()
document.getElementById('isColor').style.color = isVal;
document.getElementById('isColor').innerHTML = isMsg
}

</Script>

</Head>

<Body>

<Div id='isColor' style='font-size:14pt;border:solid black 1px;text-align:center;padding:3px;width:225px;height:16pt;background-color:lightgrey'></Div>

<form name="form1" method="post" action="">

<input type="radio" name="colors" value="red" onclick="update(this.value)">Red<br>

<input type="radio" name="colors" value="blue" onclick="update(this.value)">Blue<br>

<input type="radio" name="colors" value="green" onclick="update(this.value)">Green<br>

<input type="radio" name="colors" value="yellow" onclick="update(this.value)">Yellow<br>

</form>

</Body>

</HTML>
×

Success!

Help @jazzyj99 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...