CODEWITHSUNDEEP
javascriptjqueryhtmljsp
ALBI
ALBI

Reputation: 721

Setting content of a div based on radio button slected

I have a jsp file:

<div class="span12" id="result" style="position: relative; top:-57px;margin-left:-10px">
 Is The Image Missing or Wrong?
<table>
 <tr>
  <td>
   <input type="radio" name="imageprob" value="Missing" onclick="MissingSelected()">
     Missing 
     <br>
     <input type="radio" name="imageprob" value="Wrong" onclick="WrongSelected()">Wrong
  </td>
  <td></td> //content of this column to be set based on which radio button slected
 </tr>
</table>
</div>  
</div>

I want to set the content of second column in table based on which radio button is selected in first column. How can I do this this?

Upvotes: 1

Views: 1616

Answers (3)

Vikas Gourav
Vikas Gourav

Reputation: 11

You can use Jquery and set the column2-value like this :

$('input[name="imageprob"]').change(function(){
    var radioVal = $(this).val();
    var column2El = $('div#result > table td:nth-child(2)');
    if('Missing' === radioVal){
        alert('Missing');
        column2El.text('Missing');
    } else if('Wrong' === radioVal){
        alert('Wrong');
        column2El.text('Wrong');
    }
});

This is specific to the code you provided and will work for you.

Upvotes: 1

Voonic
Voonic

Reputation: 4775

Try this bro | Check this Demo

HTML

<div class="span12" id="result" style="position: relative; top:-57px;margin-left:-10px">
      Is The Image Missing or Wrong?
      <table><tr>
      <td><input type="radio" name="imageprob" value="Missing" onclick="selected(this)"> Missing 
<br>
      <input type="radio" name="imageprob" value="Wrong" onclick="selected(this)">Wrong</td>
      <td id="set"></td> //content of this column to be set based on which radio button slected
      </tr></table>
    </div>  
    </div>

JS

function selected(dis)
{
    var ele= document.getElementById('set');
    if(dis.value =='Missing')
    {
     ele.innerHTML ="MIssing something";   
    }
    else    
    {
     ele.innerHTML ="Correct";   
    }
}

Upvotes: 2

Vicky Thakor
Vicky Thakor

Reputation: 3916

Use jquery when user select radio button make a call to other page which will populate data and show in specific table/div.

<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second


$("input[@name='lom']").change(function(){
    $.get( "ajax/test.html", function( data ) {
       $( ".result" ).html( data );
       alert( "Load was performed." );
    });
});

http://api.jquery.com/jQuery.get/

Upvotes: 1

Related Questions