CODEWITHSUNDEEP
javascripthtmlcssradio-buttontoggle
user3104720
user3104720

Reputation: 41

onClick toggle radio and label elements

This is what i tried.

<form method="POST">
<label>YES</label>
<input type="radio" name="yes">
<?php 
if(isset($_POST['yes']) === 'yes'){
?>
<label>Show me on yes</label>
<input type="radio" name="showme">
<?php
}

?>
</form>

So when we select the radio button "YES" than it must show "showme" radio button.

What do i wrong in here ?

I want it to show before submitting the form

Upvotes: 0

Views: 737

Answers (4)

Hemant Dubey
Hemant Dubey

Reputation: 143

Onclick if its YES then run this code with buttonId

document.getElementById("ButtonId").style.visibility="visible";

Upvotes: 1

Funk Forty Niner
Funk Forty Niner

Reputation: 74220

Give this a try, and it's styled. There are 2 radio buttons, but you can always remove one.

<html>
<head>
<title></title>
<style type="text/css">
div {
position: absolute;
left: 10px;
top: 40px;
background-color: #f1f1f1;
width: 280px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

</head>
<body >

<form action='' method='POST'>
<input type=radio name=type value='male' onclick="setVisibility('sub3', 'inline');setVisibility('sub4','none');";>Radio 1 <input type=radio name=type value='female' onclick="setVisibility('sub3', 'none');setVisibility('sub4','inline');";>Radio 2

<div id="sub3">
YES
</div>

<div id="sub4" >
NO
</div>
<br></form>

</body>

</html>

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157384

I guess you are looking for a perhaps front end solution without submitting the data to the server, that is you want to show the radio on check of another radio which can be achieved by client side scripting such as JavaScript or jQuery , but if it's that so than you can achieve that with pure CSS too...

Demo

Demo 2 (With label)

input[id="yes"] {
    display: none;
}

label[for="yes"] {
    display: none;
}

input[id="showyes"]:checked + label[for="yes"] {
    display: block;
}

input[id="showyes"]:checked + label[for="yes"] + input[id="yes"] {
    display: block;
}

Note: JavaScript/jQuery will fail if client has JS Disabled, well yes, JS can be the best way, but why use it if it can be easily accomplished with CSS only..

Upvotes: 2

Vikram Deshmukh
Vikram Deshmukh

Reputation: 15696

Why don't you opt for a javascript side solution?

Here's the demo

And, here's the markup:

<form method="POST">
<label>YES</label>
<input type="radio" name="yes" onclick='showNow(this);'>

<label class='showOnYes'>Show me on yes</label>
<input class='showOnYes' type="radio" name="showme">
</form>

and the javascript

function showNow(target) {
    if(target.checked); {
        var all = document.getElementsByClassName("showOnYes");
        for (var i = 0; i < all.length; i++) {
            all[i].style.display = 'block';
        }
    }
}

Finally some css:

.showOnYes {
    display: none;
}

Upvotes: 1

Related Questions