1

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

Improve this question
1
  • you say they remain disabled after a form submit - are you not missing a PHP condition in the following HTML part to actually remove the "disabled" part when the page is being displayed? <button type="button" onClick="RemoveNewFa();" id="removefa" disabled="disabled"> - Remove FA</button> Commented Oct 7, 2013 at 14:05

2 Answers 2

Reset to default
1

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(); });
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I tried this method.. but after that both buttons are not working.
Do you also re-populate the facount variable on form submit? If not then the value it is checking against will not be equivelant to the number of items you see.
I have also corrected my code for the CheckButtons() function to be correct based on your code.
Yes. I am using the php to update the facount value as mentioned in above code
I'm sorry that was a typo on my part. I've amended that code to be correct ($(document).ready(function() {CheckButtons();});)
|
0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.