表单提交后html按钮保持禁用状态答案

【问题标题】：html button stay in disabled status after a form submit表单提交后html按钮保持禁用状态
【发布时间】：2013-10-14 03:18:20
【问题描述】：

在我下面的代码中。总共有 8 个用 div 包裹的文本框，id 从 fa1 到 fa8。

fa1 和 fa2 设置为默认显示
使用添加\删除按钮（addfa 和removefa）添加和删除其他 div，还使用hidden 输入元素跟踪计数，使用其value（默认值 3）
一旦显示所有隐藏的 div（即countfa = 9），添加按钮将被禁用，一旦有 3 个或更多文本框（即countfa 值 4 或更多），删除按钮将启用
fa3 到 fa8 设置为 display:none 并使用上面提到的 add \ remove ids 来显示它们
我需要将文本框与用户在表单提交后输入的数据保持一致。

我面临的问题：我正在使用隐藏输入元素的 php 代码来更新其value depednds 在表单提交后用户的 div id 选择。我看到即使提交表单后有 3 个或更多文本框，删除按钮仍处于禁用状态。我检查了隐藏输入 value 是否正在使用新值进行更新，并且我看到它正在更新，但删除按钮仍将处于禁用状态。知道为什么它没有显示在启用状态。

我的html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<form  id="main" name="main" action="#text" method="post" > 

<div id="fa1">
<input  class="textbox" id="tbox1" name="tbox1" type="text" value="<?php if(isset($_POST['tbox1'])) { echo htmlentities ($_POST['tbox1']); }?>" /></span>
</div>

<div id="fa2">
<input  class="textbox" id="tbox2" name="tbox2" type="text" value="<?php if(isset($_POST['tbox2'])) { echo htmlentities ($_POST['tbox2']); }?>" /></span>
</div>

<div id="fa3" style="<?php if(empty($_POST['tbox3'])) { echo "display:none;"; } else { echo "display:block;"; } ?>">
<input  class="textbox" id="tbox3" name="tbox3" type="text" value="<?php if(isset($_POST['tbox3'])) { echo htmlentities ($_POST['tbox3']); }?>" /></span>
</div>

<div id="fa4" style="<?php if(empty($_POST['tbox4'])) { echo "display:none;"; } else { echo "display:block;"; } ?>">
<input  class="textbox" id="tbox4" name="tbox4" type="text" value="<?php if(isset($_POST['tbox4'])) { echo htmlentities ($_POST['tbox4']); }?>" /></span>
</div>

<div id="fa5" style="<?php if(empty($_POST['tbox5'])) { echo "display:none;"; } else { echo "display:block;"; } ?>">
<input  class="textbox" id="tbox5" name="tbox5" type="text" value="<?php if(isset($_POST['tbox5'])) { echo htmlentities ($_POST['tbox5']); }?>" /></span>
</div>

<div id="fa6" style="<?php if(empty($_POST['tbox6'])) { echo "display:none;"; } else { echo "display:block;"; } ?>">
<input  class="textbox" id="tbox6" name="tbox6" type="text" value="<?php if(isset($_POST['tbox6'])) { echo htmlentities ($_POST['tbox6']); }?>" /></span>
</div>

<div id="fa7" style="<?php if(empty($_POST['tbox7'])) { echo "display:none;"; } else { echo "display:block;"; } ?>">
<input  class="textbox" id="tbox7" name="tbox7" type="text" value="<?php if(isset($_POST['tbox7'])) { echo htmlentities ($_POST['tbox7']); }?>" /></span>
</div>

<div id="fa8" style="<?php if(empty($_POST['tbox8'])) { echo "display:none;"; } else { echo "display:block;"; } ?>">
<input  class="textbox" id="tbox8" name="tbox8" type="text" value="<?php if(isset($_POST['tbox8'])) { echo htmlentities ($_POST['tbox8']); }?>" /></span>
</div>

<?php
 if(isset($_POST['countfa'])){  
 $valueid = $_POST['countfa'];
 ?>
<input  type="hidden" id="countfa" name="countfa" value="<?= $valueid ?>" readonly>
<?php
 }else{
  ?>

<input  type="hidden" id="countfa" name="countfa" value="3" readonly> 
 <?php
 }
?> 
<button type="button" onClick="AddNewFa();" id="addfa" > + Add New FA </button>
<button  type="button" onClick="RemoveNewFa();" id="removefa" disabled="disabled"> - Remove FA</button> 

<input  id="generate" type="submit"  name="script" value="create my symcli script" />

</form> 
</body>
</html>

还有我的 javascript 代码：

function AddNewFa() 
{
var facount = parseInt($('#countfa').val(),9) ;
document.getElementById("test1").innerHTML = facount;
    if( facount < 10)
{
        facount = facount+1;
        document.getElementById("test2").innerHTML = facount;
            for(i=3;i<10;i++)
                {
                    if( i<facount )
                        $('#fa'+i).slideDown("fast");
                    else
                        $('#fa'+i).slideUp("fast"); 
                }
    $('#countfa').val(facount);  
}
    if( facount >=9 )
    { $('#addfa').attr('disabled','disabled');} 
    if( facount >=4 )
    { $('#removefa').removeAttr("disabled");}
} 


function RemoveNewFa() 
{
var facount = parseInt($('#countfa').val(),10) ;
document.getElementById("test3").innerHTML = facount;
    if( facount >3)
{
        facount = facount-1;
        document.getElementById("test4").innerHTML = facount;
            for(i=3;i<10;i++)
                {
                    if( i<facount )
                        $('#fa'+i).slideDown("fast");
                    else
                        $('#fa'+i).slideUp("fast");                 
                }
                $('#countfa').val(facount); 
            }        
        if( facount <=3 )
            { $('#removefa').attr('disabled','disabled');} 
        if( facount <=8 )
            { $('#addfa').removeAttr("disabled");       }   
    }

我为此设置了PHP FIDDLE 注意：在 php fiddle 中，表单提交后添加按钮不起作用。但我在实际网站上看到它工作正常。删除按钮仍然不起作用

【问题讨论】：

您说他们在提交表单后仍然处于禁用状态 - 您是否没有错过以下 HTML 部分中的 PHP 条件，以便在显示页面时实际删除“禁用”部分？ <button type="button" onClick="RemoveNewFa();" id="removefa" disabled="disabled"> - Remove FA</button>

标签： javascript php jquery html

【解决方案1】：

我相信您的按钮之所以按原样显示是因为您必须启用/禁用它们的代码位于每个项目的 click 处理程序中。

您应该移动以下代码：

if( facount >=9 )
{ $('#addfa').attr('disabled','disabled');} 
if( facount >=4 )
{ $('#removefa').removeAttr("disabled");}

进入一个单独的函数，即

function CheckButtons() {
    var facount = parseInt($('#countfa').val(),9) ;
    if( facount >=9 )
    { $('#addfa').attr('disabled','disabled');} 
    if( facount >=4 )
    { $('#removefa').removeAttr("disabled");}
    if( facount <=3 )
    { $('#removefa').attr('disabled','disabled');} 
    if( facount <=8 )
    { $('#addfa').removeAttr("disabled");} 
}

并在表单提交运行后调用此函数。您还应该从单击处理程序中调用此函数（以最小化复制代码）

$(document).ready(function() {
    CheckButtons();
});

【讨论】：

我试过这个方法..但是之后两个按钮都不起作用了。
您是否还在表单提交时重新填充了 facount 变量？如果不是，那么它检查的值将不等于您看到的项目数。
我还根据您的代码更正了 CheckButtons() 函数的代码。
是的。我正在使用 php 更新上面代码中提到的 facount 值
很抱歉这是我的错字。我已将该代码修改为正确 ($(document).ready(function() {CheckButtons();});)

【解决方案2】：

您需要做的是准备好文档检查，看看您是否有超过 2 个可查看的输入框。如果这样做，请删除 disabled 属性。问题是当您提交表单时，您的 html 会被重置，并且删除按钮已被设置为禁用。

【讨论】：