By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,603 Members | 1,617 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,603 IT Pros & Developers. It's quick & easy.

Disable/Enable button using onClick

P: 2
HI All,

I am new to javascript. I have snippet wherein i am giving a brief note on what i am trying to do. In the below have a variable by name stuff. trying to reset the page. Part of the code which does reset is attached below.

there is a reset button which will reset the connection and it takes two min for data loading during which the reset button has to be disabled and later after two mins it should enable the button for the user.

Expand|Select|Wrap|Line Numbers
  1. stuff  = "<form name=" + tagName + " action=common/setitem.php method=POST target=_self>";
  2.             stuff += "<input type=hidden name=PSET value=LEAF>";
  3.             stuff += "<input type=hidden name=" + tagID + " value=" + Reset + " >";
  4.     if (model == romit)
  5.      {
  6.        stuff += "<input type=submit id=submit_id value=\"Reset\" onclick=\"return do_reset();\">";
  7.         setTimeout("document.getElementById('submit_id').disabled=false", 120000);
  8.       }
  9.      stuff += "</form>";
  10. writeSingleTableRow(stuff, "");
  11.           }
  12.         }
  13.         writeBodyTail();
  14. function do_reset()
  15. {
  16.     var update;
  17.     update = confirm(' takes 2 mins please wait...');
  18.     if(update)
  19.     {
  20.         document.getElementById('submit_id').disabled = 'true';
  21.          return true;
  22.      }
  23.      else
  24.           return false;
  25. }
part of the code have pasted here. whats happenenig is...

disable and enable part is not added to the stuff. Is thr any way of adding it to stuff. In this case its just disabling and enabling the reset button fine but actual reset is not happening.


instead of the above if just by doing this

Expand|Select|Wrap|Line Numbers
  1. function do_reset()
  2. {
  3.     var update;
  4.     update = confirm(' takes 2 mins please wait...');
  5.     if(update)
  6.     {
  7.          return true;
  8.       }
  9.  else
  10.      return false;
  11. }
is working just fine as the true value is added to stuff and reset happens.

Also,
tried to change with this

Expand|Select|Wrap|Line Numbers
  1. stuff += "<input type=submit id=submit_id value=\"Reset Integrated Lights-Out 2\" onclick=\"this.disabled='true';return true;\">";
or

Expand|Select|Wrap|Line Numbers
  1. stuff += "<input type=submit id=submit_id value=\"Reset Integrated Lights-Out 2\" onclick=\"document.getElementById('submit_id').disabled='true';return true;\">";
here it disables but the true value is not appended to variable stuff because of which reset is not happening.

Please suggest what needs to be done.
Sep 9 '09 #1
Share this Question
Share on Google+
10 Replies


acoder
Expert Mod 15k+
P: 16,027
true and false are booleans and should not be strings.
Sep 9 '09 #2

Frinavale
Expert Mod 5K+
P: 9,731
It should be:
Expand|Select|Wrap|Line Numbers
  1. stuff += "<input type=submit id=submit_id value=\"Reset Integrated Lights-Out 2\" onclick=\"this.disabled=true;return true;\">";
I have a feeling that you're running into problems when you disable the button before the submit happens....in which case the page wont submit. If this is the case, try using the timeOut() method.
Sep 9 '09 #3

P: 2
yes you are right i am facing a problem when i disble the button then try submitting the return value, the reset doesnt happens. I am also using the timeout function. However its not much useful.

My requirement is to disable the button for two mins, meanswhile the reset should happen. please sugest the way i can do this.
Sep 16 '09 #4

Frinavale
Expert Mod 5K+
P: 9,731
Consider leaving the buttons enabled but displaying a <div> over top of the content while the update is happening. Make the <div> transparent.

This will block them from using the controls either for the whole page or just the section over the buttons....
Sep 16 '09 #5

P: 4
For the same prob above, I have tried using div tag and making it transparent, after this code :

stuff += "<input type=submit value=\"Reset Integrated Lights-Out 2\" onclick=\"return confirm('Data update takes 2 min. and a data collection interval - Do you really want to reset?');\">";
<div........................./div>

But again the same problem.
Can you please provide the code snippet for this so that while resetting the submit button should be hidden/transparent.
Thanks
Dec 28 '09 #6

acoder
Expert Mod 15k+
P: 16,027
You can hide the button during the reset and then show it again once it's complete (style.display = 'none' to hide and 'block' to show). Alternatively, use the transparent div using the same technique.
Dec 30 '09 #7

P: 4
can you please post the full code after resetting using none and display.I tried doing it but messed up with this.Please reply.Its a kind of urgency for me.Thanks in anticipation.
My initial code looks like:

Expand|Select|Wrap|Line Numbers
  1. else if  (RibModel == GromitXE)
  2.               stuff += "<input type=submit value=\"Reset Integrated Lights-Out 3\" onclick=\"return confirm('Data update takes 2 min. and a data collection interval - Do you really want to reset?');\">";
  3.             else
  4.               stuff += "<input type=submit value=\"Reset Remote Insight\" onclick=\"return confirm('Data update takes 2 min. and a data collection interval - Do you really want to reset?');\">";
  5.  
  6.             stuff += "</form>";
  7.  
  8.             writeSingleTableRow(stuff, "");
Thanks
Mar 17 '10 #8

Frinavale
Expert Mod 5K+
P: 9,731
Your code doesn't really make sense in regards to your question.

The question is: How do I use display:none to hide the buttons and then reset them after the user confirms.

But in your code you are not using this technique at all.

I recommend that you start off by writing a JavaScript function that displays the confirm, retrieves the users response, and sets the styles of your buttons (or div) according to how the user responded. You would call this function during the (client side) onclick event for your button.

Do you know how to write a JavaScript function?

Do you know how to call a JavaScript function?

Do you know how to use JavaScript to retrieve an element (like a button or a div)?

Do you know how to set the style of the element?

Posting the full code answer would not help you if you don't understand these basic things and we should start there first.


-Frinny
Mar 17 '10 #9

P: 4
I appreciate for your efforts but the problem is I am naive in javascripting.So cant do or understand much.
The problem is when a user clicks on the submit button after selecting yes,the button should be disabled for 2 min,which is happening after using function but it is not getting updated on the server side (or say buffer is not updated).I am finding the solution for this.
Please look at the code once again.Hope now you got my problem.
Expand|Select|Wrap|Line Numbers
  1.  
  2. stuff  = "<form name=" + tagName + " action=common/setitem.php method=POST target=_self>"; 
  3.             stuff += "<input type=hidden name=PSET value=LEAF>"; 
  4.             stuff += "<input type=hidden name=" + tagID + " value=" + Reset + " >"; 
  5. if (model == romit) 
  6.      { 
  7.          stuff += "<input type=submit value=\"Reset Integrated Lights-Out 2\" onclick=\"return confirm('Data update takes 2 min. and a data collection interval - Do you really want to reset?');\">";
  8.  
  9.       } 
  10.      stuff += "</form>"; 
  11. writeSingleTableRow(stuff, ""); 
  12.           } 
  13.         } 
  14.         writeBodyTail(); 
  15.  
  16.  
Mar 18 '10 #10

Frinavale
Expert Mod 5K+
P: 9,731
It's probably because you are disabling the button before the submit action can take place.

Try writing a method that does the submit and then disables the button.

For example, the following method asks the user to confirm their action, if they agree it submits the form (using the form.submit() method and then disables the button:

Expand|Select|Wrap|Line Numbers
  1. function confirmSubmit(buttonClickedElement){
  2.   if confirm('Data update takes 2 min. and a data collection interval - Do you really want to reset?')
  3.   {
  4.     var theForm =  document.getElementById("formID");
  5.     if(theForm){
  6.       theForm.submit();
  7.       if(buttonClickedElement){
  8.         buttonClickedElement.disabled="disabled";
  9.       }
  10.     }
  11.  
  12.   return false;
  13. }
You would call this method during the onclick event for your button and you would pass this button "this" which refers to the button.

For example:
Expand|Select|Wrap|Line Numbers
  1. stuff += "<input type=submit value=\"Reset Integrated Lights-Out 2\" onclick=\"return confirmSubmit(this);\">";
The other thing you need to do to get this to work is to give the form element an ID so that you can use the document.getElementById() method to retrieve the element so that you can submit the form.
-Frinny
Mar 18 '10 #11

Post your reply

Sign in to post your reply or Sign up for a free account.