如何根据表单值更改 div id 名称？答案

【问题标题】：How to change div id name based on form value?如何根据表单值更改 div id 名称？
【发布时间】：2013-10-18 17:01:52
【问题描述】：

我在一个页面上有几个表单，带有一个按钮和一个隐藏的输入字段，其值已经预设：

<form action="product.html" method="get">
<fieldset>
<input style="display: none;" type="text" name="RSS" id="RSS" value="RSS" />
<input type="submit" value="Go"/>
</fieldset>
</form>

<form action="product.html" method="get">
<fieldset>
<input style="display: none;" type="text" name="RSS2" id="RSS2" value="RSS2" />
<input type="submit" value="Go"/>
</fieldset>
</form>

一旦他们点击任一表单上的 Go 按钮，它就会重定向到 product.html 页面，在该页面中根据上述值加载特定的 div。

<div id="ID CHANGE TO OCCUR HERE to either be RSS or RSS2"></div>

我的问题是，我如何让那个 id 在那个 div 上改变？谢谢

PS：公司服务器上没有启用 PHP...所以是的..是的...

【问题讨论】：

您是否有理由不在服务器端执行此操作并在生成页面时交换 ID？
...你的问题是？
所以你用style="display: none;" 重新发明了type="hidden"？
所以你大概想要：div.id = (get_headers.rss != undefined) ? 'rss' : 'rss2';?
托德，这是一个演示，还有几个演示。我试图让它工作而不必构建几个页面。

标签： javascript jquery forms submit

【解决方案1】：

如果我理解正确，当程序控制转移到 product.html 时，您希望发现遇到了哪个表单值（即用户单击了哪个表单）。

我无法想象你会如何仅使用 HTML 来做到这一点。这是 PHP 或 ASP .Net 等服务器端语言的工作。

这在 PHP 中非常简单。 请注意，您可以使用所有现有的 HTML 文件并将它们简单地重命名为 .php（例如 product.php），它们仍然可以正常工作。

只需将其放在文件的顶部——事实上，这是完整的文件（只需复制/粘贴到您的服务器进行测试）：

product.php

<?php 

    /*   Below not required, but un-comment to see useful info: 
    echo '<pre>';
    print_r($_REQUEST);
    echo '<pre>';
    */

    if (isset($_REQUEST['RSS'])) {
        echo 'User clicked the RSS form';
    } else if (isset($_REQUEST['RSS2'])) {
        echo 'Sent here by the RSS2 form';
    }

由于处理文件的名称已更改，请记住在尝试此操作之前更改每个表单中的 action= 行：

<form action="product.php" method="get">

说明：

提交表单时，表单元素（输入字段、单选按钮、复选框）被转换为变量并发送到处理文档（在action=属性中指定的目标文档表单标签）。

对于每个元素，变量名称是该元素的name= 属性，变量值是value= 属性，或者，例如，在输入字段的情况下，无论用户在按提交之前的字段。

以method="Get" 或method="POST" 发送表单在编程/功能上几乎没有区别，但 post 方法更安全，可以传输更多信息，所以我们大多数人都使用它。

最后，在另一端，获取变量值的方法有三种（PHP示例）：

 $newvar = $_GET['varname'];  //if method="GET" was used

 $newvar = $_POST['varname'];  //if method="post" was used

 $newvar = $_REQUEST['varname'];  //works for both

如果您在 PHP 方面需要更多帮助，请在 the New Boston 或 his own site 上观看 Alex Garret 的一些免费十分钟视频。

【讨论】：

谢谢，但我忘了提到由于某种原因我们的 PHP 没有启用，公司也不想打开它。是的……我知道

【解决方案2】：

重新阅读您的问题，我整理了完整的示例。在您的目标页面中，您有两个 DIV，您希望根据用户单击的表单显示一个或另一个。

这是解决方案的一个工作示例。复制/粘贴到两个名为：

test.php -- 这个文件可以任意重命名
product.php -- 如果改变这个名字，也必须同时改变@ 987654321@表单属性

test.php

<form action="product.php" method="get"> <!--  product.html -->
<fieldset>
    <input type="hidden" name="RSS" id="RSS" value="RSS" />
    <input type="submit" value="Go"/>
</fieldset>
</form>

<form action="product.php" method="get">
<fieldset>
    <input type="hidden" name="RSS2" id="RSS2" value="RSS2" />
    <input type="submit" value="Go"/>
</fieldset>
</form>

product.php

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var whichone = $('#xfer').val();
                //alert( whichone );
                $('#' + whichone).show();
            });
        </script>
    </head>
    <body>
        <input type="hidden" id="xfer" value="<?php echo ( isset($_REQUEST['RSS'])  ? 'RSS' : 'RSS2' ) ; ?>">

        <div id="RSS" style="display:none;">
            <h1>RSS DIV</h1>
            Here is some information regarding the RSS div.
        </div><!-- #RSS -->
        <div id="RSS2" style="display:none;">
            <h1>RSS2 DIV</h1>
            <i>Here is some <strong>different </strong>information regarding the RSS2 div.</i>
        </div><!-- #RSS -->
    </body>
</html>

【讨论】：

谢谢，但我忘了提到由于某种原因我们的 PHP 没有启用，公司也不想打开它。是的……我知道
那你可以访问哪种服务器语言？
不多，它们在这里很紧。我们在 ASP 上运行，不确定是什么版本，就像我说的那样，它们非常紧凑。我一直在寻找可以工作的 javascript 或 jquery 版本。

【解决方案3】：

您可以使用 javascript 测试您的请求：

if(location.href.indexOf("RSS=RSS") > 0) {
    var element = document.getElementById('RSS')
    element.id = "RSS2";
    element.name = "RSS2";
    element.value = "RSS2";
}

这只是一个 indexOf 检查，你也可以解析整个查询字符串并将键/值对关联到一个数组中。见How can I get query string values in JavaScript?

【讨论】：