AJAX with jQuery, send variable to data

Question

Can I give jQuery a variable with the .ajax method?

Now I have something like this:
<button onclick="sendQuery()">

function sendQuery(){
    $.ajax({
        type: "GET",
        url: "action.php",
        async: false,
        data: {id: 560, 
               message: "Some message to you"  
    }
}

But is it possible to do like this way:
<button onclick="sendQuery(560, 'Some message to you')">

function sendQuery(myId, myMessage){
    $.ajax({
        type: "GET",
        url: "action.php",
        async: false,
        data: {id: myId,
               message: myMessage  
    }
}

There is not a problem with that. The only thing I noticed is that in your function declaration you are inverting the order of the arguments. It should be `function sendQuery(myId, myMessage)` — Stefano Dalpiaz, May 08 '14 at 01:35
you could add a `value` or `data-` attribute to the button with the message in it. then in your first `sendQuery()` function add `var message = $(this).val() // or $(this).data('attribute')` on the lines before the ajax call — Jake, May 08 '14 at 01:37
Please don't use `async: false` if you can possibly help it. JavaScript executes in a single thread, so your synchronous code degrades the user's experience and even other scripts on the page. To answer your question: sure, that works. — Dave Ward, May 08 '14 at 01:41

score 3 · Accepted Answer · edited May 23 '17 at 12:11

I would add the message to a data- attribute on the button and then use that within your sendQuery() function:

<button onclick="sendQuery()" data-mymessage="Some message to you">

then:

    function sendQuery(){
        var myMessage = $(this).data("mymessage");
        $.ajax({
            type: "GET",
            url: "action.php",
            async: false,
            data: {id: 560, 
                   message: myMessage  
        }
    }

Really, you shouldn't be using the onclick attribute for the button anyway.. it is considered a bad practice

The ideal way to do it would be more like:

<button id="myButton" data-mymessage="Some message to you" data-myID="560">

then in the JS:

    $('#myButton').click(function(){
        var myMessage = $(this).data("mymessage");
        var myID = $(this).data("myID");
                $.ajax({
                    type: "GET",
                    url: "action.php",
                    async: false,
                    data: {id: myID, 
                           message: myMessage  
                }
    });

The id can be replaced with a class instead if you want to use the same functionality from multiple buttons (re-use the code) just change the # in the JS to a . and use the class="" attribute on all required buttons.

The above requires jQuery, but it looks like you already have included that if your $.ajax.. is working correctly..

@Jake's way is [unobtrusive](http://en.wikipedia.org/wiki/Unobtrusive_JavaScript). The HTML markup would define structure without behavior. The JavaScript code's job then would be to define behavior separately. Many would argue that this is a cleaner approach. — Chris Peters, May 08 '14 at 01:48
I added a slight improvement towards a better method. As mentioned, this is an unobtrusive method and can result in cleaner and more re usable code. — Jake, May 08 '14 at 01:52

AJAX with jQuery, send variable to data

1 Answers1