Snippets

Home / Snippets / AJAX Sumbit form

AJAX Sumbit form

Snippet Menu

snippet |

revisions |

comments | Related Snippets

related |

Add to Favorites | Email

download | Print

print | Blog It

blog it

Fri. Jul. 20th, 2007 8:07 PM

1 of 1

ColdKeyboard

ajax | Form | Sumbit

1 comments

AJAX based submit form and use PHP to get results...

Very easy to use and understand, hope you will find it useful and easily edit it to fit your needs.

<html>

<head>

</head>

<script type="text/javascript" src="tw-sack.js"></script>

<script type="text/javascript">

var ajax = new sack();

function whenLoading(){

        var e = document.getElementById('replaceme'); 

        e.innerHTML = "<p>Sending Data...</p>";

}

function whenLoaded(){

        var e = document.getElementById('replaceme'); 

        e.innerHTML = "<p>Data Sent...</p>";

}

function whenInteractive(){

        var e = document.getElementById('replaceme'); 

        e.innerHTML = "<p>getting data...</p>";

}

function whenCompleted(){

        var e = document.getElementById('sackdata'); 

        if (ajax.responseStatus){

                var string = "<p>Status Code: " + ajax.responseStatus[0] + "</p><p>Status Message: " + ajax.responseStatus[1] + "</p><p>URLString Sent: " + ajax.URLString + "</p>";

        } else {

                var string = "<p>URLString Sent: " + ajax.URLString + "</p>";

        }

        e.innerHTML = string;   

}

function doit(){

        var form = document.getElementById('form');

        ajax.setVar("ime", form.ime.value); // recomended method of setting data to be parsed.

        ajax.setVar("shout", form.shout.value);

        ajax.method = 'POST';

        ajax.element = 'replaceme';

        ajax.onLoading = whenLoading;

        ajax.onLoaded = whenLoaded; 

        ajax.onInteractive = whenInteractive;

        ajax.onCompletion = whenCompleted;

        ajax.runAJAX("passedvar=somedata");

}

</script>

<body>

<form id="form" method="post" action="">

  <label>

  <input name="ime" type="text" id="ime" />

  </label>

  <p>

    <label>

    <input name="shout" type="text" id="shout" />

    </label>

  </p>

  <p>

    <label>

    <input id="replaceme" type="submit" onClick="doit(); return false;" onDblClick="doit(); return false;" />

    </label>

  </p>

</form>

<br /><div id="replaceme"></div><div id="sackdata"></div><br />

<?php

print_r($_POST);

?>

</body>

</html>