2

I've created an AjaxMethod (a very general method, and I'm doing ASP.NET MVC) to get the ID of the item the user clicks on, to add them into the site cart (by adding them to the cookies). The problem is that my Ajax method has one parameter which is used as the ID so I'm creating buttons whose id attribute are the actual product ID and their values are Add to Cart. I've also created a single hidden submit button whose id is the same name as the parameter name in Ajax method and its value depends on the ID of the clicked button.

Click Button ID --Passed into--> Value of submit button

My problem is, I wanna know that is there any way to write a JavaScript/JQuery method and use it in OnClientCLick in the buttons to: get the id of the caller button and then pass it to the value of the submit button.

For example:

// I do not know the ID of the caller
// this method is used like: <button id="1111" OnClientClick="Test()"></button>
function Test() {
    var ID = this.id // this did not work
    $("#SubmitButton").val(ID)
    $("SubmitButton").trigger("click")
}
JAX
  • 1,540
  • 3
  • 15
  • 32
  • how are you binding your handler to the event? – kinakuta Sep 29 '14 at 20:54
  • @kinakuta: over OnClientClick – JAX Sep 29 '14 at 20:54
  • have a look at this question: http://stackoverflow.com/questions/3239598/how-can-i-get-the-id-of-an-element-using-jquery –  Sep 29 '14 at 20:55
  • @Phaeze: That is a different problem, my IDs are unknown! – JAX Sep 29 '14 at 20:57
  • Show your (relevant) HTML, and the JavaScript. We need context to offer you a so,Union. What, for example, is `this`? – David Thomas Sep 29 '14 at 21:00
  • @DavidThomas: the example of the HTML Button is in the code as comment, the actual ajax method is irreverent to the question, and `this` means the Caller, which I don't know how to detect – JAX Sep 29 '14 at 21:01
  • Without seeing all of the javascript it isn't absoutely clear what `this` is, but if I had to guess it will be `window` –  Sep 29 '14 at 21:18
  • @PierreOverFlow Yes I'm serious, http://www.quirksmode.org/js/this.html –  Sep 29 '14 at 21:21
  • @Phaeze: you already answered my question! – JAX Sep 29 '14 at 21:23

2 Answers2

10

First off there is a problem with your function, this does not actually refer to the button in that context.

You need to define the function to match the standard event handler signature, something like:

function Test(event)

Then you can get the Element's ID from the event object as Dmitry showed in his answer: 

function Test(event) {
    var ID = event.id 
    $("#SubmitButton").val(ID);
    $("SubmitButton").trigger("click");
}

And as you discovered you need to pass in the value for event in your binding

<button id="1111" OnClick="Test(this);"></button>

Alternatively you can use jQuery to bind the button using something other than the ID:

//set it up like this:  <button id="1111" class="SomeClassToIdentifyTheButton"></button>
$(".SomeClassToIdentifyTheButton").click(function(){
    var ID = $(this).attr('id');
    $("#SubmitButton").val(ID);
    $("SubmitButton").trigger("click");
});
  • good point, but maybe the author of this question used function scope binding who knows :) – Dmitry Matveev Sep 29 '14 at 21:04
  • Being from a c# background, why does the method take `event` as parameter but it detects the id based on `e`, I'm no JS expert but maybe it's `event e`, anyway not working – JAX Sep 29 '14 at 21:28
  • @PierreOverFlow yup that was my mistake, I changed it to event to make it more clear but missed it in that one spot. –  Sep 29 '14 at 21:28
  • one question, when I'm writing the `event` in there, my Visual Studio does not recognize it as a built-in something or key word. So what is that then? is something built-in javaScript? maybe I can figure out how to get it to work if you help me with that. – JAX Sep 29 '14 at 21:31
  • @PierreOverFlow it is not a built in, it is simply a name for the passed in variable, you could change it to `bob` for all javascript cares. If that method isn't working and you are using jQuery I would suggest giving my second sample a shot, I am more confident that it will work, it has been a very long time since I've wired up js events in an asp page. –  Sep 29 '14 at 21:36
  • yeah I just figured that out myself, the problem with your answer were two things (working now): it can be simply `event.id` and you did not tell it had to be called like `'OnClick="Test(this);"'`; – JAX Sep 29 '14 at 21:41
  • @PierreOverFlow Ahh, I will update the answer to include that as well then. –  Sep 29 '14 at 21:42
  • Thank you very much by the way, you taught me something and that is a precious thing :) – JAX Sep 29 '14 at 21:43
-1

You can use jQuery .click method to get the id of the clicked element.

$("#SubmitButton").click(function(event) {
    alert(event.target.id);
});
Dmitry Matveev
  • 5,320
  • 1
  • 32
  • 43