Advanced Search

AJAX Form POST Request - HTML Form POST/Submit with AJAX/Javascript Example/Tutorial

/ Published in: PHP
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. post.html:
  2.  
  3. <script type="text/javascript" language="javascript">
  4.    var http_request = false;
  5.    function makePOSTRequest(url, parameters) {
  6.       http_request = false;
  7.       if (window.XMLHttpRequest) { // Mozilla, Safari,...
  8.          http_request = new XMLHttpRequest();
  9.          if (http_request.overrideMimeType) {
  10.          	// set type accordingly to anticipated content type
  11.             //http_request.overrideMimeType('text/xml');
  12.             http_request.overrideMimeType('text/html');
  13.          }
  14.       } else if (window.ActiveXObject) { // IE
  15.          try {
  16.             http_request = new ActiveXObject("Msxml2.XMLHTTP");
  17.          } catch (e) {
  18.             try {
  19.                http_request = new ActiveXObject("Microsoft.XMLHTTP");
  20.             } catch (e) {}
  21.          }
  22.       }
  23.       if (!http_request) {
  24.          alert('Cannot create XMLHTTP instance');
  25.          return false;
  26.       }
  27.  
  28.       http_request.onreadystatechange = alertContents;
  29.       http_request.open('POST', url, true);
  30.       http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  31.       http_request.setRequestHeader("Content-length", parameters.length);
  32.       http_request.setRequestHeader("Connection", "close");
  33.       http_request.send(parameters);
  34.    }
  35.  
  36.    function alertContents() {
  37.       if (http_request.readyState == 4) {
  38.          if (http_request.status == 200) {
  39.             //alert(http_request.responseText);
  40.             result = http_request.responseText;
  41.             document.getElementById('myspan').innerHTML = result;            
  42.          } else {
  43.             alert('There was a problem with the request.');
  44.          }
  45.       }
  46.    }
  47.  
  48.    function get(obj) {
  49.       var poststr = "mytextarea1=" + encodeURI( document.getElementById("mytextarea1").value ) +
  50.                     "&mytextarea2=" + encodeURI( document.getElementById("mytextarea2").value );
  51.       makePOSTRequest('post.php', poststr);
  52.    }
  53. </script>
  54.  
  55.  
  56. <form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
  57. <textarea id="mytextarea1">my test
  58. 1
  59. 2
  60. 3

URL: http://www.captain.at/howto-ajax-form-post-request.php

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.