Question

当我点击特定的单选按钮时，我试图显示/隐藏textarea。我需要验证textarea，以便用户必须在textarea中输入详细信息。当用户点击第3个单选按钮时，我尝试使用3个单选按钮应该显示其他textarea并且应该验证它以便用户填充textarea而对于休息2不应该显示textarea单选按钮。我怎么能这样做？

这是代码

<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代码：

 <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>

解决了show hide和验证问题。我给了单选按钮并调用了click事件的功能。如果你使用外部CSS更好。请根据您的需要编写php相关代码。

显示/隐藏textarea并验证。当显示单击单选按钮时

1 个答案: