Home > Intermediate Scripts, Tutorials > Post Form To Self

Post Form To Self

December 29th, 2008 Leave a comment Go to comments

Using xajax to post a form to itself is same as posting any other form. Usually this simply requires the form action to be omitted, or given a path to itself. It is only when the form is to be submitted asychronously that the response is different. By submitting asychronously, the page does not need to be refreshed, and any reponse from the form is displayed.

<?php

/*** include the xajax library ***/
include 'xajax/xajax_core/xajax.inc.php';

/*** a new xajax object ***/
$xajax = new xajax();

/*** Register the function ***/
$xajax->registerFunction("myFunction");


function myFunction($string)
{
    if($string == 'wombat')
    {
        $content = 'Animal is a wombat';
        $color = 'green';
    }
    else
    {
        $content = 'Animal is not a wombat';
        $color = 'red';
    }

/***  A new xajaxResponse object ***/
$objResponse = new xajaxResponse();

/*** assign the innerHTML attribute of to whatever the new $content ***/
$objResponse->assign("element_id","innerHTML", $content);

/*** assign a color to the  element ***/
$objResponse->assign("element_id","style.color",$color);

/*** return the  xajaxResponse object ***/
return $objResponse;
}

/*** process the request ***/
$xajax->processRequest();

/*** assign the generated javascript to a variable ***/
$xajax_js = $xajax->getJavascript('/xajax');

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<title>PHPRO.ORG</title>
<?php
    echo $xajax_js;
?>
</head>
<body>
<form name="my_form" id="my_form" method="post">
<input type="text" name="animal_id" id="animal_id" />
<input type="button" onclick="xajax_myFunction(xajax.$('animal_id').value);" value="Check Animal" />
</form>
<div id="element_id">Please enter an animal</div>

</body>
</html>

Stepping through the above script, it starts off innocently enough by including the xajax library and creating a new xajax object and then a function named myFunction is registered. The myFunction function performs a simply comparison of the data sent to it from the form. The function simply tests if the text sent is the word ‘wombat’. If the the text matches, a message is created, and a color is set for the return text (green if it matches, red if it does not match).

When the string matching is resolved, a new response object is created. The magic happens in the next two lines of code.

<?php

/*** assign the innerHTML attribute of to whatever the new $content ***/
$objResponse->assign("element_id","innerHTML", $content);

/*** assign a color to the  element ***/
$objResponse->assign("element_id","style.color",$color);

In the above two lines of code, the content is assigned to the innerHTML of the element with the ID of element_id. In the second line the color of the text is assigned in the same manner. The response object when returned updates these asychronously.

Adding Effects

As was seen above, the magic happens within the response object for asychronous display. This functionality can be extended to call and external javascript. Here the scriptaculous library is used to create a fade effect using the xajax script method.

The xajax script method allows the plugging in of external libraries and to make calls to functions within them. This is an method called from the xajax response object. The whole script is reproduced there with the javascript includes in place in the document head and the xajax script call.

<?php

/*** include the xajax library ***/
include 'xajax/xajax_core/xajax.inc.php';

/*** a new xajax object ***/
$xajax = new xajax();

/*** Register the function ***/
$xajax->registerFunction("myFunction");


function myFunction($string)
{
    if($string == 'wombat')
    {
        $content = 'Animal is a wombat';
        $color = 'green';
    }
    else
    {
        $content = 'Animal is not a wombat';
        $color = 'red';
    }

/***  A new xajaxResponse object ***/
$objResponse = new xajaxResponse();

/*** assign the innerHTML attribute of to whatever the new $content ***/
$objResponse->assign("element_id","innerHTML", $content);
/*** assign a color to the  element ***/
$objResponse->assign("element_id","style.color",$color);

/*** apply and effect to the element_id ***/
$objResponse->script("new Effect.Opacity('element_id', { duration: 2.0, transition: Effect.Transitions.linear, from: 1.0, to: 0.5 });");


/*** return the  xajaxResponse object ***/
return $objResponse;
}

/*** process the request ***/
$xajax->processRequest();

/*** assign the generated javascript to a variable ***/
$xajax_js = $xajax->getJavascript('/xajax');

?>
<html>

<head>
<title>PHPRO.ORG</title>

<script src="scriptaculous/lib/prototype.js" type="text/javascript"> </script>
<script src="scriptaculous/src/scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>

<?php
    echo $xajax_js;
?>
</head>
<body>
<form name="my_form" id="my_form" method="post">
<input type="text" name="animal_id" id="animal_id" />
<input type="button" onclick="xajax_myFunction(xajax.$('animal_id').value);" value="Check Animal" />
</form>
<div id="element_id">Please enter an animal</div>

</body>
</html>

With the new changes in place, the call to the scriptaculous javascript library is completed and the fade effect is actioned when the script is called. Be sure to check the paths to the scriptaculous libraries in the HTML head. This is often a cause of the effect not working.

Thanks goes to PHPro for the script.

  1. avinash
    June 29th, 2009 at 09:09 | #1

    Good Article on Xajax..

    only a question..

    if suppose the instead of normal text if you have to return an HTML FORM in $content and after that validating the same using jquery or some js libs…

    what will be the ans?

  2. luv kumar
    August 4th, 2011 at 16:52 | #2

    cool

  1. No trackbacks yet.