AJAX and variables for web form - PHP

In the first part of this three-part series, you learned the guiding concepts and design for building a PHP web application to count back links from unique domains using the Yahoo Site Explorer API. In this part, we will illustrate, in detail, how to do the programming for the PHP Ajax web form and the validation script.

TABLE OF CONTENTS:

By: Codex-M

Poor Best

Rating:

/ 7

January 25, 2010

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

The form variables (name and ID) are the following:

domainurl = (Using text field) This is the user domain URL input to the form.

Options = (Using radio buttons) This covers the result options. The value is 1 if the user is interested in getting the results for the backlinks pointing to the entire site, not just to one specific URL. Otherwise, it is assigned 2.

Captcha = (Using text field) This is the user captcha input value.

Submitting values to PHP via AJAX means that the page does not need to be reloaded or refreshed. The JavaScript code that will communicate to PHP is the following, which is placed above the HTML web form discussed earlier (at the <head> tag, where most JavaScripts are located).

<html>

<head>

<title>Count Unique Back Links using Yahoo API</title>

function sendRequest() {

new Ajax.Request("/countuniquelinks/yahooapiajax.php",

{

method: 'post',

parameters: 'domainurl='+$F('domainurl')+'&options1='+$F('options1')+'&options2='+$F('options2')+'&captcha='+$F('captcha'),

onComplete: showResponse

});

}

function showResponse(req){

$('show').innerHTML= req.responseText;

}

</script>

</head>

<body>

Using the AJAX Prototype method, the form variables are passed as parameters as shown above. PHP provides the results via the showResponse function, which will be shown on the same page as the web form (and below it):

Source code:

</body>

</html>

The id="show" is an indicator that AJAX will look to send the results back as provided by PHP, according to this query:

function showResponse(req){

$('show').innerHTML= req.responseText;

}

Other things to note about the AJAX query provided above is the path to the PHP script:

new Ajax.Request("/countuniquelinks/yahooapiajax.php",

When the submit button is pressed, without reloading the page, AJAX will send variables to the PHP script "yahooapiajax.php" in the background, which will process the variables, validate them and then query Yahoo's inlinks API.

For more details on the principles of building a PHP AJAX web form using prototype, check the article at the link.

Next: PHP Script Preliminary Form Processing >>