javascript - フォームの送信後、htmlボタンは無効な状態のままです

Question

私の以下のコードで。fa1からまでの id の div でラップされた合計 8 つのテキストボックスがありますfa8。

デフォルトで fa1 と fa2 が表示されるように設定されています
追加\削除ボタン（addfaおよびremovefa）を使用して他のdivを追加および削除し、入力要素を使用してその（デフォルト値3）hiddenを使用してカウントを追跡しますvalue
すべての非表示の div (つまりcountfa= 9) が表示されると追加ボタンが無効になり、3 つ以上のテキストボックスがあると削除ボタンが有効になります (つまりcountfa、値 4 以上) 。
fa3 から fa8 に設定しdisplay:none、上記の add \ remove id を使用してそれらを表示します
フォーム送信後にユーザーが入力したデータに沿ってテキストボックスを保持する必要があります。

私が直面している問題: 非表示の入力要素に 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 フィドルでは、フォーム送信後に追加ボタンが機能しません。しかし、実際のサイトでは問題なく動作していることがわかります。削除ボタンがまだ機能しない

score 1 · Accepted Answer

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();
});

score 0 · Accepted Answer

必要なことは、2 つ以上の入力ボックスが表示可能かどうかを確認するドキュメント準備チェックを行うことです。その場合は、disabled 属性を削除してください。問題は、フォームを送信すると、html がリセットされ、削除ボタンが無効に設定されていることです。

javascript - フォームの送信後、htmlボタンは無効な状態のままです

2 に答える 2

Related

Reference