Posting Data with Ajax Tutorial
aka. How to post data with ajax the easy way
Hi there!. In this tutorial javascript ajax post data script example
We will be using pure javascript as I prefer javascript over jquery on GP. JavaScript came first.
Google rips off everything. Well, just like everyone else on the web I guess.
Here we go with this example copy and paste ajax post data example script and in my opinion and my
usage is by far the most efficient and logical way to do so.
We are retrieving all posted data from text, checkboxes and select and serializing it.
No need to process the posted data inputs individually. We take the serialized array an run it thru an array map clean data
function and send to SQL or a directory database file.
I hope you find it usefull
1: // this ajax post example retrieves all fornm input data
2: // from check boxes and select too
3: //dsta goes thru the serialize function then to ajax then to your
4: //data process script. going to sql or text database
5:
6:
7:
8: function serialize(form) {
9: if (!form || !form.elements) return;
10:
11: var serial = [], i, j, first;
12: var add = function (name, value) {
13: serial.push(encodeURIComponent(name) + '=' + encodeURIComponent(value));
14: }
15:
16: var elems = form.elements;
17: for (i = 0; i < elems.length; i += 1, first = false) {
18: if (elems[i].name.length > 0) { /* don't include unnamed elements */
19: switch (elems[i].type) {
20: case 'select-one': first = true;
21: case 'select-multiple':
22: for (j = 0; j < elems[i].options.length; j += 1)
23: if (elems[i].options[j].selected) {
24: add(elems[i].name, elems[i].options[j].value);
25: if (first) break; /* stop searching for select-one */
26: }
27: break;
28: case 'checkbox':
29: case 'radio': if (!elems[i].checked) break; /* else continue */
30: default: add(elems[i].name, elems[i].value); break;
31: }
32: }
33: }
34:
35: return serial.join('&');
36: }
37:
38:
39: function ajaxpost(oForm){
40: var form =oForm;
41:
42: var query = serialize(form);// cal the function above
43: // Create our XMLHttpRequest object
44: //var hr = createXHR();
45: var hr = new XMLHttpRequest();
46:
47: var url = "ajaxsend.php";// php file to post to to process post data
48:
49: hr.open("POST", url, true);
50: // Set content type header information for sending url encoded variables in the request
51: hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
52: // Access the onreadystatechange event for the XMLHttpRequest object
53: hr.onreadystatechange = function() {
54: if(hr.readyState == 4 && hr.status == 200) {
55: var return_data = hr.responseText;
56: document.getElementById("myDiv").innerHTML = return_data;// div id to display poset data if desired
57: }
58: }
59: // Send the data to PHP now... and wait for response to update the status div
60: hr.send(query); // Actually execute the request
61: document.getElementById("myDiv").innerHTML = "processing...";
62: }
63:
64:
65: <html>
66: <form class="stuff" id="support" name="support" method="post">
67: <span>Comment? Make it short an sweet:</span><br>
68: <input type="button" id="buttonId" name="Submit" value="Post it" onClick="ajaxpost(this.form).reset();"/>
69: </form>
70: </html>
71:
72:
