3 Buttons - alert() which was pressed

[slj90]

So say I have a page with 3 buttons on:

<button id="1" onclick="clickFunction()">1 </button>
<button id="2" onclick="clickFunction()">2</button>
<button id="3" onclick="clickFunction()">3</button>

How do I then create an alert displaying which was pressed? e.g:
 

<script>
function clickFunction() { alert("Button X Was Pressed"); }
</script>

I know in this case I could create 3 different functions but I want to use it for a page with a lot more than 3.

Thanks,

 

[maxxd]

Don't tie the click to the actual DOM element directly.

<button id='button_1' class='button'>1</button>
<button id='button_1' class='button'>1</button>
<button id='button_1' class='button'>1</button>

<script>
$('.button').click(function(){
	var whichClicked = $(this).attr('id');
	alert('Button ' + whichClicked + ' was clicked!');
});
</script>

You could also skip the class and use the element selector directly if either there are no other buttons on the page or you want all the buttons to react the same.

Edited November 13, 2014 by maxxd

[slj90]

Thanks.

 

How would I hide the specific button?

 

I've tried

$("#whichClicked").hide();

[kicken]

$('.button').click(function(){
    $(this).hide();
});

Within the callback this is a reference to the element that the event was triggered on. In this case, it is a reference to the button that was clicked.

 

Pass it as the argument to $() to get a jquery object and then you can call .hide() to hide it.

[slj90]

$('.button').click(function(){
    $(this).hide();
});

Within the callback this is a reference to the element that the event was triggered on. In this case, it is a reference to the button that was clicked.

 

Pass it as the argument to $() to get a jquery object and then you can call .hide() to hide it.

 

 

Thanks it's working. However, after the page load I have to click the first button twice for it to be hidden, after that it's just once. What could be causing this?

 

 

<script>

$('.button').click(function(){
	var v = $(this).attr('id');
	

 $.post('../action/frienddecision.php',{id:v},function(d){


$('.button').click(function(){
    $(this).hide();
});


  });

});

</script>

[maxxd]

<script>
$('.button').click(function(){
    var v = $(this).attr('id');
    $.post('../action/frienddecision.php',{id:v},function(d){
        $('#' + v).hide();
    });
});
</script>

This is untested, but it should work. You'd put another .click() handler within your success function for the AJAX call. So the function will run, but it won't do anything until the button is clicked after the target script is run.

 

You'll also want to check the contents of d to make sure that the function actually processed correctly - the success function in the AJAX object will run as long as the function didn't throw an error, regardless whether or not the process within frienddecision.php actually succeeded or not. So, when the php processes, output a JSON encoded array with an index of 'success' and a boolean indicating whether or not the php did it's job correctly, then you can check that in the success function with something like

if(d.success == true){
	//hide the button
}else{
	//pop-up an alert or something
}

Edited November 21, 2014 by maxxd

[slj90]

<script>
$('.button').click(function(){
    var v = $(this).attr('id');
    $.post('../action/frienddecision.php',{id:v},function(d){
        $('#' + v).hide();
    });
});
</script>

This is untested, but it should work. You'd put another .click() handler within your success function for the AJAX call. So the function will run, but it won't do anything until the button is clicked after the target script is run.

 

You'll also want to check the contents of d to make sure that the function actually processed correctly - the success function in the AJAX object will run as long as the function didn't throw an error, regardless whether or not the process within frienddecision.php actually succeeded or not. So, when the php processes, output a JSON encoded array with an index of 'success' and a boolean indicating whether or not the php did it's job correctly, then you can check that in the success function with something like

if(d.success == true){
	//hide the button
}else{
	//pop-up an alert or something
}

Thank you very much the code you supplied is working now. I have also done some testing.

The way the page is set up is that there is an 'Accept' button and a 'Decline' button.

 

How would I make it so both buttons disapear when only one is clicked?

 

This is how the buttons are coded (within an echo):

<button id='" . $id . "a'  class='button'> Accept </button>
<br />
<button id='" . $id . "d'  class='button'> Decline</button>

I have used PHP to get the last character to detemine whether 'Accept' or 'Decline' was pressed.

[maxxd]

Replace the line

$('#' + v).hide();

with

$('#' + v + 'a, #' + v + 'd' ).hide();

Edited November 23, 2014 by maxxd