为什么“onclick”后在不同浏览器中的效果不同答案

【问题标题】：why different effect in differnt browser after "onclick"为什么“onclick”后在不同浏览器中的效果不同
【发布时间】：2014-01-16 02:57:32
【问题描述】：

我想在页面加载时启用 btn1 并禁用 btn2。当我在 txtbox1 中输入值时，单击 btn1 时，应禁用 btn1 并启用 btn2。如果我点击 btn2，那么 btn2 也应该被禁用。

$value= $_POST['tb1'.$id];
echo '<form name="f1" method="POST" action="">';
echo '<input type="text" id="txtbox1'.$id.'" name="tb1'.$id.'" value="'.$value.'" />';
echo '<input type="submit" id="btn1'.$id.'" name = "btnstart'.$id.'" value="START" onClick="document.getElementById(\'btn2'.$id.'\').disabled=false;this.disabled=true;"/><input type="submit" id="btn2'.$id.'" name = "btnend'.$id.'" value="End" onClick="this.disabled=true;" disabled/>';
echo '</form>';

if ( isset( $_POST['tb1'.$id] ) ) {
echo $value;
}

当我使用 Chrome 时，我可以做上面的按钮效果，但是我无法获取 txtbox1 的值。当我使用IE和Firefox时，我可以得到txtbox1的值，但是按钮效果不是我想要的。也就是说，我在txtbox1中输入值，然后只点击btn1，然后它会自动启用btn2，然后将两者都禁用，然后回到原来的状态（btn1启用，btn2禁用）。

如何解决这个问题？

【问题讨论】：

您的代码第 5 行有错字。
修正错字谢谢
@Daedalus 你能帮帮我吗？
echo 'testing value"; - 你的报价不匹配。
它只是回显一些文本。

标签： javascript php

【解决方案1】：

由于您有动态按钮名称，最好不要触摸它们来禁用/启用您想要的功能：

使用 jquery：

$(document).ready(function () {

 /*Operations on the 1st button click */
    $('#form').children("input[type='submit']:first").click(function () {
        $(this).attr("disabled", "disabled"); /*disable the 1st button */
        $('#form').children("input[type='submit']").eq(1).removeAttr("disabled"); /*enable the 2nd button */
    });

 /*Operations on the 2nd button click */
   $('#form').children("input[type='submit']").eq(1).click(function () {
        $(this).attr("disabled", "disabled");

    });
});

另外：为您的表单提供一个 id，例如：

echo '<form name="f1" id="form" method="POST" action="">';
 /* check the form id tag ^^ here*/

basic demo here 但是您将无法看到其中的全部功能！

【讨论】：

所以我不再需要 onclick 了吗？只是<input type="submit" id="btn1'.$vid.'" name = "btnstart'.$vid.'" value="START"> ?
@user3118482 ：另外，请确保在您的 html 的 head 中的代码顶部添加 jquery 文件
@user3118482 ：如果你不明白任何部分......我还在这里，你可以问！ :D
两个按钮在页面加载时仍然启用
让我们continue this discussion in chat

【解决方案2】：

永远不要这样写代码，这会让调试很痛苦，只需创建一个script 标签并像这样处理那里的所有内容，这里的重点是setAttribute 和removeAttribute：

<?php
// your server side code
// finish declaring your variables like
$input_id = 'an_id';
$input_value = 'some_value';
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>testing</title>

    </head>
    <body>
        <form name="f1" method="POST">
            <input type="text" id="txtbox1<?php echo $input_id; ?>" name="tb1<?php echo $input_id; ?>" value="<?php echo $input_value; ?>" />
            <input type="button" id="btn1<?php echo $input_id; ?>" name="btnstart<?php echo $input_id; ?>" value="START" />
            <input type="button" id="btn2<?php echo $input_id; ?>" name="btnend<?php echo $input_id; ?>" value="End" disabled="disabled"/>
        </form>
        <script type="text/javascript">
            btn1 = document.getElementById('btn1<?php echo $input_id; ?>');
            btn2 = document.getElementById('btn2<?php echo $input_id; ?>');
            btn1.onclick = function() {
                console.log(this);
                btn1.setAttribute("disabled","disabled");
                btn2.removeAttribute("disabled");
                return false;
            };
        </script>
    </body>
</html>

【讨论】：