Question

嗨我需要隐藏文字，一旦我点击添加按钮，表格就会显示出来。这是我的代码。

<h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">Specify Co-Owners for self occupied property</h2>
<div class="last" style="margin-right: 0; padding-right: 0;">
    <div class="last" style="width: 710px;">
        <p class="narrate quiet" style="margin-left: 2%; width: 100%;margin-bottom: 0.75em;"> <b>Would you like to add Co-owner? </b></p>
    </div>
</div>

//Here is add button and go back button if i click in this add button form should be displayed else t should show the same text.//

<div class="span-12 last mt10" style="margin-top:-3%;margin-left:2%;">
    <a class="large awesome oranges"  >Add a property Co-owner</a>
</div>
<div class="span-12 last mt10" style="margin-top:-3%;margin-left:51%;">
    <a class="large awesome orange"  href="property.php">Go Back </a>
</div>

<p>You haven't added any Co-owners Yet.</p>

//My form starts from here//

<h2>Owner Property details</h2>
<input  type='hidden' value="<?php echo $username; ?>" name='email'>
<p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text"    name="name_coowner"  /></p>
<p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text"   name="pan_coowner"  /></p>

如果我打开页面iam获取此表单，但在此所有者属性中，只有当我点击添加属性所有者时才会显示详细信息。保留所有其他应该隐藏它应该只显示表单。

Answer 1

用以下代码替换您的代码：
注意：这需要一个有效的互联网连接，用于通过互联网获取JQuery库

    <html>
    <head>
        <title>Title of website</title>
        <style>
            .hidden
            {
                display:none;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
        </script>
        <script>
            $(document).ready(function () {
                $('.add-property').click(function () {
                    $('.hidden').toggle('slow');
                    $('#add-owner-div').addClass('hidden');
                    $('#go-back-div').addClass('hidden'); 
                });
            });
        </script>
    </head>
    <h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">Specify Co-Owners for self occupied property</h2>
    <div class="last" style="margin-right: 0; padding-right: 0;">
        <div class="last" style="width: 710px;">
            <p class="narrate quiet" style="margin-left: 2%; width: 100%;margin-bottom: 0.75em;"> <b>Would you like to add Co-owner? </b></p>
        </div>
    </div>
    <div class="span-12 last mt10" style="margin-top:-3%;margin-left:2%;" id="add-owner-div">
        <a class="large awesome oranges add-property"  >Add a property Co-owner</a>
    </div>
    <div class="span-12 last mt10" style="margin-top:-3%;margin-left:51%;" id="go-back-div">
        <a class="large awesome orange"  href="property.php">Go Back </a>
    </div>
    <p>You haven't added any Co-owners Yet.</p>
    <h2>Owner Property details</h2>
    <div class="hidden" style="display:none">
        <form>
            <input type='hidden' value="<?php echo $username; ?>" name='email'>
            <p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text"    name="name_coowner"  /></p>
            <p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text"   name="pan_coowner"  /></p>  
        </form>
    </div>
</html>

如果您有任何其他css库或引导程序，则可以包含在head标记中 PHP不是这样做的选项。如果你想要它与PHP相关的值，你可以使用JQuery ajax。

Answer 2

你的添加按钮应该是这样的

<a class="large awesome oranges"  id="add_btn">Add a property Co-owner</a>

将表单元素放在表单

中

<form nam="myform" id="myform"  style="display:none">

<input type='hidden' value="<?php echo $username; ?>" name='email'> <p><label for="name_coowner">Coowner Name</label> <input id="name_coowner" type="text" name="name_coowner" ></p> <p><label for="pan_coowner">PAN Of Coowner</label> <input id="pan_coowner" type="text" name="pan_coowner" ></p></form>

JS：

$("#add_btn").on('click',function(){

$("#myform").show();
}

如何在php中显示或隐藏标题

2 个答案: