I want to send multiple data from on click function to jquery function like this code.

When I click on my button I get [object Object]undefined] in alert box

Code :

$(function() {
  $("#button").click(function myf(data1, data2) {
    alert(data1 + data2);
  });
});

<script src=".1.1/jquery.min.js"></script>
<a href="#" id="button" onclick="myf('hello','word');">click</a>

I want to send multiple data from on click function to jquery function like this code.

When I click on my button I get [object Object]undefined] in alert box

Code :

$(function() {
  $("#button").click(function myf(data1, data2) {
    alert(data1 + data2);
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="button" onclick="myf('hello','word');">click</a>

How can I do it?

• javascript
• jquery

• 1 You're binding two click event listeners! One using .click() and the other using onclick attribute! – ibrahim mahrir Commented Apr 5, 2017 at 13:56
• 1 You're registering 2 event listeners, and there's no point in passing the data from the HTML if you're binding the events on the element's id. The id must be unique, so you might as well code the data into the function. – Cerbrus Commented Apr 5, 2017 at 13:57
• What's wrong with the javascript listener you've added? Why do you need a jQuery one also? – ControlAltDel Commented Apr 5, 2017 at 13:57
• I have not received any valid result from any answer yet – mody Commented Apr 5, 2017 at 14:09

4 Answers 4

There's absolutely no point in passing the data from HTML.

You're binding that function to the button's id. That id must be unique, so there's only ever that single bination of values.

Just use this:

$(function() {
  $("#button").click(function() {
    alert('hello' + 'word');
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="button">click</a>

Or, if you want to send the data from the HTML, you're going to have to do something like this:

function mf (data1, data2){
    alert(data1 + data2);
}

<a href="#" id="button" onclick="mf('hello','word');">click</a>

Or, if you want to use jQuery, you're going to have to do something convoluted like this:

$("#button").click(function() {
    var data = $(this).data('params').split(',');
    alert(data[0] + data[1]);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="button" data-params='hello,word'>click</a>

You are using 2 event that will both try to listen to the onclick event you can remove one of them like so :

<script>
$(function() {
  $("#button").click(function() {
  alert('hello' + 'word');
   });
});
</script>

An id is always unique so you can put your value directly into the function.

if you really want to use jquery you can use this:

$("#button").click(function() {
var data = $(this).data('params').split('|');
alert(data[0] + data[1]);
});

And this for the html :

<script 
src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script>
<a href="#" id="button" data-params='hello|world'>click</a>

Following code should do the trick:

function myf(data1, data2) {
  alert(data1 + data2);
  return false;
}

<a id="button" href="#" onclick="myf('hello', 'word');">click me</a>

return false; is to prevent default action.

As said you have already a listener, I don't see the point of adding an other one.

<button onclick="myf('hello','word')">click</button>

<script>
function myf(data1,data2){
  alert(data1+data2);
}
</script>

https://jsfiddle/wnd6ovkf/

And the jquery version:

<button data1= "value" data2= "value2" class="btn">click</button>
<button data1= "ohtervalue" data2= "othervalue2" class="btn">click</button>

<script>
$(".btn").click(function() {
  alert(this.getAttribute("data1") + " " + this.getAttribute("data2"));
});
</script>

https://jsfiddle/wnd6ovkf/6/