HTML 表单按钮值未在 Safari 和 Chrome 中发布

Posted 2023-02-24

技术标签:

【中文标题】HTML 表单按钮值未在 Safari 和 Chrome 中发布【英文标题】：HTML Form Button value is not posted in Safari and Chrome 【发布时间】：2012-07-08 00:16:09 【问题描述】：

单击按钮时，我正在使用 jQuery 提交表单。然后我想测试按钮的值，但是，这不会在 Safari 和 Chrome 中提交。为什么？有解决办法吗？

在 IE/FF 中测试下面的代码看它是否可以工作，然后在 Safari/Chrome 中测试它是否可以：

ButtonPostTest.php：

<?php
    if(isset($_POST['testBtn'])) 
        echo $_POST['testBtn'];
    
?>
<html>
    <head>
    <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() 
                $('#btn').click(function() 
                    $('form').submit();  // submit the form
                );
            );
        </script>
    </head>
    <body>
        <form action="" method="post">          
            <button id="btn" class="page-btn" type="submit" name="testBtn" value="Yes Button value is posted!">POST IT!</button>
        </form>
    </body>
</html>

更新：

input 也会发生同样的事情：

<input id="btn" class="page-btn" type="submit" name="testBtn" value="Post this"></input>

此外，这只是使用 jQuery .submit() 提交时的问题 - 没有这个，它可以通过按钮或输入正常提交。

【问题讨论】：

感谢这为我指明了正确的方向。让我发疯，甚至没有怀疑我之前添加的 jquery.submit ......我发现了这个行为的解释以及它发生的原因：***.com/a/1709352/76672 在 Chrome (Linux Mint) 中似乎可以正常工作。它已经使用 Webkit 的一个分支已经有一段时间了，所以它可能已经在 Chrome 中修复了。 【参考方案1】：

给它一个名字。

<button type='submit' id='trash' name='trash' value="trash" class='red'>

【讨论】：

除错，这也有帮助。【参考方案2】：

我认为你发现了一个 webkit 错误。

我在 Chrome 中进行了同样的测试，您的表单：

<form action="" method="post">          
   <button id="btn" class="page-btn" type="submit" name="testBtn" value="Yes Button value is posted!">POST IT!</button>
</form>

这不会发送任何数据。但是，如果我添加另一个元素，特别是输入：

<form action="" method="post">          
   <input type="hidden" name="shim" value="" />
   <button id="testBtn" class="page-btn" type="submit" name="testBtn" value="Yes Button value is posted!">POST IT!</button>
</form>

这会发送两个值。这没有 JavaScript。添加 shim 隐藏表单元素后，它看起来就有意义了。

此解决方案需要更多测试，但它可能会满足您的需求。

【讨论】：

我需要使用 jQuery 提交，以便在提交之前更改表单操作。还是一样的结果（使用 jQuery 提交时）... 我不确定这有什么不同。 shim 的重点是，我认为 Chrome 的行为可能会根据表单中表单元素的数量和类型而有所不同。【参考方案3】：

正如 Robert 上面所说，在使用 <button> 标记时，您需要同时使用 name="" 和 value=""，例如

<button name="Search" value="Simple" type="submit">Search</button>

<button name="Search" value="Advanced" type="submit">Search</button>

在此示例中，您的 POST 数据将具有 Key 值对：

搜索简单

或

搜索高级

然后根据该 POST 值，您可以编写代码以采取适当的措施。 :)

即您不需要使用输入，只需使用带有名称/值的按钮就可以了。

【讨论】：

【参考方案4】：

这可能非常明显，现在我自己修复了它，我意识到这是一个愚蠢的错误。但对我来说，我错误地离开了type="submit"。表单始终有效，但只是从这些按钮中发布了一个值。

没有传递值（错误）：

<button name="step" id="btn1" value="my_value">btn_text</button>

价值传递（良好）：

<button type="submit" name="step" id="btn1" value="my_value">btn_text</button>

无论如何，我希望这对刚开始的新人有所帮助，或者坚持一些看似如此明显的事情。

干杯！

【讨论】：

【参考方案5】：

所以，我也遇到了非常相似的事情。一切正常，除了 Chrome [版本 78.0.3904.108 (Official Build) (64-bit)]。

当我取出

所以我花了很多时间挖掘并发现您可以在

【讨论】：

我可以报告同样的问题。我在提交事件处理程序期间禁用了按钮，以防止重复提交。我还可以报告我在 onsubmit 期间禁用了它，因此提到的修复（而不是 onclick，使用 onsubmit）不适合我。我已经添加了自己的答案。【参考方案6】：

<button> 和 <input> 是两个不同的标签。如果您想提交按钮值，请使用<input> 标签。

【讨论】：

不幸的是，这并不能解决问题，它会产生相同的结果:( 您好，迈克，我遇到了您的问题。我想知道您为什么使用 jquery 提交表单？如果您不使用 jQuery 直接提交表单，您将获得提交按钮的值。但是，如果您借助 javascript，它不会提交按钮值。我正在使用 jQuery 提交表单，因为我在表单中有多个提交按钮，我想在提交之前更改表单操作 - 取决于单击哪个按钮。好的...那么我建议您设置一个隐藏字段并根据单击的按钮覆盖其值。然后您可以轻松识别在服务器端按下了哪个按钮。按钮元素在功能上与 input[type="submit"] 相同，只是它们使用更丰富的标记呈现。【参考方案7】：

同意 Vins，我可能会使用 <input>。

您使用<button> 而不是<input> 有什么特别的原因吗？我通常更喜欢<button>（允许我添加图标和图像），但我相信浏览器之间在如何解释值方面存在差异......

根据~~w3schools~~Mozilla Developer Network，部分浏览器会提交value属性，而IE7等其他浏览器会错误提交标签之间的文字。

【讨论】：

如果您确实需要 <button> 来显示，您可以使用 JS 点击处理程序来解决该问题，该处理程序在隐藏字段中设置适当的值... 将按钮更改为输入也不起作用，仍然没有提交。隐藏字段已提交，因此我可能不得不使用此解决方法选项-> 单击按钮，将隐藏字段设置为适当的值，然后提交表单，使用隐藏字段进行处理。我只是想知道是否有更好的解决方案？我将不再引用 w3schools。我将不再引用 w3schools。我将不再提及 w3schools。【参考方案8】：

尝试像这样通过捕获隐藏的输入来发送按钮作为提交。

PHP：

<?php
    if(isset($_POST['btname']))
        echo $_POST['btname'];
    
 ?>

和html：

<form method="POST" action="" id="formname" name="formname">
<input name="btname" id="btname" type="hidden" />
<button onclick="document.formname.submit()" value="Submit">Send</button>
</form>

【讨论】：

【参考方案9】：

您要发布多少个值？

我不确定您的问题是否已解决。没有提到的一件事是您可能已经超出了您的 php max_input_vars 限制。

当你超过这个限制时，Php 是静默的，所以你必须检查警告日志，或者这样检查：

1。计算 POST 数组值。 var_dump($_POST); 中的脚本（在安全的生产沙箱环境中）会做得最好，因为您可以查看最终值输出以了解 POST 数组“切断”的位置。

2。接下来，运行一个脚本以使用函数输出 php 信息：phpinfo()。检查“max_input_vars”的值。

3。如果 POST 数组计数 == "max_input_vars" 值，那么您已经超出了限制。

在您的情况下，提交输入可能会稍后包含在 POST 中。

要在 php.ini 中编辑值（在本例中为 5000），请添加或编辑以下行：max_input_vars = 5000

【讨论】：

【参考方案10】：