Disable/Enable button using onClick

[sowmyati]

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.

stuff  = "<form name=" + tagName + " action=common/setitem.php method=POST target=_self>";
            stuff += "<input type=hidden name=PSET value=LEAF>";
            stuff += "<input type=hidden name=" + tagID + " value=" + Reset + " >";
    if (model == romit)
     {
       stuff += "<input type=submit id=submit_id value=\"Reset\" onclick=\"return do_reset();\">";
        setTimeout("document.getElementById('submit_id').disabled=false", 120000);
      }
     stuff += "</form>";
writeSingleTableRow(stuff, "");
          }
        }
        writeBodyTail();
function do_reset()
{
    var update;
    update = confirm(' takes 2 mins please wait...');
    if(update)
    {
        document.getElementById('submit_id').disabled = 'true';
         return true;
     }
     else
          return false;
}

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

function do_reset()
{
    var update;
    update = confirm(' takes 2 mins please wait...');
    if(update)
    {
         return true;
      }
 else
     return false;
}

is working just fine as the true value is added to stuff and reset happens.

Also,
tried to change with this

stuff += "<input type=submit id=submit_id value=\"Reset Integrated Lights-Out 2\" onclick=\"this.disabled='true';return true;\">";

or

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.

[acoder]

true and false are booleans and should not be strings.

[Frinavale]

It should be:

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.

[sowmyati]

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.

[Frinavale]

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

[swatib2k101]

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

[acoder]

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.

[swatib2k101]

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:

else if  (RibModel == GromitXE)
              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?');\">";
            else
              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?');\">";
 
            stuff += "</form>";
 
            writeSingleTableRow(stuff, "");

Thanks

[Frinavale]

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

[swatib2k101]

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.

 
stuff  = "<form name=" + tagName + " action=common/setitem.php method=POST target=_self>"; 
            stuff += "<input type=hidden name=PSET value=LEAF>"; 
            stuff += "<input type=hidden name=" + tagID + " value=" + Reset + " >"; 
if (model == romit) 
     { 
         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?');\">";
 
      } 
     stuff += "</form>"; 
writeSingleTableRow(stuff, ""); 
          } 
        } 
        writeBodyTail(); 
 
 

[Frinavale]

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:

function confirmSubmit(buttonClickedElement){
  if confirm('Data update takes 2 min. and a data collection interval - Do you really want to reset?')
  {
    var theForm =  document.getElementById("formID");
    if(theForm){
      theForm.submit();
      if(buttonClickedElement){
        buttonClickedElement.disabled="disabled";
      }
    }
 
  return false;
}

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:

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