繁体   English   中英

在首页加载时隐藏字段,而不是在php发布后隐藏字段

Hide fields on first page load, not after php post

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我希望第一次访问index.php时可以隐藏某些字段的JavaScript。 选择之后,会显示一些字段(取决于选择)。 但是在那个index.php上,有一种形式。 我按“提交”的那一刻,我想保留在同一页面上,但是字段必须保持原样。

但是现在我所有的字段都隐藏了(如第一页加载时一样)?

我的代码:

        <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>
2 个回复

默认情况下,您可以通过将其CSS设置为display来隐藏它们:无

在这里,您提交的页面没有ajax,因此当您提交表单时,它将重新加载页面并再次执行。 在这里firstLoad()函数再次调用,它将隐藏元素。

使用ajax进行表单提交。 ajax不会重新加载页面,因此您的元素与选择的外观相同

要么

根据提交的发布数据为隐藏元素设置一些条件。

1 cURL在页面加载后提交POST字段(curl_exec)?

我必须创建一个机器人来从我的大学网站上收集一些数据,它使用带有regno和captcha字段的半登录名,而不使用真正的captcha,它是伪造的(可以在页面源代码中看到)。 所以我的想法是使用DOM解析器并从例如 我使用PHP-Curl来完成这项工作。 我的代码: 问题是一旦我 ...

2 PHP如果在POST中仅加载第一个if

我有这个代码: 它正在工作,但是我希望它做这样的事情 这意味着仅当有图片时才会从数据库中删除图片。.如果没有,它将显示该消息“没有要删除的图片”……但它不起作用。它仍然显示该错误消息即使数据库中没有空白行也没有图片,因此它也不会删除行中的信息...问题出在哪里? 顺便说一句:第 ...

4 加载html页面后立即将数据发布到php [重复]

这个问题已经在这里有了答案: 使用PHP 28的 “注意:未定义的变量”,“注意:未定义的索引”和“注意:未定义的偏移量” 我想将数据发送到php,但是我不知道为什么它不起作用 这是我的代码 html 的PHP 谢谢 ...

5 显示/隐藏公共输入字段,然后发布到php

我正在为用户开发表单,他希望表单字段根据下拉菜单进行更改。 因此,例如,如果他选择“图书馆”作为设施名称,那么他应该输入其面积,容量,数量和互联网可用性状态。 另一方面,如果他选择“展览区域”,则应输入其类型,区域,容量,数量和互联网状态。 如您所见,它们是常见的“重复”字段,导致在php ...

6 AngularJS + PHP第一页加载

我正在尝试建立一个集合视图(针对网站-而非SPA)。 由于SEO的原因和性能,我使用传统的PHP“ foreach”填充了初始页面加载时的视图。 但是,在第二个请求(即分页/过滤器/排序)上,我想使用AngularJS AJAX调用和ng-repeat,是否有条理的方法来防止ng-r ...

7 Javascript POST将不会在PHP页面中加载

我有一个javascript函数来处理一些表单数据并构建POST到php页面。 js执行xmlHTTP.open并发送到所构建的URL。 php页面应接受参数并发送电子邮件,但似乎不接受参数。 我知道我在这里缺少一些愚蠢的东西,但是我有其他页面相似,但是参数较少,而且它们可以正常工 ...

8 将extjs 4字段发布到store.load上的PHP

我正在从extjs 2.2迁移到extjs 4.0。 我的代码通过发布某些ext字段的php(代理URL)过滤我的网格数据。 etx商店: ext字段(两个示例,字段太多): 过滤条件: PHP: 在ext 2.2中,通常会将字段内容发布到store.lo ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM