CODEWITHSUNDEEP
javascripthtml
Mark
Mark

Reputation: 402

show row depending what radio button is selected

I have read through a number of similar questions on stackoverflow but am a little lost of how to modify it to my particular situation. I want to output 2 rows in html differently depending what radio button is selected. I am still learning javascript...

What am i missing please? and how do i get the html to output directly after the radio button form item?

My form looks like this;

<tr>
  <td>Select your option</td>
  <td><input type="radio" name="your_store" id="store_yes" value="1" onclick = "addrow()" />
  <?php echo $text_yes; ?>
  <input type="radio" name="your_store" id="store_no" value="0" onclick = "addrow()" />
  <?php echo $text_no; ?></td>
</tr>

After this i also have several other form items

At the bottom of the form i have the function;

<script type="text/javascript"><!-- 
function addrow() {   
  if(document.getElementById('store_yes').checked) {
    html  = '<tr>'; 
    html  = '<td>Row is showing this</td> '; 
    html  = '</tr>'; 
  } else {
    html  = '<tr>';
    html  = '<td>Row is showing something else</td> '; 
    html  = '</tr>'; 
  }
//--></script>

EDIT, if YES is selected the 2 rows appear, the rows need to dissapear again if NO is then subsequently selected, ie change of users mind.

Upvotes: 0

Views: 2770

Answers (1)

Awad Maharoof
Awad Maharoof

Reputation: 2360

Here is your code, I have used Jquery to append the rows to the end of your table. Read more about .append() in jquery here .

The modified function:

function addrow() {
    if (document.getElementById('store_yes').checked) {
        $('#yourTable').append('<tr><td>Row is showing this</td></tr>');
    } else {
        $('#yourTable').append('<tr><td>Row is showing something else</td></tr>');
    }
}

The modified HTML

`

<table border="1" id="yourTable"><tr>
  <td>Select your option</td>
  <td><input type="radio" name="your_store" id="store_yes" value="1" onclick = "addrow()" />
    <input type="radio" name="your_store" id="store_no" value="0" onclick = "addrow()" />
  </td>
</tr>
</table>

`

Check out the demo here

Update
The demo has been updated to remove appended rows if the user changes his mind

Upvotes: 1

Related Questions