CODEWITHSUNDEEP
javascriptphpjqueryhtml
acr
acr

Reputation: 1746

html button stay in disabled status after a form submit

In my below code. there are total 8 textboxes wrapped with divs, ids from fa1 to fa8.

  1. fa1 and fa2 are set to display by default

  2. using add \ remove buttons(addfa and removefa) to add and remove other divs and also using a hidden input element to track the count using its value(default value 3)

  3. Add button get disabled once it show all hidden div (that is at countfa = 9) and the remove buton get enabled once there is 3 or more textboxes (ie countfa value 4 or more )

  4. fa3 to fa8 set to display:none and using above mentioned add \ remove ids to display them

  5. I need to keep the textbox along data which entered by user after form submit.

Issue I am facing: I am using a php code for hidden input element to update its value depednds upon the user's div id selection after form submit. I see that eventhough there are 3 or more textboxes after form submit, the remove button keep in disabled state. I have checked whether the hidden input value is updating with the new value and i see it getting updated, but still the remove button will be disabled state. any idea why it not showing in enabled state.

My html code:

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

and my javascript code:

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

I have setup a PHP FIDDLE for this Note: In php fiddle the add button not functioning after form submit. But I see on actual site it working fine. remove button still not working

Upvotes: 1

Views: 1781

Answers (2)

Nunners
Nunners

Reputation: 3047

I believe the reason your buttons are displaying as they are is because the code you have to enable/disable them is placed within the click handlers of each of the items.

You should move the following code :

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

Into a seperate function, i.e.

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

And call this function after the submit of the form has run. You should also call this function from the click handlers (to minimise copied code)

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

Upvotes: 1

jhnlsn
jhnlsn

Reputation: 186

What you need to do is have a document ready check that looks to see if you have more than 2 input boxes viewable. If you do, remove the disabled attribute. The problem is that when you submit the form, your html is reset and the remove button has been set to disabled.

Upvotes: 0

Related Questions