CODEWITHSUNDEEP
javascriptbutton
user1952814
user1952814

Reputation:

Javascript diasabling button and re-enabling it again

I need help with javascript-php buttons.

Flowchart: 

BWAT = Button with another text-----------------ˇ

            click            counts         BWAT.    click   PHP funct.
 ENABLED ------> DISABLED X SEC ---------> ENABLED -------->MyFunction()
  ^                                                               |
  |                                                               |
  |_______________________________________________________________|
  1. Button which is enabled.
  2. When user clicks on it, it is disabled for x secs. (var sec / $sec)
  3. After sec counting is over, it is enabled again with another button name.
  4. When user clicks on it, it runs function.
  5. After clicking and running function, it starts again with first enabled button.

It's like:

Cut tree -> Cutting, 10 secs left -> Collect wood (adds xp & item to db)
  ^                                        |
  |________________________________________|

I need only js part, I'll make PHP function myself. Yes I tried to find solution but I couldn't find good solution.

Upvotes: 0

Views: 143

Answers (4)

Stuart
Stuart

Reputation: 9858

Without using jquery: (jsfiddle)

var myButton = document.getElementById('myButton'),
  delay = 3;
myButton.onclick = function () {
  myButton.value = 'Please wait';
  myButton.disabled = true;
  setTimeout(function () {
    myButton.value = 'Now click again';
    myButton.disabled = false;
    myButton.onclick = function () {
      asyncRequest('myPHPfunction', function () {
        myButton.value = 'Click here';
      });
    };
  }, delay * 1000);
};

function asyncRequest(url, func) {
  // asynchronously call your PHP function and carry out function when it's done
}

I'm assuming you already have something like asyncRequest that uses XMLHttpRequest to call a PHP page then calls a function when it's finished.

Alternatively, since the above starts to get messy and difficult to read, you can instead name all of the functions (instead of using anonymous functions) and group them into an object. (jsfiddle)

var delay = 3;
function MyButton() {
  var el = document.getElementById('myButton');
  function set(value, click) {
    el.value = value;
    el.onclick = click;
    el.disabled = click ? false : true;
  }
  function init() {
    set('Click here', wait);
  }
  function wait() {
    set('Please wait', null);
    setTimeout(waitReclick, delay * 1000);
  }
  function waitReclick() {
    set('Now click again', waitPHP);
  }
  function waitPHP() {
    set('Running the PHP', null);
    asyncRequest('myPHPFunction', init);
  }
  init();
}
new MyButton();

function asyncRequest(url, func) {
  // asynchronously call your PHP function and carry out function when it's done
  func();
}

Upvotes: 1

John Dvorak
John Dvorak

Reputation: 27277

Since you'll be doing AJAX calls, I'll go ahead and suggest the jQuery library - and use it for DOM traversal as well.

To wait some time, use the setTimeout javascript function, which takes as a callback the event that should happen after said delay.

To talk to the server, you can use the jQuery $.ajax method or one of the more specific ones. Note that talking to the server takes some time, so be prepared to wait. JQuery will call your callback(s) when it receives a successful response from the server (or immediately, if you attach the callback after the AJAX has completed - which is possible since jQuery 1.5 or so)

You'll need to store the alternative name somewhere. I'll suggest to store it with the button as a data attribute:

<input id="cut-tree" type="button"
   data-text-before="Cut tree"
   data-text-delay="Cutting tree, please wait"
   data-text-after="Collect Wood"
   value="Cut tree"
/>

jQuery has a method of retrieving the data attributes easily: elem.data("textBefore"); you can use camelCase or hyphen-case here.

If you don't want to detach and attach event handlers, you need to have a stateful handler:

var state = "before";
var $button = $("#cut-tree");
$button.click(function(){
  switch(state){
    case "before":
      state = "wait";
      $button.val($button.data("textDelay"))
       .attr("disabled", "disabled");
      setTimeout(function(){
        state = "after";
        $button.val($button.data("textAfter"))
         .removeAttr("disabled");
      }, 10000); //10000ms = 10s
      break;
    case "after":
      state = "wait"
      // change the text here as well?
      $.post("/ajax.php", {user: user, action: "addWood"})
       .done(function(){
        state="before";
        $button.val($button.data("textBefore"));
      });
      break;
    //case "wait": break;
  }
});

Upvotes: 0

Hui Zheng
Hui Zheng

Reputation: 10224

function setTimeout is what you need. Assume you're using jQuery, here's the sample code:

$('btn_selector').click(function() {
    var $btn = $(this);
    $btn.attr('disabled', true); // disable the button
    setTimeout(function(){
           $btn.attr("name", "Cutting"); // change button's name
           $btn.removeAttr('disabled');  // reenable the button
           $btn.click(function() { // add button's listener here
             // PHP-related function here
           });
        }, 10000); // 10 sec later              
     });
}

Upvotes: 1

user1846747
user1846747

Reputation:

You can use jquery functions to do that... something like this....

$('#your_btn_id').click(function() {
    $('#your_btn_id').attr('disabled', True);
});

if you want it to disable for some set of time, then try using setTimeout() function...

setTimeout(function(){$("your_btn_id").attr("disabled", True);},2000);

Upvotes: 0

Related Questions