Radio button click yes show div

JavaScript
1

I have the following code working but not fully.

Basically when the user enters the page the div #extra should be hidden, and on click of the yes radio button the div appears.

It works at the moment when I click yes and then no and then yes again, basically I think it needs to know that No is selected already and the div is hidden.

http://www.whhazardreport.co.uk/page3.php?top=Ward Block&middle=Level 3&bottom=Corridor


<script src="http://code.jquery.com/jquery.js"></script>

<script type="text/javascript">
  $(function(){
    $(".static_class").click(function(){
      if($(this).val() === "Yes")
        $("#extra").show("fast");
      else
        $("#extra").hide("fast");
    });
  });
</script>

<tr>
<td width="100%" style="font-size:22px;">Action Taken? &nbsp;<input type="radio" checked="checked" name="actions" value="Yes" id="yes" class="static_class" /> Yes &nbsp;</label> <input type="radio" checked="checked" name="actions" value="No" id="no" class="static_class"/> No </label></td>
</tr>
<tr>
<td width="100%"><div id="extra"><textarea cols="84" wrap="physical" rows="4" name="feedback" class="textboxid4 style"></textarea></div></td>
</tr>

I also think that on click of No if they have already typed something having previously cliked yes, the textarea needs to be disabled, otherwise whats written in the textarea although they changed their mind will still go in the database.

2

Hi,

Can you not just set the div’s display property to none in the CSS, which will ensure it is hidden when the page loads.

E.g.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unbenanntes Dokument</title>
    <style> #extra{ display: none; }</style>
  </head>

  <body>

    <table>
      <tr>
        <td width="100%" style="font-size:22px;">
          Action Taken? &nbsp;
          <input type="radio" checked="checked" name="actions" value="Yes" id="yes" class="static_class" />
          <label for="yes">Yes &nbsp;</label>
          <input type="radio" checked="checked" name="actions" value="No" id="no" class="static_class"/>
          <label for="no">No </label>
        </td>
      </tr>
      <tr>
        <td width="100%">
          <div id="extra">
            <textarea cols="84" wrap="physical" rows="4" name="feedback" class="textboxid4 style"></textarea>
          </div>
        </td>
      </tr>
    </table>

    <script src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript">
      $(function(){
        $(".static_class").click(function(){
          if($(this).val() === "Yes")
            $("#extra").show("fast");
          else
            $("#extra").hide("fast");
        });
      });
    </script>
  </body>
</html>

Also notice that by giving the labels a for attribute, you can activate the various radio buttons by clicking on the corresponding label text.

3

Tut, thats what you get for over complicating the issue, sorry and thanks Pullo.

Did you see my other point though, in that say they click yes and start typing something then change their mind and click no, as the textarea now has some value to it that will go into the database, so would it be a good idea to disable the textarea if No is clicked, and then its not disabled if they click yes again after that.

4

So when the user clicks no and the text field is hidden, you want the text area to be emptied?

Just add this to your JS:

$(".static_class").click(function(){
  if($(this).val() === "Yes"){
    $("#extra").show("fast");
  }else{
    $("#extra").hide("fast");
    $(".textboxid4").val("");
  }
})

Two caveats:

  1. Make sure you don’t have anything else with a class of “textboxid4” on the page, or this will get emptied, too. If you do, you’ll need to give the text area an id.
  2. This isn’t very user friendly. Image I type in a load of text, then change my mind and click on no, then change my mind again and click on yes. Everything would be gone. What I would be tempted to do in this situation, is to check this on the server side and only enter the value into my DB if the user selected “yes”.
5

Tut, that’ll teach me to read questions properly.
You wanted to disable it, not empty it. Sorry!

$(".static_class").click(function(){
  if($(this).val() === "Yes"){
    $("#extra").show("fast");
    $(".textboxid4").prop("disabled", false);						
  } else {
    $("#extra").hide("fast");
    $(".textboxid4").prop("disabled", true);
  }
});

Same point applies about the class, though.
I’d probably give it an id if I were you.

6

Great thank you Pullo, that finishes me up for today as I am shattered!

Thank you again, and for coming back so quickly.

Cheers

7