【问题标题】:hide a hidden input value when a submit button is clicked (php/jquery)单击提交按钮时隐藏隐藏的输入值(php/jquery)
【发布时间】:2013-01-09 01:41:01
【问题描述】:

好的,我的问题是这样的:

我有一个表格,要求输入名字、姓氏和城市。用户点击提交,然后信息显示在这个表格中:

<p>You entered the following data:</p>

            <form action="1.php" method="post">

                <input type="hidden" name="action" value="update">
                <input type="hidden" name="city" value="<?php echo $user->get_city(); ?>">

                <table>
                    <tr>
                        <th>First Name:</th>
                        <td><?php echo $user->get_fname(); ?></td>
                        <td><input type="button" id="edit_fname" value="Edit"></td>
                        <td><input type="text" id="fname" name="fname" size="20"></td>
                        <td><input type="hidden" id="valf" name="val" value="fname">
                            <input type="hidden" id="lnf" name="lname" value="<?php echo $user->get_lname(); ?>">
                            <input type="submit" id="subfn" value="Submit"></td>
                    </tr>
                    <tr>
                        <th>Last Name:</th>
                        <td><?php echo $user->get_lname(); ?></td>
                        <td><input type="button" id="edit_lname" value="Edit"></td>
                        <td><input type="text" id="lname" name="lname" size="20"></td>
                        <td><input type="hidden" id="vall" name="val" value="lname">
                            <input type="hidden" id="fnf" name="fname" value="<?php echo $user->get_fname(); ?>">
                            <input type="submit" id="subln" value="Submit"></td>
                    </tr>
                    <tr>
                        <th align="right">City:</th>
                        <td><?php echo $user->get_city(); ?></td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </form>

因此,当用户单击编辑按钮时,会显示一个文本框和一个提交按钮,并且根据它是名字编辑还是姓氏编辑,我有适当的隐藏值与表单一起发送。唯一的问题是,无论如何,即使您单击名字字段的提交按钮,隐藏的输入“val”也会设置为“lname”。

这里是 jquery:

$().ready = function() {
                    $('#fname').hide();
                    $('#lname').hide();
                    $('#subfn').hide();     // submit button for first name
                    $('#subln').hide();     // submit button for last name
                    $('#valf').hide();      // hidden value for fname so we know to post lname
                    $('#vall').hide();      // hidden value for lname so we know to post fname
                    $('#lnf').hide();       // hidden value to post last name when first name edit submit
                    $('#fnf').hide();       // hidden value to post first name when last name edit submit

                    $("#edit_fname").click(function() {
                        $('#fname').show();
                        $('#subfn').show();
                        $('#valf').show();
                        $('#lnf').show();

                        if ($('#lname').show) {     // if last name edit is showing, hide it
                            $('#lname').hide();
                            $('#subln').hide();
                            $('#vall').hide();
                            $('#fnf').hide();

                        }
                    });

                    $("#edit_lname").click(function() {
                        $('#lname').show();
                        $('#subln').show();
                        $('#vall').show();
                        $('#fnf').show();

                        if ($('#fname').show()) {       // if first name edit is showing, hide it
                            $('#fname').hide();
                            $('#subfn').hide();
                            $('#valf').hide();
                            $('#lnf').hide();
                        }
                    });

                }();

这是单击提交按钮并将“操作”更改为“更新”时的 PHP:

case 'update':
        $val = $_POST['val'];

        if ($val == 'fname') {
            $fname = $_POST['fname'];
            $lname = $_POST['lname'];
            $city = $_POST['city'];

            $user = new User($fname, $lname, $city);
            break;
        }
         else if ($val == 'lname') {
            $fname = $_POST['fname'];
            $lname = $_POST['lname'];
            $city = $_POST['city'];

            $user = new User($fname, $lname, $city);
            break;
        }

我测试了 $val 是什么,无论如何它似乎都停留在“lname”上。所以,我认为我的 jQuery 代码有问题,或者问题是无论如何都会发送姓氏“val”值,这不应该是因为我在单击名字按钮。

所有这些都是帮助我学习 OOP 的实验性内容。显然,这根本不是生产代码。我目前是应用科学副学士学位的一年级学生,并且还有很多年才能获得计算机科学学士学位。这甚至不是课程的一部分……我只是很无聊,真的很喜欢编程。

那么,认为有人可以提供帮助吗?抱歉发了这么长的帖子!

【问题讨论】:

  • 你能在 jsfiddle.net 上设置一个你的问题的例子吗?
  • 任一提交按钮都会提交所有字段,因为它们都是同一个表单的一部分。这意味着在客户端提交了两个“val”输入。我不是 PHP 人,但我认为服务器端它只是拿起最后一个。
  • 如您所知,您可以在 jQuery 中选择多个元素,方法是用逗号分隔它们。例如,在您的代码中,您可以这样做:$('#fname, #lname, #subfn, #subln, #valf, #vall, #fnf, #lnf').hide();
  • @AgentConundrum - 谢谢,我不知道!我真的不太了解jQuery。大约 3 小时前是我第一次实际使用它,除了看它。

标签: php javascript jquery hidden-field


【解决方案1】:

这就是原因。看下面两行代码

<td><input type="hidden" id="valf" name="val" value="fname">

.....

<td><input type="hidden" id="vall" name="val" value="lname">

这些定义了一个名为 val 的隐藏字段,首先使用值 fname,然后使用值 lname。即使你给他们不同的 ID,他们的名字仍然是一样的。在您的 jquery 代码中,您没有更改 val 的值,这就是它始终保持为 lname 的原因。

您必须根据某处的逻辑更改该值。您可以使用以下 jQuery 选择器

$("input[type='hidden'][name='val']")

编辑

所以不是这个

$('#valf').show();

你可以写

$("input[type='hidden'][name='val']").val("fname");

而不是这个

$('#vall').show();

你可以写

$("input[type='hidden'][name='val']").val("lname");

【讨论】:

  • ..然后我就不必分开表格了吗?因为我的目标是以一种形式完成所有工作。
  • @MichaelMaginnis 是的,这是正确的。您不必分开表格
  • 或者只是给两个提交按钮不同的名称属性,然后你的PHP可以测试哪个按钮被点击了。 (在这种情况下,您不需要隐藏的“val”字段。)
【解决方案2】:

您有两个不同的字段,name="val" 的格式相同。 PHP 依次读取其中的每一个,第二个值破坏(覆盖)第一个值,只留下$_GET 数组元素中的最后一个值。

您可以通过在变量名末尾加上[] 来指定同名的多个值。这告诉 PHP 它是一个数组元素,就像您在普通代码中使用 $array[] = "new element"; 向数组添加元素一样。

即使在这里使用数组语法也无济于事,因为每次提交表单时这两个值都会传递给服务器。如果您只想提交一个或另一个部分,那么它们需要是单独的表单。

【讨论】:

  • 浏览器可以并且确实提交多个同名字段。大多数服务器端语言都允许您处理所有值,但当然这在 OP 的情况下无济于事,因为它不区分按下了哪个提交按钮。 (而且我不是 PHP 人,但与其他语言不同,我认为 PHP 只处理名称以“[]”结尾的重复字段名称。)
  • @nnnnnn 我刚刚测试了这个,你是对的。我没有意识到这一点。我想我在 PHP 上花了太多时间,而在其他语言上花的时间还不够。我会更新我的答案。
猜你喜欢
  • 2018-01-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-05-21
相关资源
最近更新 更多