I have 2 buttons. I want to detect if the previous button clicked then on 2nd button click it should display some data otherwise if user is directly clicking on the second button, it should display an alert(please click the previous button first). I have tried to do so but not able to detect whether the 1st button is clicked or not :-(

HTML

<input type="button" id="btn1" value="button1"></input>
<input type="button" id="btn2" value="button2"></input>

JavaScript

       $('#btn1').click(function(){
           alert('Button 1 Clicked');
        });

        $('#btn2').click(function(event) {
            var inputButton = document.getElementsByTagName('input');
            var $target = $(event.target);
            if( $target.is(inputButton[1]) ) {
                alert("Please click the 1st Button first");
            } else{
                alert('Button 2 Clicked');
            }
        });

I have 2 buttons. I want to detect if the previous button clicked then on 2nd button click it should display some data otherwise if user is directly clicking on the second button, it should display an alert(please click the previous button first). I have tried to do so but not able to detect whether the 1st button is clicked or not :-(

HTML

<input type="button" id="btn1" value="button1"></input>
<input type="button" id="btn2" value="button2"></input>

JavaScript

       $('#btn1').click(function(){
           alert('Button 1 Clicked');
        });

        $('#btn2').click(function(event) {
            var inputButton = document.getElementsByTagName('input');
            var $target = $(event.target);
            if( $target.is(inputButton[1]) ) {
                alert("Please click the 1st Button first");
            } else{
                alert('Button 2 Clicked');
            }
        });

• javascript
• jquery

Share Improve this question Follow asked Aug 17, 2013 at 20:11 user2663401user2663401 1

• Couldn't you just set a flag when the first button is clicked and then check for it on clicking the second button? – j08691 Commented Aug 17, 2013 at 20:15

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

EDIT: I chose not to use a variable, because there's not really much reason to use one. Avoiding unnecessary scope pollution, and whatnot.

HTML

<button id="btn1">First Button</button>
<button id="btn2">Second Button</button

JavaScript

$(document).ready(function() {
    $('#btn1').on('click', function() {
        alert('Button 1 clicked');

        $('#btn2').data('btn1-clicked', true);
    });

    $('#btn2').on('click', function() {
        var el = $(this);

        if (el.data('btn1-clicked')) {
            alert('Button 2 clicked');
        } else {
            alert('Please click the 1st button first');
        }
    })
});

You could use this, creating a variable to store a true/false related to the first button:

var btn_clicked = false;
$('#btn1').click(function () {
    btn_clicked = true;
    alert('Button 1 Clicked');
});

$('#btn2').click(function (event) {
    var inputButton = document.getElementsByTagName('input');
    var $target = $(event.target);
    if (!btn_clicked) {
        alert("Please click the 1st Button first");
    } else {
        alert('Button 2 Clicked');
    }
});

Demo here

Try this one define a global variable to track the click of first button

   var buttonclicked=false;
   $('#btn1').click(function(){
   buttonclicked=true;
       alert('Button 1 Clicked');
    });

    $('#btn2').click(function(event) {

      if(!buttonclicked){
     alert("please click button1 first")
      }else{
        var inputButton = document.getElementsByTagName('input');
        var $target = $(event.target);
        if( $target.is(inputButton[1]) ) {
            alert("Please click the 1st Button first");
        } else{
            alert('Button 2 Clicked');
        }

    }
    });

I think you can put the second button function in the first one.

$('#btn1').click(function(){
       alert('Button 1 Clicked');
    $('#btn2').click(function(event) {
        var inputButton = document.getElementsByTagName('input');
        var $target = $(event.target);
           alert('Button 2 Clicked');
        }
    });
  });

You then also won't need the check in the second button.

Try to set a flag

var firstButtonClicked;
$('#btn1').click(function(){
           firstButtonClicked = true;
           alert('Button 1 Clicked');
        });

check firstButtonClicked in second button click.