javascript variable value not updating with new one after a html form submit

Question

I have a 8 textbox in my html form wrapped with div ids fa1 to fa8. two are visible by default and 6 are hidden. I am using a two buttons addfa and removefa to show and hide the divs.I need to keep the div count after form submit and I am using below html to update the value in html (by default it is 3 and if I display a hidden div it will change to 4..)

html code:

<div class="add_remove_column">
<?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> 
</div>

javascript for add button:

function AddNewFa() 
    {
        var facount = parseInt($('#countfa').val(),9) ;
        if( facount < 9)
            {
                facount = facount+1;

                for(i=3;i<9;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");}

    }

As per the javascript if the facount value is 4 and above it suppose to remove the disabled attribute from the removefa button.

I see if I select additional one div, the countfa changing to 4 after form submit, but the removefa button still disabled. It suppose to be in enabled state, what is going wrong here ?

Have you tried logging the value of facount just before the if loop gets executed? Is it having the expected value? — Harry
– Harry, Commented Oct 6, 2013 at 12:35
With the change that Arun has mentioned in his answer, the JS seems to be working fine. Maybe there is some other problem. Is your code hosted somewhere so that I can have a look at it? — Harry
– Harry, Commented Oct 6, 2013 at 13:11
@ Harry : I am having issue to setup a fidle or this. I just added a javascript echo as innterhtml to see if the javascript getting variable value after form submit \ page refresh, but I see it is not. Only after I pressing the button the script is executing. I have added a `window.onload = function ()1 with Arun's code to see if the variable getting the valur..but not.. — acr
– acr, Commented Oct 6, 2013 at 14:07
Should I move this discussion to a chat? I think seeing your full code would help. If not a fiddle, maybe you can just upload your file somewhere? — Harry
– Harry, Commented Oct 6, 2013 at 14:26

Arun P Johny · Accepted Answer · 2013-10-06 12:19:12Z

1

You need to check for greater than or equals to. Also need to use .prop() to set disabled property

if (facount >= 4) {
    $('#removefa').prop('disabled', false);
}

or try

$('#removefa').prop('disabled', facount < 4);

answered Oct 6, 2013 at 12:19

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

acr Over a year ago

I tried both the method..but I still see it is in disabled state

Collectives™ on Stack Overflow

javascript variable value not updating with new one after a html form submit

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related