如果if语句为真,则在加载页面上显示隐藏div

时间:2016-07-12 18:26:33

标签: javascript php jquery html css

你会很快发现我是新手,并且没有线索。我正在努力帮助一个朋友参与这个项目。他希望有一个简单的引用表单,生成html引用,然后他将复制/粘贴到他的客户端的私人wordpress页面。

表单以if单选按钮开始,显示div

的index.html:

 <html>
<body>
<head>
        <title>Demo Quote Creator</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("input[name='animalvillas']").click(function () {
            if ($("#chkYes1").is(":checked")) {
                $("#dvanimalvillas").show();
            } else {
                $("#dvanimalvillas").hide();
            }
        });
    });
    </script>
<script type="text/javascript"> 
    $(function () {
        $("input[name='animalkidani']").click(function () {
            if ($("#chkYes2").is(":checked")) {
                $("#dvanimalkidani").show();
            } else {
                $("#dvanimalkidani").hide();
            }
        });
    });
        </script>


</head>
<h2>Client Name</h2>
<form name="create" action="welcome.php" method="post" onsubmit="return validateForm();">
 <strong>Last</strong>: <input type="text" name="last" required />, <strong>First</strong>: <input type="text" name="first" required />
<BR />

<h2><strong>Resorts to Include in Quote</strong></h2>

<span><strong>Animal Kingdom Villas</strong></span><BR />
<label for="chkYes1">
    <input type="radio" id="chkYes1" name="animalvillas" />
    Include
</label>
<label for="chkNo1">
    <input type="radio" id="chkNo1" name="animalvillas" />
    Exclude
</label>
<hr />
<div id="dvanimalvillas" style="display: none">
$<input type="text" name="ages" size="7" /> - Value Studio - Standard View (Parking View) | Studio Description: 316sf - One (1) queen bed and one (1) double-size sleeper sofa (Sleeps 4) <br>
</div>

<span><strong>Animal Kingdom Kidani</strong></span><BR />
<label for="chkYes2">
    <input type="radio" id="chkYes2" name="animalkidani" />
    Include
</label>
<label for="chkNo2">
    <input type="radio" id="chkNo2" name="animalkidani" checked />
    Exclude
</label>
<hr />
<div id="dvanimalkidani" style="display: none">
$<input type="text" name="ages" size="7" /> - Value Studio - Standard View (Parking View) | Studio Description: 316sf - One (1) queen bed and one (1) double-size sleeper sofa (Sleeps 4) <br>
</div>


<BR />
<input type="submit" />
</form>

</body>
</html>

现在,在welcome.php上,他只想要在index.html上选择的相关内容。显然,这不起作用,但希望你能看到我们想要实现的目标。

的welcome.php

 <head>
        <meta charset="utf-8" />
</head>

<body>

    <div id="dvanimalvillas" <?php
if ($("#chkNo1").is(":checked")) { echo 'style="display:none;"'; } ?>>
       The quote for Animal Kingdom Villas will show here when yes is selected
    </div>      


    <div id="dvanimalkidani" <?php
if ($("#chkNo2").is(":checked")) { echo 'style="display:none;"'; } ?>>
      The quote for Animal Kingdom Kidani will show here when yes is selected
    </div>      




</body>

感谢您的任何指导!

2 个答案:

答案 0 :(得分:0)

在index.html中进行以下更改。您必须为您的单选按钮提供一些值以获取其他文件

<label for="chkYes2">
    <input type="radio" id="chkYes2" name="animalkidani" value="Y" />
    Include
</label>
<label for="chkNo2">
    <input type="radio" id="chkNo2" name="animalkidani"  value="N" checked />
    Exclude
</label>

在welcome.php中进行以下更改。我们将使用单选按钮值来隐藏和显示div内容。

<div id="dvanimalvillas" <?php echo ($_POST['animalkidani'] == "Y") ? 'style="display:none;"' : '' ; } ?>>
    The quote for Animal Kingdom Villas will show here when yes is selected
</div>      


<div id="dvanimalkidani" <?php echo ($_POST['animalkidani'] == "N") ? 'style="display:none;"' : '' ; } ?>>
    The quote for Animal Kingdom Kidani will show here when yes is selected
</div> 

答案 1 :(得分:0)

这里有很多事情要发生:

  1. 您没有正确使用单选按钮。每个无线电选择在具有相同名称的每个无线电组内需要不同的值。此值是表单在提交时发送的值。请看这个链接:http://www.echoecho.com/htmlforms10.htm

  2. 在welcome.php中,您需要查看从index.html发送的表单数据,而不是表单中的实际复选框。请看这个链接:http://www.tutorialspoint.com/php/php_get_post.htm