transfer value of textbox to php variable - php

Question

Hi I am creating a wordpress plugin and i am a little bit stack here. there's text box number 1 which is the order number and number 2 which is the order name. This is what i want. If the customer enters a number in textbox number 1 which is order number, the value he or she entered will check into the database and get the corresponding order name of that order number. Its realtime. No need to submit before it appears. Everytime they input something it will immediate check to the database and display it in text box number 2(order name). I research this and try using ajax in wordpress but i dont know how to use. Thanks.

Answer 1

Here's some boilerplate code to get you started....
<script type="text/javascript" charset="utf-8">
var req;
function handler_orderNumberField_onchange(fld) {
var text = fld.value;
if (text.length == 8) {
queryForOrderName(text);
}
}
function queryForOrderName(orderNumber) {
document.getElementById('orderNameField').value = "Please wait..."
req = new XMLHttpRequest();
var url = "http://www.mydomain.com/getordername.php?ordernumber=" + orderNumber;
req.onreadystatechange = function() {
var field = document.getElementById('orderNameField');
var rs = this.readyState;
var status = this.status;
if (rs == 4 && status == 200) {
field.value = req.responseText;
}
};
req.ontimeout = function() {
document.getElementById('orderNameField').value = 'Timeout.';
}
req.timeout = 10000;
req.open("GET", url, true);
req.send();
}
</script>
<p>Order Number: <input type="text" name="orderNumber" value="" id="orderNumberField" onchange="handler_orderNumberField_onchange(this)"></p>
<p>Order Name: <input type="text" name="orderName" value="" id="orderNameField"></p>
Note that you need to implement a getordername.php script yourself; example:
<?php
$ordernr = (int) $_GET["ordernumber"];
$result = sprintf("Testorder - Order Number %d", $ordernr);
header("Content-type: text/plain; charset=UTF-8");
echo $result;
exit;
?>