Publishing System Settings Logout Login Register
Using AJAX to submit a form
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on February 1st, 2007
18901 views
PHP Coding
The only thing you need to have and I'm not explaining is a function to get the AJAX xml.
If you don't have it heres the one I use:
[code]
function getXhttp ( )
{
    var ajax_request;
   
    if (  window.ActiveXObject  )  {
        var mSoftVersions = [
            'MSXML2.DOMDocument.5.0',
            'MSXML2.DOMDocument.4.0',
            'MSXML2.DOMDocument.3.0',
            'MSXML2.DOMDocument.2.0',
            'MSXML2.DOMDocument',
            'Microsoft.XmlDom',
            'Msxml2.XMLHTTP',
            'Microsoft.XMLHTTP'
        ];
       
        for (  i=0; i<mSoftVersions.length; i++  )  {
            try {
                ajax_request = new ActiveXObject (  mSoftVersions[i]  );
            }  catch (  e  )  {    }
        }
    }  else if (  !ajax_request && typeof XMLHttpRequest != 'undefined'  )  {
        try {
            ajax_request = new XMLHttpRequest;
        }  catch (  e  )  {    }
    }  else if (  !ajax_request && window.createRequest  )  {
        try {
            ajax_request = window.createRequest;
        }  catch (  e  )  {    }
    }  else  {
        ajax_request = false;
    }
   
    return ajax_request;
}[/code]


Okay, now that, that's out of the way, sending a request with AJAX using POST is a lot easier than it seems.
First you declare a function like.. add news or something:

function add_news ( )
{
    //...
}


You set up your AJAX Request var and test to see if its available.

function add_news ( )
{
    var xml = getXhttp( );
    if ( !xml )
       return false; //Usually you alert something but I don't :d

    //.. other stuff
}



So what we've done so far is set the variable xml to the function.
Then tested the variable wheter its false, if it is, it will return false and end the add_news(); function.
The next part is to change the content-type of the page to submit the form.

function add_news ( )
{
    var xml = getXhttp( );
    if ( !xml )
       return false; //Usually you alert something but I don't :d

    xml.open('POST', 'post_news.php');
    xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}



The only thing left to do is send the form data, so what you want to do is put your fields in variables and send them.

function add_news ( )
{
    var xml = getXhttp( );
    if ( !xml )
       return false; //Usually you alert something but I don't :d

    xml.open('POST', 'post_news.php');
    xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   
    var title = document.getElementById('news_title').value;
    var content = document.getElementById('news_content').value;

    //CHECKS DONE HERE.

    xml.send('news_title=' + title + '&news_content=' + content);

    //ANYTHING EXTRA IS ADDED HERE.
}


Now in post_news.php you need to:
      
  • Connect to database
  •   
  • Insert news

so post_news.php:
<?php
mysql_connect('localhost', 'username', 'password');
mysql_select_db('database');

$news_title = $_POST['news_title'];
$news_content = $_POST['news_content'];
$news_content = nl2br($news_content);

$query = mysql_query("insert into `newstable` ( `title`, `content` ) values (
    '{$news_title}',
    '{$news_content}'
);");

mysql_close();
?>


Basic shit.
<3
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send


This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top