show/hide textarea with validation.when displayed clicked on radio button

Question

I m trying to show/hide textarea when clicked on particular radio button.I need to validate the textarea such that user has to enter details in the textarea.I m trying with 3 radio buttons when user clicks on 3rd radio button which is Other textarea should be displayed and it should be validated such that the user fills the textarea whereas for rest 2 radio buttons textarea should not be displayed. How can I do this?

Here is the code

<script type="text/javascript">
    $(function() {


        $("input[type='radio']").change(function(){

if($(this).val()=="Other, please give details")
{
    $("#otherAnswer").show();
}
else
{
       $("#otherAnswer").hide(); 
}

});

    });
</script> 


if (isset($_POST['submit'])) {
    $error = "";



    if (!empty($_POST['email'])) {
    $email = $_POST['email'];
      if (!preg_match("/^[_a-z0-9]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", $email)){ 
      $error .= "The e-mail address you entered is not valid. <br/>";
      }
    } else {
    $error .= "You didn't type in an e-mail address. <br />";
    }


   if (empty($_POST["mail"])) {
     $error = "Reason is required";
   } else {
     $mail = $_POST["mail"];
   }

<form action="" method="post"  style="margin-top:20px;">
                  <input type="hidden" name="subject" value="Form Submission" />
                  <input type="hidden" name="redirect" value="" />



                  <label style="font-size:14px;">E-mail:</label>
                  <input type="text" name="email" value="" style="margin-left:30px;"<?php if (isset($_POST['email'])) { echo $_POST['email']; } ?>" />
                    <br/>
                    <br/>



<label >
    <input name="mail" type="radio" id="mail" value="I receive too many e-mails" />I receive too many e-mails<br /></label>
<label ><input name="mail" id="mail1" type="radio" value="I don’t find the e-mails interesting or useful" />I don’t find the e-mails interesting or useful</label>
<br/>
  <label >
<input name="mail" type="radio" id="mail2" value="Other, please give details" />Other, please give details:</label><br/>


<textarea  style="display:none;" type="text" name="otherAnswer" id="otherAnswer"/></textarea>





                    <input type="submit" class="submit" name="submit" value="SEND" />

                  </form>

Answer 1

JS Code:

 <script>

$(document).ready(function() {
    $("#otherAnswer").hide();
    $(".opt").change(function(){
        var id=$(this).attr("id");
        if(id=="mail2")
        {
            $("#otherAnswer").show();
        }
        else
        {
            $("#otherAnswer").hide();
        }
        });

        $("#feedbackform").submit(function(){
            var selected_val=$(".opt:checked").val(); 
            if(selected_val=="other_reason")
            {
                if($("#otherAnswer").val()=="")
                {
                    alert("please enter reason");
                    // you can display message next to text area.
                    return false;
                }
            }
        })
});

</script>

HTML code:

    <form action="" method="post"  style="margin-top:20px;" id="feedbackform">
                  <input type="hidden" name="subject" value="Form Submission" />
                  <input type="hidden" name="redirect" value="" />



                  <label style="font-size:14px;">E-mail:</label>
                  <input type="text" name="email" value="" style="margin-left:30px;"<?php if (isset($_POST['email'])) { echo $_POST['email']; } ?>" />
                    <br/>



<label >
    <input name="mail" type="radio" id="mail" value="I receive too many e-mails" class="opt"/>I receive too many e-mails<br /></label>
<label ><input name="mail" id="mail1" type="radio" value="I don’t find the e-mails interesting or useful" class="opt"/>I don’t find the e-mails interesting or useful</label>
<br/>
  <label >
<input name="mail" type="radio" id="mail2" value="other_reason" class="opt"/>Other, please give details:</label><br/>


<textarea   type="text" name="answer" id="otherAnswer"/></textarea>





                    <input type="submit" class="submit" name="submit" value="SEND" />

                  </form>

solved both show hide and validation problem. I've given class to radio button and called function of click event. Better if you use external css. please write php related code as per your need.