AJAX: Passing Variable Along Specific Button Click

Question

I have two buttons where each button do the same function but one variable. I'm using ajax to handle some PHP. I'm thinking the problem is that the ajax is being run before the js function.

Do you have any solutions for passing a parameter along the specific button click?

$('.button').click(function(){      
    $.ajax({
        type: "POST",
        data: {
            userid: <?php echo $userid ?>,
            upgradePrice: price,
            resource: upgResource
        },
        url: "UpgradeResHandler.php",
        dataType: "json",
        async: true,
        beforeSend: function(){
            $(".ajaxTest").text("Trying to upgrade...");
        },
        success: function(data) {
            $(".ajaxTest").text(data.a);
            if (data.b == "true") {
                location.reload();
            }
        }
    }); 
});

function setResource(resource) {
    var upgResource = resource;
}

<input type="submit" class="button" name="upgGold" value="Upgrade" onclick="setResource('gold')" />
<input type="submit" class="button" name="upgMetal" value="Upgrade" onclick="setResource('metal')" />

all you need to do is just pass 'gold' and 'metal' as values in the value attribute. You already have a click event that fires the ajax. any reason you have a function to set the values? — mehany
– mehany, Commented Apr 11, 2015 at 0:02

imtheman · Accepted Answer · 2015-04-10 23:48:44Z

5

You can only have 1 onclick event handler per element. Try putting the ajax call inside of the function you are calling then get rid of the $('.button').click(); handler.

function setResource(resource) {
    var upgResource = resource;
    $.ajax({
        type: "POST",
        data: {
            userid: <?php echo $userid ?>,
            upgradePrice: price,
            resource: upgResource
        },
        url: "UpgradeResHandler.php",
        dataType: "json",
        async: true,
        beforeSend: function(){
            $(".ajaxTest").text("Trying to upgrade...");
        },
        success: function(data) {
            $(".ajaxTest").text(data.a);
            if (data.b == "true") {
                location.reload();
            }
        }
    }); 
}

answered Apr 10, 2015 at 23:48

imtheman

4,8631 gold badge32 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

babaorum · Accepted Answer · 2015-04-10 23:57:35Z

This is what is recommand you. Remove you're function setResource() and the onclick attribute on the inputs. And instead, just fill an attribute with the value you want to pass. Here I am using data-resource. You can access any jquery element attribute by using the .attr() jquery method. And in this watcher $(this) is the element you click on. So he will have the good value for the attribute. This method is saving you for a function and a variable assignation.

$('.button').click(function(){      
    $.ajax({
        type: "POST",
        data: {
            userid: <?php echo $userid ?>,
            upgradePrice: price,
            resource: $(this).attr('data-resource')
        },
        url: "UpgradeResHandler.php",
        dataType: "json",
        async: true,
        beforeSend: function(){
            $(".ajaxTest").text("Trying to upgrade...");
        },
        success: function(data) {
            $(".ajaxTest").text(data.a);
            if (data.b == "true") {
                location.reload();
            }
        }
    }); 
});

<input type="submit" class="button" name="upgGold" value="Upgrade" data-resource="gold" />
<input type="submit" class="button" name="upgMetal" value="Upgrade" data-resource="metal" />

In the case you prefer to keep your onclick and you're function, you can pass your ajax call into that function and remove the jquery watcher. the same job will be done. My method just use jQuery resources.

Pedro Silva · Accepted Answer · 2015-04-10 23:48:49Z

0

Maybe ajax execute them assyncronous and you have to call just the function. Have you tried using the code on the (.button).click() on the function setResource() ? Maybe that way it will work... Give me some feedback on the result

answered Apr 10, 2015 at 23:48

Pedro Silva

2632 silver badges17 bronze badges

Comments

bloodyKnuckles · Accepted Answer · 2015-04-11 00:06:54Z

In the jQuery ajax method, under data, change:

resource: upgResource

...to:

resource: $(this).attr('name')

And lose the setResource function, and both button onclick handlers.

Then either update your PHP script to handle the values "upgGold" and "upgMetal" instead of "gold" and "metal", OR change the button name attributes to "gold" and "metal".

JSFiddle me

All together:

$('.button').click(function(){      
    $.ajax({
        type: "POST",
        data: {
            userid: <?php echo $userid ?>,
            upgradePrice: price,
            resource: $(this).attr('name')
        },
        url: "UpgradeResHandler.php",
        dataType: "json",
        async: true,
        beforeSend: function(){
            $(".ajaxTest").text("Trying to upgrade...");
        },
        success: function(data) {
            $(".ajaxTest").text(data.a);
            if (data.b == "true") {
                location.reload();
            }
        }
    }); 
});

<input type="submit" class="button" name="upgGold" value="Upgrade" />
<input type="submit" class="button" name="upgMetal" value="Upgrade" />

Collectives™ on Stack Overflow

AJAX: Passing Variable Along Specific Button Click

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related