Tutorials

Zend data met Ajax

Door Cees S -23-01-2012 10:58 -17.922 views

Deze korte tutorial is voor mensen die AJAX ook voor formulieren willen gebruiken. De functionaliteit is op te splitsen in: Javascript, Formulier en een post_ajax.php In het Javascript deel zijn drie gegevens belangrijk. 1. Het adres van post_ajax.php 2. Response, de tekst die je als resultaat wil teruggeven 3. myMessage, het element wat het resultaat zal ontvangen Er kan nog veel mee toegelicht worden, maar ik denk dat de files voor zich spreken. Suc6 Cees

Pagina 1

Script met Formulier


<html>
<head>
<script language="javascript">
/*
	This is the script part, for posting values
	Response is the text to supply to your user
	MyMessage is a html element to recieve the response
*/
$input = function(text)
{
  //  Zo kan je gemakkelijk een html element aanspreken
  return document.getElementsByTagName(text);
}
function sendForm(response) {
	try {
		//mydata is POST container
	    var mydata = '', name = '';
	    /**
	     * get all input values
	     *
	     **/
	    var inputs = $input('input');
		for (var i = 0; i < inputs.length; ++i) {	//this get all input types,
													//except Textarea and Select
			/*
				prepared to use name or id of html element
			*/
			if (inputs[i].name) {
				name = inputs[i].name;
			} else if (inputs[i].id) {
				name = inputs[i].id;
			} else {
				name = '';
			}
			if ((name!='')&&inputs[i].value) {
			  	mydata += '&' + name + '=' + inputs[i].value;
			}
		}
	    /**
	     * get all selected values
	     *
	     **/
	    var inputs = $input('select');
	    /*
	    	this function works NOT on multiple selections
	    	Yet ...
	    */
	    //alert(inputs.length);
		for (var i = 0; i < inputs.length; ++i) {
			//If you want you can loop thrue all options[] of active select element
		  	mydata += '&' + inputs[i].name +
		  			  '=' + inputs[i].options[inputs[i].options.selectedIndex].value;
		}
	    /**
	     * get all textarea values
	     *
	     **/
	    var inputs = $input('textarea');
		for (var i = 0; i < inputs.length; ++i) {
		  	mydata += '&' + inputs[i].name + '=' + inputs[i].value;
		}
		/**
		 * get a XMLHttpRequestobject
		 *
		 **/
	    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
	        var xmlhttp = new XMLHttpRequest();
	    } else { // code for IE6, IE5
	        var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	    }
		/**
		 * Create onreadystatechange function
		 *
		 **/
	    xmlhttp.onreadystatechange = function () {
	    	//Is it ready to send data
	        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
	        	//give your response
		         document.getElementById("myMessage").innerHTML = response; 			        }
	    }
	    /**
	     * get remote URL, to execute POST values
	     * the file has to be there!
	     *
	     **/
	    var doNow = "post_ajax.php"
		/**
		 * open Request
		 *
		 **/
	    xmlhttp.open("POST", doNow, true);
		/**
		 * set some headers
		 *
		 **/
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.setRequestHeader("Content-length",mydata.length);
		xmlhttp.setRequestHeader("Connection", "close");
		/**
		 * send POST data
		 *
		 **/
	    //alert(mydata.length);
	    xmlhttp.send(mydata);
	} catch (e) {
        // display error message
        alert("Error sending the response: " + e.toString());
	}
}
</script>
<style TYPE="text/css" MEDIA=screen>
	.warning {
	background-color: orange;
	color: white;
</style>
</head>
<body>
<div id="myMessage" class="warning"><!-- class is to alert your user //-->
</div>
<form id="mailfrm" name="mailfrm" action="javascript:sendForm('Uw formulier is verwerkt!')">
<input id="formname" name="formname" value="mailfrm" type="hidden">
<label for="name">
Gast naam:
</label>
<input id="name" name="name" title="Geef hier uw naam." size="25" value="Gebruiker">
<br>
<label for="mail">
Mailadres:
</label>
<input id="mail" name="mail" title="Geef hier uw mailadres." size="30" value="[email protected]">
<br>
<label for="subject">
Onderwerp:
</label>
<input id="subject" name="subject" title="Geef hier het onderwerp van uw bericht." size="40" value="Test Ajax">
<br>
<label for="message">
Bericht:
</label>
<textarea id="message" name="message" title="Type hier het bericht en/of opmerking die u wilt plaatsen." cols="40" rows="10">Super snel dataverwerking
</textarea>
<br>
<p align="center">
<button type="reset" value="reset" title="Herstel ingegeven waarden.">
Herstel
</button>
<button value="send" title="Verzend ingegeven waarden.">
Verzend
</button>
</p>
</form>
</body>
</html>

Pagina 2

post_ajax.php


<?php

/**
 *
 *
 */

	$_POST;
      //Hier kan de data verwerkt worden.
?>