1

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

  1. fa1 和 fa2 默认设置为显示

  2. 使用 add \ remove 按钮（addfa和removefa）添加和删除其他 div 并使用hidden输入元素跟踪计数value（默认值 3）

  3. 一旦显示所有隐藏的 div（即countfa= 9），添加按钮就会被禁用，一旦有 3 个或更多文本框（即countfa值 4 或更多） ，删除按钮就会启用

  4. fa3 到 fa8 设置为display:none并使用上述添加\删除 id 来显示它们

  5. 我需要将文本框与用户在表单提交后输入的数据一起保存。

我面临的问题：我正在使用隐藏输入元素的 php 代码value在表单提交后根据用户的 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 中，添加按钮在表单提交后不起作用。但我在实际网站上看到它工作正常。删除按钮仍然不起作用

4

2 回答 2

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();
});
于 2013-10-07T14:04:19.723 回答
0

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

于 2013-10-07T14:04:36.403 回答