Jump to content

3 Buttons - alert() which was pressed


slj90
Go to solution Solved by maxxd,

Recommended Posts

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,

 

Link to comment
Share on other sites

  • Solution

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 by maxxd
Link to comment
Share on other sites

$('.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.

Link to comment
Share on other sites

$('.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>
Link to comment
Share on other sites

<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 by maxxd
Link to comment
Share on other sites

<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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.