HTML: Radio Button
In the below code, user have to choose if he has car or not with radio button.
if "yes" radio button is set "car name" input field is enabled,
if "no" radio button is set "car name" input field is disabled
There is a "test" button, when it is clicked "yes" radio button is set, but the function associated with "yes" radio button is not triggered.
can anyone please explain why the function associated with "yes" radio button is not triggered when "test" button is clicked?
Is there any way to achieve this? i,e when "test" button is clicked "yes" radio button should be set and this should trigger function enable_carname.
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<form>
please choose:
<div>have car:</div>
<input type="radio" name="car" id="no" value="no" onchange="disable_carname()" > no<br>
<input type="radio" name="car" id="yes" value="yes" onchange="enable_carname()"checked>yes<br>
carname:<input type="text" id="carname">
</form>
<button onclick="set_yes_radio()">test</button>
</body>
<script>
function disable_carname()
{
document.getElementById("carname").disabled=true;
}
function enable_carname()
{
document.getElementById("carname").disabled=false;
}
function set_yes_radio()
{
document.getElementById("yes").checked=true;
}
</script>
</html>Thank you.
html radio-button
asked Nov 25 '18 at 17:20
Manoj TMManoj TM
32
add a comment |
In the below code, user have to choose if he has car or not with radio button.
if "yes" radio button is set "car name" input field is enabled,
if "no" radio button is set "car name" input field is disabled
There is a "test" button, when it is clicked "yes" radio button is set, but the function associated with "yes" radio button is not triggered.
can anyone please explain why the function associated with "yes" radio button is not triggered when "test" button is clicked?
Is there any way to achieve this? i,e when "test" button is clicked "yes" radio button should be set and this should trigger function enable_carname.
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<form>
please choose:
<div>have car:</div>
<input type="radio" name="car" id="no" value="no" onchange="disable_carname()" > no<br>
<input type="radio" name="car" id="yes" value="yes" onchange="enable_carname()"checked>yes<br>
carname:<input type="text" id="carname">
</form>
<button onclick="set_yes_radio()">test</button>
</body>
<script>
function disable_carname()
{
document.getElementById("carname").disabled=true;
}
function enable_carname()
{
document.getElementById("carname").disabled=false;
}
function set_yes_radio()
{
document.getElementById("yes").checked=true;
}
</script>
</html>Thank you.
html radio-button
asked Nov 25 '18 at 17:20
Manoj TMManoj TM
32
1
Looks like it already works to me.
– Robert Harvey♦
Nov 25 '18 at 17:22
Oh, you mean enable carname when test is clicked. You need some additional Javascript on the button to do that; theonchangeonly works when the user clicks on the radio button.
– Robert Harvey♦
Nov 25 '18 at 17:23
add a comment |
In the below code, user have to choose if he has car or not with radio button.
if "yes" radio button is set "car name" input field is enabled,
if "no" radio button is set "car name" input field is disabled
There is a "test" button, when it is clicked "yes" radio button is set, but the function associated with "yes" radio button is not triggered.
can anyone please explain why the function associated with "yes" radio button is not triggered when "test" button is clicked?
Is there any way to achieve this? i,e when "test" button is clicked "yes" radio button should be set and this should trigger function enable_carname.
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<form>
please choose:
<div>have car:</div>
<input type="radio" name="car" id="no" value="no" onchange="disable_carname()" > no<br>
<input type="radio" name="car" id="yes" value="yes" onchange="enable_carname()"checked>yes<br>
carname:<input type="text" id="carname">
</form>
<button onclick="set_yes_radio()">test</button>
</body>
<script>
function disable_carname()
{
document.getElementById("carname").disabled=true;
}
function enable_carname()
{
document.getElementById("carname").disabled=false;
}
function set_yes_radio()
{
document.getElementById("yes").checked=true;
}
</script>
</html>Thank you.
html radio-button
asked Nov 25 '18 at 17:20
Manoj TMManoj TM
32
In the below code, user have to choose if he has car or not with radio button.
if "yes" radio button is set "car name" input field is enabled,
if "no" radio button is set "car name" input field is disabled
There is a "test" button, when it is clicked "yes" radio button is set, but the function associated with "yes" radio button is not triggered.
can anyone please explain why the function associated with "yes" radio button is not triggered when "test" button is clicked?
Is there any way to achieve this? i,e when "test" button is clicked "yes" radio button should be set and this should trigger function enable_carname.
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<form>
please choose:
<div>have car:</div>
<input type="radio" name="car" id="no" value="no" onchange="disable_carname()" > no<br>
<input type="radio" name="car" id="yes" value="yes" onchange="enable_carname()"checked>yes<br>
carname:<input type="text" id="carname">
</form>
<button onclick="set_yes_radio()">test</button>
</body>
<script>
function disable_carname()
{
document.getElementById("carname").disabled=true;
}
function enable_carname()
{
document.getElementById("carname").disabled=false;
}
function set_yes_radio()
{
document.getElementById("yes").checked=true;
}
</script>
</html>Thank you.
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<form>
please choose:
<div>have car:</div>
<input type="radio" name="car" id="no" value="no" onchange="disable_carname()" > no<br>
<input type="radio" name="car" id="yes" value="yes" onchange="enable_carname()"checked>yes<br>
carname:<input type="text" id="carname">
</form>
<button onclick="set_yes_radio()">test</button>
</body>
<script>
function disable_carname()
{
document.getElementById("carname").disabled=true;
}
function enable_carname()
{
document.getElementById("carname").disabled=false;
}
function set_yes_radio()
{
document.getElementById("yes").checked=true;
}
</script>
</html><!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<form>
please choose:
<div>have car:</div>
<input type="radio" name="car" id="no" value="no" onchange="disable_carname()" > no<br>
<input type="radio" name="car" id="yes" value="yes" onchange="enable_carname()"checked>yes<br>
carname:<input type="text" id="carname">
</form>
<button onclick="set_yes_radio()">test</button>
</body>
<script>
function disable_carname()
{
document.getElementById("carname").disabled=true;
}
function enable_carname()
{
document.getElementById("carname").disabled=false;
}
function set_yes_radio()
{
document.getElementById("yes").checked=true;
}
</script>
</html>html radio-button
html radio-button
asked Nov 25 '18 at 17:20
Manoj TMManoj TM
32
asked Nov 25 '18 at 17:20
Manoj TMManoj TM
32
edited Nov 25 '18 at 17:27
Manoj TM
asked Nov 25 '18 at 17:20
Manoj TMManoj TM
32
asked Nov 25 '18 at 17:20
Manoj TMManoj TM
32
asked Nov 25 '18 at 17:20
Manoj TMManoj TM
32
32
1
Looks like it already works to me.
– Robert Harvey♦
Nov 25 '18 at 17:22
Oh, you mean enable carname when test is clicked. You need some additional Javascript on the button to do that; theonchangeonly works when the user clicks on the radio button.
– Robert Harvey♦
Nov 25 '18 at 17:23
add a comment |
1
Looks like it already works to me.
– Robert Harvey♦
Nov 25 '18 at 17:22
Oh, you mean enable carname when test is clicked. You need some additional Javascript on the button to do that; theonchangeonly works when the user clicks on the radio button.
– Robert Harvey♦
Nov 25 '18 at 17:23
1
1
Looks like it already works to me.
– Robert Harvey♦
Nov 25 '18 at 17:22
Looks like it already works to me.
– Robert Harvey♦
Nov 25 '18 at 17:22
Oh, you mean enable carname when test is clicked. You need some additional Javascript on the button to do that; the
onchange only works when the user clicks on the radio button.– Robert Harvey♦
Nov 25 '18 at 17:23
Oh, you mean enable carname when test is clicked. You need some additional Javascript on the button to do that; the
onchange only works when the user clicks on the radio button.– Robert Harvey♦
Nov 25 '18 at 17:23
add a comment |
3 Answers
3
active
oldest
votes
can anyone please explain why the function associated with "yes" radio button is not triggered when "test" button is clicked?
It's because you're not invoking enable_carname() function, that is - you're not actually changing the 'yes' button to checked. According to your setup, the solution would be:
function disable_carname() {
document.getElementById("carname").disabled=true;
}
function enable_carname() {
document.getElementById("carname").disabled=false;
}
function set_yes_radio() {
document.getElementById("yes").checked=true;
enable_carname(); //invoking the function which will actually enable 'carname' field
}
But, I'd argue that the whole approach you've tried here is quite confusing and it can only complicate your life. My solution is simply a patch to the proposed solution.
Maybe try to think about some default state. Let's say that 'no' button is checked by default and carname field is disabled. Instead of test button, that can be submit. I imagine that this is a part of a survey or something similar. If you'd like to try that different approach, give it a try and let me know if you need more help.
Btw, check how to set attribute to DOM element instead of hard-coding it in HTML. Of course, you can also remove it in similar fashion.
Side note: the text carname should be a <label> for the 'carname' input filed. MDN: label
answered Nov 25 '18 at 18:08
Nemanja GlumacNemanja Glumac
519213
add a comment |
<!DOCTYPE html>
<h2>Radio Buttons</h2>
<form>
please choose:
<div>have car:</div>
<input type="radio" name="car" id="no" value="no" onclick="disable_carname()"> no<br>
<input type="radio" name="car" id="yes" value="yes" onclick="enable_carname()" checked>yes<br>
carname:<input type="text" id="carname">
</form>
<button onclick="set_yes_radio()">test</button>
<script>
function disable_carname() {
document.getElementById("carname").disabled = true;
}
function enable_carname() {
document.getElementById("carname").disabled = false;
}
function set_yes_radio() {
document.getElementById("yes").checked = true;
}
</script>
answered Nov 25 '18 at 17:25
Mhd. Osama JindiaMhd. Osama Jindia
64
add a comment |
set onclick as an attribute on your inout like this
<input type="radio" name="car" id="no" value="no" onclick="disable_carname()" > no<br>
answered Nov 25 '18 at 17:29
SaadSaad
85
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53469956%2fhtml-radio-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
can anyone please explain why the function associated with "yes" radio button is not triggered when "test" button is clicked?
It's because you're not invoking enable_carname() function, that is - you're not actually changing the 'yes' button to checked. According to your setup, the solution would be:
function disable_carname() {
document.getElementById("carname").disabled=true;
}
function enable_carname() {
document.getElementById("carname").disabled=false;
}
function set_yes_radio() {
document.getElementById("yes").checked=true;
enable_carname(); //invoking the function which will actually enable 'carname' field
}
But, I'd argue that the whole approach you've tried here is quite confusing and it can only complicate your life. My solution is simply a patch to the proposed solution.
Maybe try to think about some default state. Let's say that 'no' button is checked by default and carname field is disabled. Instead of test button, that can be submit. I imagine that this is a part of a survey or something similar. If you'd like to try that different approach, give it a try and let me know if you need more help.
Btw, check how to set attribute to DOM element instead of hard-coding it in HTML. Of course, you can also remove it in similar fashion.
Side note: the text carname should be a <label> for the 'carname' input filed. MDN: label
answered Nov 25 '18 at 18:08
Nemanja GlumacNemanja Glumac
519213
add a comment |
can anyone please explain why the function associated with "yes" radio button is not triggered when "test" button is clicked?
It's because you're not invoking enable_carname() function, that is - you're not actually changing the 'yes' button to checked. According to your setup, the solution would be:
function disable_carname() {
document.getElementById("carname").disabled=true;
}
function enable_carname() {
document.getElementById("carname").disabled=false;
}
function set_yes_radio() {
document.getElementById("yes").checked=true;
enable_carname(); //invoking the function which will actually enable 'carname' field
}
But, I'd argue that the whole approach you've tried here is quite confusing and it can only complicate your life. My solution is simply a patch to the proposed solution.
Maybe try to think about some default state. Let's say that 'no' button is checked by default and carname field is disabled. Instead of test button, that can be submit. I imagine that this is a part of a survey or something similar. If you'd like to try that different approach, give it a try and let me know if you need more help.
Btw, check how to set attribute to DOM element instead of hard-coding it in HTML. Of course, you can also remove it in similar fashion.
Side note: the text carname should be a <label> for the 'carname' input filed. MDN: label
answered Nov 25 '18 at 18:08
Nemanja GlumacNemanja Glumac
519213
add a comment |
can anyone please explain why the function associated with "yes" radio button is not triggered when "test" button is clicked?
It's because you're not invoking enable_carname() function, that is - you're not actually changing the 'yes' button to checked. According to your setup, the solution would be:
function disable_carname() {
document.getElementById("carname").disabled=true;
}
function enable_carname() {
document.getElementById("carname").disabled=false;
}
function set_yes_radio() {
document.getElementById("yes").checked=true;
enable_carname(); //invoking the function which will actually enable 'carname' field
}
But, I'd argue that the whole approach you've tried here is quite confusing and it can only complicate your life. My solution is simply a patch to the proposed solution.
Maybe try to think about some default state. Let's say that 'no' button is checked by default and carname field is disabled. Instead of test button, that can be submit. I imagine that this is a part of a survey or something similar. If you'd like to try that different approach, give it a try and let me know if you need more help.
Btw, check how to set attribute to DOM element instead of hard-coding it in HTML. Of course, you can also remove it in similar fashion.
Side note: the text carname should be a <label> for the 'carname' input filed. MDN: label
answered Nov 25 '18 at 18:08
Nemanja GlumacNemanja Glumac
519213
can anyone please explain why the function associated with "yes" radio button is not triggered when "test" button is clicked?
It's because you're not invoking enable_carname() function, that is - you're not actually changing the 'yes' button to checked. According to your setup, the solution would be:
function disable_carname() {
document.getElementById("carname").disabled=true;
}
function enable_carname() {
document.getElementById("carname").disabled=false;
}
function set_yes_radio() {
document.getElementById("yes").checked=true;
enable_carname(); //invoking the function which will actually enable 'carname' field
}
But, I'd argue that the whole approach you've tried here is quite confusing and it can only complicate your life. My solution is simply a patch to the proposed solution.
Maybe try to think about some default state. Let's say that 'no' button is checked by default and carname field is disabled. Instead of test button, that can be submit. I imagine that this is a part of a survey or something similar. If you'd like to try that different approach, give it a try and let me know if you need more help.
Btw, check how to set attribute to DOM element instead of hard-coding it in HTML. Of course, you can also remove it in similar fashion.
Side note: the text carname should be a <label> for the 'carname' input filed. MDN: label
answered Nov 25 '18 at 18:08
Nemanja GlumacNemanja Glumac
519213
answered Nov 25 '18 at 18:08
Nemanja GlumacNemanja Glumac
519213
answered Nov 25 '18 at 18:08
Nemanja GlumacNemanja Glumac
519213
answered Nov 25 '18 at 18:08
Nemanja GlumacNemanja Glumac
519213
519213
add a comment |
add a comment |
<!DOCTYPE html>
<h2>Radio Buttons</h2>
<form>
please choose:
<div>have car:</div>
<input type="radio" name="car" id="no" value="no" onclick="disable_carname()"> no<br>
<input type="radio" name="car" id="yes" value="yes" onclick="enable_carname()" checked>yes<br>
carname:<input type="text" id="carname">
</form>
<button onclick="set_yes_radio()">test</button>
<script>
function disable_carname() {
document.getElementById("carname").disabled = true;
}
function enable_carname() {
document.getElementById("carname").disabled = false;
}
function set_yes_radio() {
document.getElementById("yes").checked = true;
}
</script>
answered Nov 25 '18 at 17:25
Mhd. Osama JindiaMhd. Osama Jindia
64
add a comment |
<!DOCTYPE html>
<h2>Radio Buttons</h2>
<form>
please choose:
<div>have car:</div>
<input type="radio" name="car" id="no" value="no" onclick="disable_carname()"> no<br>
<input type="radio" name="car" id="yes" value="yes" onclick="enable_carname()" checked>yes<br>
carname:<input type="text" id="carname">
</form>
<button onclick="set_yes_radio()">test</button>
<script>
function disable_carname() {
document.getElementById("carname").disabled = true;
}
function enable_carname() {
document.getElementById("carname").disabled = false;
}
function set_yes_radio() {
document.getElementById("yes").checked = true;
}
</script>
answered Nov 25 '18 at 17:25
Mhd. Osama JindiaMhd. Osama Jindia
64
add a comment |
<!DOCTYPE html>
<h2>Radio Buttons</h2>
<form>
please choose:
<div>have car:</div>
<input type="radio" name="car" id="no" value="no" onclick="disable_carname()"> no<br>
<input type="radio" name="car" id="yes" value="yes" onclick="enable_carname()" checked>yes<br>
carname:<input type="text" id="carname">
</form>
<button onclick="set_yes_radio()">test</button>
<script>
function disable_carname() {
document.getElementById("carname").disabled = true;
}
function enable_carname() {
document.getElementById("carname").disabled = false;
}
function set_yes_radio() {
document.getElementById("yes").checked = true;
}
</script>
answered Nov 25 '18 at 17:25
Mhd. Osama JindiaMhd. Osama Jindia
64
<!DOCTYPE html>
<h2>Radio Buttons</h2>
<form>
please choose:
<div>have car:</div>
<input type="radio" name="car" id="no" value="no" onclick="disable_carname()"> no<br>
<input type="radio" name="car" id="yes" value="yes" onclick="enable_carname()" checked>yes<br>
carname:<input type="text" id="carname">
</form>
<button onclick="set_yes_radio()">test</button>
<script>
function disable_carname() {
document.getElementById("carname").disabled = true;
}
function enable_carname() {
document.getElementById("carname").disabled = false;
}
function set_yes_radio() {
document.getElementById("yes").checked = true;
}
</script>
answered Nov 25 '18 at 17:25
Mhd. Osama JindiaMhd. Osama Jindia
64
answered Nov 25 '18 at 17:25
Mhd. Osama JindiaMhd. Osama Jindia
64
answered Nov 25 '18 at 17:25
Mhd. Osama JindiaMhd. Osama Jindia
64
answered Nov 25 '18 at 17:25
Mhd. Osama JindiaMhd. Osama Jindia
64
64
add a comment |
add a comment |
set onclick as an attribute on your inout like this
<input type="radio" name="car" id="no" value="no" onclick="disable_carname()" > no<br>
answered Nov 25 '18 at 17:29
SaadSaad
85
add a comment |
set onclick as an attribute on your inout like this
<input type="radio" name="car" id="no" value="no" onclick="disable_carname()" > no<br>
answered Nov 25 '18 at 17:29
SaadSaad
85
add a comment |
set onclick as an attribute on your inout like this
<input type="radio" name="car" id="no" value="no" onclick="disable_carname()" > no<br>
answered Nov 25 '18 at 17:29
SaadSaad
85
set onclick as an attribute on your inout like this
<input type="radio" name="car" id="no" value="no" onclick="disable_carname()" > no<br>
answered Nov 25 '18 at 17:29
SaadSaad
85
answered Nov 25 '18 at 17:29
SaadSaad
85
answered Nov 25 '18 at 17:29
SaadSaad
85
answered Nov 25 '18 at 17:29
SaadSaad
85
85
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53469956%2fhtml-radio-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Looks like it already works to me.
– Robert Harvey♦
Nov 25 '18 at 17:22
Oh, you mean enable carname when test is clicked. You need some additional Javascript on the button to do that; the
onchangeonly works when the user clicks on the radio button.– Robert Harvey♦
Nov 25 '18 at 17:23