Displaying particular values on radio select

Question

I'm trying to display particular forms on the selection of particular radio buttons.

Here are the radio buttons :-

<input type="radio" name="condition" value="working" id="condition">
<input type="radio" name="condition" value="workingdamaged" id="condition">
<input type="radio" name="condition" value="notworking" id="condition">

When we select the working radio, a different form needs to be opened up. When we select nonworking a different form needs to be there.

Originally, I was doing it via document.getElementById("demo").innerHTML , but, I was suggested that using too much forms within the innerHTML is not a good idea. Then what is the best way by which I complete this task?

Any suggestions are welcome.

id must be unique use class instead . – Tushar Gupta - curioustushar Feb 15 '14 at 10:55 — Tushar Gupta - curioustushar, Feb 15 '14 at 10:55

Shaik Mahaboob Basha · Accepted Answer · 2014-02-15T11:17:40.427

The simplest way I can think of is using data attributes for referring to the corresponding form elements from the radio button selected.

All we have to do is map a radio button with 'data-form="working"' to a particular form with id 'working'

The sample code looks like:

$("form").hide();

$("input:radio").on("change", function() {
    $("form").hide();
    $("#" + $(this).attr("data-form") ).show();
});

The html markup should look like:

<input type="radio" data-form="working" value="working" name="condition">
<input type="radio" data-form="workingdamaged" value="workingdamaged" name="condition">
<input type="radio" data-form="notworking" value="notworking" name="condition">

<form id="working">
    <h2>working form</h2>
</form>

<form id="workingdamaged">
    <h2>workingdamaged form</h2>
</form>

<form id="notworking">
    <h2>notworking form</h2>
</form>

Fiddle Demo

score 0 · Answer 2 · answered Feb 15 '14 at 11:00

Your solution is fine and I don't see any major problems with it.

You can also add all forms to DOM, and switch their visibility.

For instance:

<form id="form-working" style="display: none"></form>
<form id="form-workingdamaged" style="display: none"></form>
<form id="form-notworking" style="display: none"></form>

<input type="radio" name="condition" value="working" id="condition-working">
<input type="radio" name="condition" value="workingdamaged" id="condition-workingdamaged">
<input type="radio" name="condition" value="notworking" id="condition-notworking">

<script>
var forms = ['working', 'workingdamaged', 'notworking'];

function switch(form) {
  for (var k in forms) {
    forms[k].style.display = 'none';
  }

  document.getElementById('form-' + name).style.display = 'block';
}

var elements = document.getElementsByName('condition');

for (var k in elements) {
  elements[k].onclick = function() {
    if (this.cheked) {
      switch(this.getAttribute('value'));
    }
  }
}

</script>

EDIT: you have to change IDs of the elements. ID must be unique

Also you may consider using or external libraries for templating.

score 0 · Answer 3 · edited May 23 '17 at 11:49

0

You may take a look at this question. It might serves your purpose.

Show form on radio button select

edited May 23 '17 at 11:49

Community

1
1

answered Feb 15 '14 at 11:03

UjjawalKr

241
1
4
20

score 0 · Answer 4 · answered Feb 15 '14 at 11:12

<input type="radio" name="condition" class="selectradio" value="working" selection="select1">
<input type="radio" name="condition" class="selectradio" value="workingdamaged" selection="select2">
<input type="radio" name="condition" class="selectradio" value="notworking" selection="select3">

give them different ids this

create a model like this .

<div class=content>
     <div class="subcontent" style="display:none" id="select1">//content</div>
     <div class="subcontent" style="display:none" id="select2">//content</div>
     <div class="subcontent" style="display:none" id="select3">//content</div>
 </div>

<script>
$(function(){

$('.selectradio').change(
    function(){
       var sourced=$(this).attr("selection") ;
       $(".subcontent").hide();
       $("#"+sourced).show();
    }
);          

});

</script>

you have to include jquery library .

Displaying particular values on radio select

4 Answers4