Site Builder Studio

Setting Form Action in jQuery AJAX

In a jQuery AJAX call, we set the the url to which the AJAX will pass the data.

Here are three options.

1 > HTML action

Use the action url coded into the HTML form we’re processing:

url: $(this).attr('action');

2 > Relative URL in the jQuery

If the code is always going to live in the same folder, for instance if you’re building a site that will never be replicated in another layer folder on this or any other site, you can code in the relative url right there in the ajax call.

url: "form-handlers/process-my-form.php"

3 > Use Absolute Path by referencing PHP global variables

If we want to use an absolute path (useful for if our code will end up living in many places) we’re in luck.

Here’s a trick to set the url in the jQuery by using the value of PHP global variables, or any url variable we set up in PHP (such as $site_url).

First, store the PHP variable inside a div which is not displayed to visitors. For example:

<div id="root-url" style="display:none">
<?php echo "http://" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>
</div>

Then use jQuery to get the contents of the div with id root-url to build the form action as an absolute path in the jQuery AJAX call like so;

var root-url = $("#root-url").text();

Use the new root-url jQuery variable to build the absolute path of the form processing script –

url: root-url+"form-handlers/process-my-form.php"