/    Sign up×
Community /Pin to ProfileBookmark

Need help with Javascript

Copy linkTweet thisAlerts:
Jul 09.2010

I create 2 radio buttons. When the user clicks on the 1st button, the test_interface function should be called. When the user clicks on the 2nd button, the test_interface function should not be call. I have a problem with my code,please help me. Thank you very much. if I click on the 2nd button first, then click on the 1st button. It works correctly. Once, the 1st button is selected, then I change to select the 2nd button. Some how the test_interface function is still being called for the 2nd button. How do I fix it to make the test_interface function is clear when the 2nd button is clicked?

<input type=”radio” name=”group1″ id=”button1″ onclick=”javascript:onRadioClick();”/>Button 1
<input type=”radio” name=”group1″ id=”button2″ onclick=”javascript:onRadioClick();” checked/>Button 2

function onRadioClick()
{

if(document.getElementById(“button1”).checked)
{

test_interface();

}

else
{

return null;
}
}

function test_interface ()
{

}

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@tirnaJul 09.2010 — maybe use this as a guide,

[code=php]
<!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">
<head>
<title></title>
<script type="text/javascript">
<!--

function onRadioClick() {
if(document.getElementById("button1").checked) {
test_interface();
}
}

function test_interface() {

alert("inside test_interface");

}

//-->
</script>

</head>
<body>
<div>

<input type="radio" name="group1" id="button1" onclick="onRadioClick();" />Button 1
<input type="radio" name="group1" id="button2" onclick="onRadioClick();" checked="checked" />Button 2
</div>

</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@Sterling_IsfineJul 09.2010 — Cannot replicate the problem (unsurprisingly).

What is your browser and platform?

Never use [B]javascript:[/B] in an event handler.

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p>
<input type="radio" name="group1" id="button1" onclick="onRadioClick();">Button 1
<input type="radio" name="group1" id="button2" onclick="onRadioClick();" checked='checked'>Button 2

<script type='text/javascript'>
function onRadioClick()
{
if(document.getElementById("button1").checked)
{
test_interface();
}
else
{
return null;
}
}

function test_interface ()
{
document.title = new Date().getTime();
}
</script>
</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@TinaLeauthorJul 09.2010 — I used Internet Explorer and Window XP
Copy linkTweet thisAlerts:
@tirnaJul 09.2010 — the suggested code in the previous posts should work unless there is something unusual going on in your pc.
Copy linkTweet thisAlerts:
@WesterlyJul 09.2010 — [CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function test_interface(nState){

alert('Radio Button 1 is ' + nState);
}

function init(){

document.getElementsByName('group1')[0].onclick = function()
{
test_interface(this.checked);
}

}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<style type="text/css">

body {background-color: #fffacd; margin-top: 60px;}
form {background-color: #eee8aa; width: 500px; margin-left: auto; margin-right: auto;}
fieldset {width: 98%; padding-right: 0px; padding-left: 6px; padding-bottom: 4px;
border: 1px solid black;}
legend {font-family: arial; font-size: 14pt; padding-left: 5px; padding-right: 5px; margin-bottom: 5px;}
label {font-family: tahoma; font-size: 10pt; margin-right: 10px;}
.submitBtn {width: 75px; background-color: #fff8dc; border: solid 1px #000000;
font-family: arial; font-size: 10pt; font-weight: bold;
cursor: pointer; display: block; margin-left: auto;
margin-right: auto; margin-top: 8px; padding: 0px;}

</style>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>Form</legend>

<label><input type="radio" name="group1">Button 1</label>
<label><input type="radio" name="group1" checked>Button 2</label>

<input type="submit" name="submit" value="Submit" class="submitBtn">
</fieldset>
</form>
</body>
</html>
[/CODE]
×

Success!

Help @TinaLe 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 6.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...