Javascript function post and call php script

Question

In html I have several buttons which are automatically made for each object in the database with a particular status. Each button gets its own id.

echo '<Button id="button'.$counter.'" onClick="clickedbutton('.$counter.', '.$row['OrderID'].')" >'."<center>".$row['OrderID']."<br>"."</center>".'</Button>';

The button calls the javascript function clickedbutton and gives it the number of the button and the orderid of that button.

function clickedbutton(buttonid,orderid){
buttonid = "button" + buttonid;

}

This function loads in the number of the button and makes it button0, button1 etc. The orderid is also succesfully passed through. Now in the function I want to call an external php script, but also orderid must be passed through to the script.

<?php
    //connect to database
    include_once('mysql_connect.php');

    // Select database
    mysql_select_db("test") or die(mysql_error());

    // SQL query
    $strSQL = "update orders set OrderStatus = 'In Progress' where OrderID = '" + orderid + "'";

    mysql_close();
?>

I know about the mysqli protection and all, I will adjust that later. Now I want to focus on the question above, how to call and pass through the variable orderid to the phpscript.

Answer 1

EDIT 2018

Yeah, I am still alive. You can use the fetch API instead of jQuery. It is widely supported except (guess who?...) IE 11 and below but there is a polyfill for that. Enjoy modern coding.

Support for fetch API

OLD ANSWER

You will have to use AJAX.

Javascript alone cannot reach a php script. You will have to make a request, pass the variable to PHP, evaluate it and return a result. If you'are using jQuery sending an ajax request is fairly simple:

$.ajax({
    data: 'orderid=' + your_order_id,
    url: 'url_where_php_is_located.php',
    method: 'POST', // or GET
    success: function(msg) {
        alert(msg);
    }
});

and your php script should get the order id like:

echo $_POST['orderid'];

The output will return as a string to the success function.

EDIT

You can also use the shorthand functions:

$.get('target_url', { key: 'value1', key2: 'value2' }).done(function(data) {
    alert(data);
});

// or eventually $.post instead of $.get

Answer 2

Assuming you don't want to use AJAX, you can do something like this in your clickedbutton function:

window.location.replace('path/to/page.php?orderid=' + orderid);

and then in your page.php

"...where OrderID = '" . $_GET('orderid') . "'";

(note the dots to join strings)

Answer 3

By using Ajax.

function clickedbutton(buttonid,orderid){

    $.post("page.php", { buttonid: buttonid })
    .done(function(data) {
        alert("Data Loaded: " + data);
    });

}

In php you get it with $_POST.

//[..] previous php code
$strSQL = "update orders set OrderStatus = 'In Progress' where OrderID = '" + $_POST['buttonid'] + "'";
//[..] rest of php code

Watch out for SQL injection. Don't take this advice as written.