Question

我想在页面加载时启用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 enable，btn2 disable）。

如何解决这个问题？

Answer 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 但你不能看到它的全部功能!!

Answer 2

从不编写这样的代码，这会使调试变得像痛苦，只需制作一个script代码并处理所有内容，这里的重点是setAttribute和removeAttribute：< / p>

<?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>

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

2 个答案: