Ajax execute php without refresh - how to set variables?

Question

I have a very small php script which in which I have a few buttons and no form. When I press one button, I want a small php script to be executed based on the id that I'm trying to send using ajax.

Those buttons look like this:

<button onclick="deleteTask()" class="task" data-id="1">Task 1</button>
<button onclick="deleteTask()" class="task" data-id="2">Task 3</button>
<button onclick="deleteTask()" class="task" data-id="3">Task 4</button>
...

And I have this ajax function:

function deleteTask() {
    var id=$(this).data("id");
    var dataString='id='+ id;

    $.ajax({
        type: "POST",
        url: "test.php",
        data: dataString,
        cache: false,
        success:function(html) {
            alert(html);
        }
    });
}

The PHP script that is executed is just a test:

$id = $_POST['id'];
echo "Response: " . $id;

And the result is that alert box with a response of:

Response: undefined

What I want is to get that data-id of the button that was pressed as a response. If I press button 1 with data-id="1" I want to get a response of "1".

hey Dan! Thanks for this but it gives a notificitaion of undefined index now :( — emma
– emma, Commented Mar 22, 2018 at 23:18

PajuranCodes · Accepted Answer · 2018-03-22 23:49:52Z

As @Andrew correctly said, $(this) is the window object.

So, in order to be able to reference the button object inside the function, you must pass it as function argument, e.g. as this in each function call:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
    function deleteTask(button) {
        var id = $(button).data("id");

        $.ajax({
            type: "POST",
            url: "test.php",
            data: {
                'id': id
            },
            cache: false,
            success: function (html) {
                alert(html);
            }
        });
    }
</script>

<button type="button" id="button1" name="button1" onclick="deleteTask(this);" class="task" data-id="1">Task 1</button>
<button type="button" id="button2" name="button2" onclick="deleteTask(this);" class="task" data-id="2">Task 3</button>
<button type="button" id="button3" name="button3" onclick="deleteTask(this);" class="task" data-id="3">Task 4</button>

Andrew Chart · Accepted Answer · 2018-03-22 23:41:22Z

1

In this context, $(this) is the window object.

You may be thinking of using $(this) off the back of a jQuery event handler. When you do something like $('#myElement').click(function() {...});, $(this) will represent the element that has been clicked.

Is there a reason you cannot do something like this?

<button onclick="deleteTask(1)">Task 1</button>
<button onclick="deleteTask(3)">Task 3</button>

<script>
function deleteTask(id) {
    var dataString='id='+ id;

    ...
}
</script>

answered Mar 22, 2018 at 23:41

Andrew Chart

6556 silver badges11 bronze badges

1 Comment

emma Over a year ago

the reason for not doing this was my limited knowledge :D thank you so much!!!!! it woeked <3 <3 <3

Collectives™ on Stack Overflow

Ajax execute php without refresh - how to set variables?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related