Change the functionality of a button

Question

Currently I have a display where I have a button START, on click of this button the timer starts and it gets replaced by 2 buttons. these 2 buttons are submit and walkaway. on the submit of each of these buttons a script is run. on the click of submit button, test.php is initiated.

Everything is working fine, but there are few changes that i am not able to make

First

I wish to combine the start and submit button, i.e

a) on the click of start button, timer should start,

b) the 2 new buttons should appear and

c) the script test.php should run.

it would be nice if i could just change the text of start button to submit and keep the button same and run the above 3 functionalities on click of start button, however different aspects are also welcomed

Second

when the time of the timer reaches 0:00 it should get reset to its initial stage and the buttons should also get changed to their original state i.e

a) the 2 buttons should disappear and get replaced by start button

b) clock should show its initial value i.e 2:00

Part of js code. entire code @fiddle

/*******Code for the three buttons*********/
$(document).ready(function (){
        $("#startClock").click(function (){
                $("#startClock").fadeOut(function(){
$("#walkaway").fadeIn().delay(120000).fadeOut();
$("#submitamt").fadeIn().delay(120000).fadeOut(function(){
        $("#startClock").fadeIn();
        });
    })
});
});

/*******Code for running test.php script*********/
$(document).ready(function(){
$('#submitamt').click(function(){
    var txtbox = $('#txt').val();
    var hiddenTxt = $('#hidden').val();

        $.ajax({
            type:'post',
             url:'test.php',
            data:{txt:txtbox,hidden:hiddenTxt},
            cache:false,
            success: function(returndata){
                $('#proddisplay').html(returndata);
                console.log(returndata)
            }
        });
})
})

/*******Code for starting the clock*********/
$('#startClock').click(function () {
    var counter = 120;
    setInterval(function () {
        counter--;
        if (counter >= 0) {
            span = document.getElementById("count");
            span.innerHTML = '<span class="first_digit">' + parseInt(counter / 60) + '</span><span class="second_digit">:</span><span class="third_digit">' + parseInt((counter % 60) / 10) + '</span> <span class="fourth_digit">' + (counter % 60) % 10;
        }
        if (counter === 0) {
            alert('sorry, out of time');
            clearInterval(counter);
        }
    }, 1000);

});

Answer 1

Try this example (using different buttons rather than changing button's text):

var startClock;
var submitamt;
var walkaway;
var digits;

$(function() {
  startClock = $('#startClock').on('click', onStart);
  submitamt = $('#submitamt').on('click', onSubmit);
  walkaway = $('#walkaway').on('click', onWalkAway);
  digits = $('#count span');
  beforeStart();
});

var onStart = function(e) {
  startClock.fadeOut(function() {
    startTimer();
    submitamt.fadeIn(function() {
      submitamt.trigger('click'); // fire click event on submit
    });
    walkaway.fadeIn();
  });
};

var onSubmit = function(e) {
  var txtbox = $('#txt').val();
  var hiddenTxt = $('#hidden').val();
  $.ajax({
    type: 'post',
    url: 'test.php',
    data: {
      txt: txtbox,
      hidden: hiddenTxt
    },
    cache: false,
    success: function(returndata) {
      $('#proddisplay').html(returndata);
      console.log(returndata);
    },
    error: function() {
      console.error('Failed to process ajax !');
    }
  });
};

var onWalkAway = function(e) {
  console.log('onWalkAway ...');
};

var counter;
var timer;
var startTimer = function() {
  counter = 120;
  timer = null;
  timer = setInterval(ticker, 1000);
};

var beforeStart = function() {
  digits.eq(0).text('2');
  digits.eq(2).text('0');
  digits.eq(3).text('0');
};

var ticker = function() {
  counter--;
  var t = (counter / 60) | 0; // it is round off
  digits.eq(0).text(t);
  t = ((counter % 60) / 10) | 0;
  digits.eq(2).text(t);
  t = (counter % 60) % 10;
  digits.eq(3).text(t);
  if (!counter) {
    clearInterval(timer);
    alert('Time out !');
    resetView();
  }
};

var resetView = function() {
  walkaway.fadeOut();
  submitamt.fadeOut(function() {
    beforeStart();
    startClock.fadeIn();
  });
};

.first_digit
 {
 width:60px; 
 font-size:40px; 
 padding:4px;
 color: #CCC; 
 text-shadow: 0px 1px 2px #000; 
 text-align: center; 
 background-color: #333;
 border-radius: 6px; 
 }
 
.second_digit
 {
  color: #333; 
  font-size:40px; 
 }

.third_digit
 {
 width:60px; 
 font-size:40px; 
 padding:4px;
 color: #CCC; 
 text-shadow: 0px 1px 2px #000; 
 text-align: center; 
 background-color: #333;
 border-radius: 6px; 
 }
 
.fourth_digit
 {
 width:60px; 
 font-size:40px; 
 padding:4px;
 color: #CCC; 
 text-shadow: 0px 1px 2px #000; 
 text-align: center; 
 background-color: #333;
 border-radius: 6px; 
 }
 
.countdown
{
text-align:center; 
margin-left:50px;
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="countdown">
 <span id="count">
  <span class="first_digit">2</span>
  <span class="second_digit">:</span>
  <span class="third_digit">0</span>
  <span class="fourth_digit">0</span>
 </span> 
</div>
<button class="rightbtn" type="button" id="startClock">Start</button>
<button class="rightbtn" type="button" id="submitamt" style="display:none; ">Submit</button>
<button class="botleftbtn" type="button" id="walkaway" style="display:none">Walk Away</button>

Answer 2

How about this?

Please refer HTML in demo. Have made some changes

$('.rightbtn').on('click', function(){
    var btn=$(this);
    if(btn.data('type')==='start')
    {
        btn.text('Submit').data('type','submit');
        $("#walkaway").fadeIn();
        count2=setInterval(function () {
        counter--;
        if (counter >= 0) {
            span = document.getElementById("count");
            span.innerHTML = '<span class="first_digit">' + parseInt(counter / 60) + '</span><span class="second_digit">:</span><span class="third_digit">' + parseInt((counter % 60) / 10) + '</span> <span class="fourth_digit">' + (counter % 60) % 10;
        }
        if (counter === 0) {
            alert('sorry, out of time');
            clearInterval(counter);
            btn.text('Start').data('type','start');
            $("#walkaway").fadeOut();
        }
        }, 1000);
    }
    else
    {
        clearTimeout(count);
        counter=0;
        clearInterval(counter);
        clearInterval(count2);
        btn.text('Start').data('type','start');
        $("#walkaway").fadeOut();
        span = document.getElementById("count");
        span.innerHTML = '<span class="first_digit">2</span><span class="second_digit">:</span><span class="third_digit">0</span> <span class="fourth_digit">0';
        var txtbox = $('#txt').val();
        var hiddenTxt = $('#hidden').val();
       $.ajax({
            type:'post',
             url:'test.php',
            data:{txt:txtbox,hidden:hiddenTxt},
            cache:false,
            success: function(returndata){
                $('#proddisplay').html(returndata);
                console.log(returndata)
            }
        });

    }
});

Answer 3

This will merge you start and submit button ....

$('#startClock').click(function () {
var counter = 120;
setInterval(function () {
    counter--;
    if (counter >= 0) {
        span = document.getElementById("count");
        span.innerHTML = '<span class="first_digit">' + parseInt(counter / 60) + '</span><span class="second_digit">:</span><span class="third_digit">' + parseInt((counter % 60) / 10) + '</span> <span class="fourth_digit">' + (counter % 60) % 10;
    }
    if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
    }
}, 1000);

$('#submitamt').click();

});

this is like appending the submit function at the end of start function. I hope this will help