CODEWITHSUNDEEP
javascriptjqueryhtml
Charles Xavier
Charles Xavier

Reputation: 1045

Pressing two button in jquery will display this action

I'm basically creating a filter button. If I press button1 {this will happen} If press button2 {this will happen}

but if I press button1 and then button2 {this has to happen}

This is the code I have so far. Thanks!

$(document).ready(function() {
       if($('#button1').click(function() &&   $('#button2').click(function()){
           //perform actions

    });

Upvotes: 4

Views: 86

Answers (4)

sergdenisov
sergdenisov

Reputation: 8572

You could save the data about the clicking state using jQuery .data(), then use it in other handlers. Something like this:

$('.js-button-1').on('click', function() {
    $(this).data('clicked', true);
    $('.js-result').text('Button 1 is clicked');
});
  
$('.js-button-2').on('click', function() {
    if ($('.js-button-1').data('clicked')) {
        $('.js-result').text('Button 1 + Button 2 are clicked');
    } else {
        $('.js-result').text('Button 2 is clicked');
    }
});

$('.js-button-clear').on('click', function() {
    $('.js-button-1').data('clicked', false);
    $('.js-result').text('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="js-button-1">Button 1</button>
<button class="js-button-2">Button 2</button>
<button class="js-button-clear">Clear</button>

<div>
    <span>Result: </span>
    <span class="js-result"></span>
</div>

Upvotes: 1

Ryad Boubaker
Ryad Boubaker

Reputation: 1501

Try this using the data-attribute

$('#button1').click(function(){
   alert('button one clicked');
   $(this).data('lastClicked',true);
 });

 $('#button2').click(function(){
   if(!!$('#button1').data('lastClicked')){
     alert('Button 1 then button 2')
   }else{
     alert('button two clicked');
   }
 });
$("body > *").not("#button1").click(function(){
  $('#button1').data('lastClicked',false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">Button 1 </button>
<button id="button2"> Button 2</button>
<button id="button3"> Button 3</button>

As you would notice if there is any click that is not on #button1 then the next click will not be considered as button1 --> button2

Upvotes: 1

L L
L L

Reputation: 1470

$(document).ready(function() {
    $('#button1').click(function(){
           //perform regular button1 actions
           var btn1clicked=true;
    });
    $('#button2').click(function(){
           //perform regular button2 actions
           if(btn1clicked){
           //perform button2 clicked after button1 was clicked action
           }
    });

});

You need to set a variable after the first button is clicked. Then when the second button is clicked, you check if the variable is set and if it is, you perform the special action.

Upvotes: 1

Huangism
Huangism

Reputation: 16438

Here is the logic

button 1 handler {
    set var to indicate click
    do what you need
}

button 2 handler {
    check var  to see if button 1 is clicked
    do whatever you need based on the var check
}

This only handles button 1 click followed by 2, but you get the idea and should be able to figure out if button 2 is clicked then 1

Upvotes: 2

Related Questions