在第一页加载时隐藏字段，而不是在 php post 之后

Question

我想要一个 javascript，它可以在我第一次访问 index.php 时隐藏一些字段。在我做出选择后，会出现一些字段（取决于选择）。但是在那 index.php 上，有一个表格。我按下 'submit' 的那一刻，我想留在同一页面上，但字段必须保持原样..

但现在我的所有字段都隐藏了（如在第一页加载时一样）？

我的代码：

        <script type="text/javascript">
        function firstLoad()
    {
    <!-- HIDE FIELDS ON DOC START -->
    $(".diameterRound").hide();
    $(".lengthSquare").hide();
    $(".lengthRectangle").hide();
    $(".material").hide();
    $(".thickness").hide();
    $(".calculate").hide();
    }
    window.onload=firstLoad;
    </script>

<form method="post" action="<?=$_SERVER['PHP_SELF'];?>">

..... 有人可以帮我吗？我不太了解javascript..

编辑，我的脚本和表单：

    <script type="text/javascript">
    function firstLoad()
    {
    <!-- HIDE FIELDS ON DOC START -->
    $(".diameterRound").hide();
    $(".lengthSquare").hide();
    $(".lengthRectangle").hide();
    $(".material").hide();
    $(".thickness").hide();
    $(".calculate").hide();
    }
    $(document).ready(function()
    {
    <!-- GET SELECTED SHAPE -->
        $selectedshape=$("input:radio[name='shape']:checked").val();
        $('input[type="radio"]').click(function()
        {
            <!-- ROUND -->
            if($(this).attr("value")=="round")
            {
                $(".diameterRound").show();
                $(".material").show();
                $(".thickness").show();
                $(".calculate").show();
                $(".lengthSquare").hide();
                $(".lengthRectangle").hide();
                <!-- images shape selection goed zetten -->
                document.getElementById('roundShape').src = "css/images/roundSelect.jpg";
                document.getElementById('oblongShape').src = "css/images/oblong.jpg";
                document.getElementById('rectShape').src = "css/images/rect.jpg"
                document.getElementById('squareShape').src = "css/images/square.jpg";
            }
            <!-- SQUARE -->
            if($(this).attr("value")=="square")
            {
                $(".lengthSquare").show();
                $(".material").show();
                $(".thickness").show();
                $(".calculate").show();
                $(".diameterRound").hide();
                $(".lengthRectangle").hide();
                <!-- images shape selection goed zetten -->
                document.getElementById('roundShape').src = "css/images/round.jpg";
                document.getElementById('oblongShape').src = "css/images/oblong.jpg";
                document.getElementById('rectShape').src = "css/images/rect.jpg";
                document.getElementById('squareShape').src = "css/images/squareSelect.jpg";
            }
            <!-- RECTANGLE -->
            if($(this).attr("value")=="rectangle")
            {
                $(".lengthRectangle").show();
                $(".material").show();
                $(".thickness").show();
                $(".calculate").show();
                $(".lengthSquare").hide();
                $(".diameterRound").hide();
                <!-- images shape selection goed zetten -->
                document.getElementById('roundShape').src = "css/images/round.jpg";
                document.getElementById('squareShape').src = "css/images/square.jpg";
                document.getElementById('oblongShape').src = "css/images/oblong.jpg";
                document.getElementById('rectShape').src = "css/images/rectSelect.jpg"; 
            }
            <!-- OBLONG -->
            if($(this).attr("value")=="oblong")
            {
                $(".lengthRectangle").show();
                $(".lengthSquare").hide();
                $(".diameterRound").hide();
                <!-- images shape selection goed zetten -->
                document.getElementById('roundShape').src = "css/images/round.jpg";
                document.getElementById('squareShape').src = "css/images/square.jpg";
                document.getElementById('rectShape').src = "css/images/rect.jpg";
                document.getElementById('oblongShape').src = "css/images/oblongSelect.jpg";

            }
        });
    });
    window.onload=firstLoad;
    </script>

<form method="post" action="<?=$_SERVER['PHP_SELF'];?>">
                                <label>
                                    <h2>Step 1: Select your shape</h2>
                                </label>
                                <!-- SHAPE SELECTION -->
                                <div class="row 50%">
                                    <div class="3u 12u(mobilep)">
                                        <label>
                                            <input type="radio" name="shape" value="round" />
                                            <img id="roundShape" src="css/images/round.jpg">
                                        </label>
                                    </div>
                                    <div class="3u 12u(mobilep)">
                                        <label>
                                            <input type="radio" name="shape" value="square" />
                                            <img id="squareShape" src="css/images/square.jpg">
                                        </label>
                                    </div>
                                    <div class="3u 12u(mobilep)">
                                        <label>
                                            <input type="radio" name="shape" value="rectangle" />
                                            <img id="rectShape" src="css/images/rect.jpg">
                                        </label>
                                    </div>
                                    <div class="3u 12u(mobilep)">
                                        <label>
                                            <input type="radio" name="shape" value="oblong" />
                                            <img id="oblongShape" src="css/images/oblong.jpg">
                                        </label>
                                    </div>
                                </div>
                                <!-- ROUND - DIAMETER -->
                                <div class="row 50% diameterRound">
                                    <div class="12u diameterRound">
                                        <input type="text" name="diameterRound" class="diameterRound" id="diameterRound" placeholder="Diameter (mm)" />
                                    </div>
                                </div>
                                <!-- SQUARE - LENGTH -->
                                <div class="row 50% lengthSquare">
                                    <div class="12u lengthSquare">
                                        <input type="text" name="lengthSquare" class="lengthSquare" id="lengthSquare" placeholder="Length (mm)" />
                                    </div>
                                </div>  
                                <!-- RECTANGLE OBLONG - LENGTH WIDTH -->
                                <div class="row 50% lengthRectangle">
                                    <div class="6u lengthRectangle">
                                        <input type="text" name="lengthRectangle" class="lengthRectangle" id="lengthRectangle" placeholder="Length (mm)" />
                                    </div>
                                    <div class="6u">
                                        <input type="text" name="widthRectangle" class="widthRectangle" id="widthRectangle" placeholder="Width (mm)" />
                                    </div>
                                </div>
                                <div class="row 50% material">
                                    <div class="12u material">
                                        <select class="material" name="material" id="material"  >
                                            <option value="" disabled selected>Select your material</option>
                                            <OPTION value="448.38">Mild steel = 45 kg/mm2</OPTION>
                                            <OPTION value="797.12">Stainless steel A4316 = 80 kg/mm2</OPTION>
                                            <OPTION value="523.11">Stainless steel 304 = 52.5 kg/mm2</OPTION>
                                            <OPTION value="199.28">Aluminium = 20 kg/mm2</OPTION>
                                            <OPTION value="1394.96">Hardox 450 = 140 kg/mm2</OPTION>
                                            <OPTION value="1245.50">Raex 400 = 125 kg/mm2</OPTION>
                                            <OPTION value="348.74">Copper = 35 kg/mm2</OPTION>
                                            <OPTION value="548.02">50D Steel = 55 kg/mm2</OPTION>
                                            <OPTION value="617.77">Domex 420 = 62 kg/mm2</OPTION>
                                            <OPTION value="637.69">S355 structual steel  = 64 kg/mm2</OPTION>                                                       
                                        </select>
                                    </div>
                                </div>
                                <div class="row 50% thickness">
                                    <div class="12u thickness">
                                        <input type="text" name="thickness" class ="thickness" id="thickness" placeholder="Thickness of the material (mm)"  />  
                                    </div>
                                </div>                          
                                <div class="row 50% calculate">
                                    <div class="12u calculate">
                                    <label>
                                        <ul class="actions calculate">
                                            <li><input id="calculate" type="submit" class="button alt" value="Calculate" /></li>
                                        </ul>
                                    </label>
                                    </div>
                                </div>
                        </form>

Answer 1

默认情况下，您可以通过将它们的 css 设置为 display:none

来隐藏它们

Answer 2

这里你提交的页面没有 ajax 所以当你提交表单时它会重新加载页面并再次执行。这里再次调用 firstLoad() 函数，它将隐藏元素。

解决方案

要么使用 ajax 进行表单提交。 ajax 不会重新加载页面，因此您的元素看起来与选择相同

或

根据提交时的 post 数据对隐藏元素设置一些条件。

在第一页加载时隐藏字段，而不是在 php post 之后

Hide fields on first page load, not after php post

javascript

php

post