Sending form variable to multiple php scripts using ajax - php

Question

I've been trying to figure out how to send a variable from a form to multiple pages using ajax and have each pages script alter the a div contents.
The script I have is working, but it seems like a huge waste of resources and im sure there is a simpler way.
// Function to process the input form
function ConsoleUpdateFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
$('#outputDiv').Typewriter({animDelay: 10,text: ajaxRequest.responseText, div: 'outputDiv' });
//clear the form
$('#inputForm').each(function(){ this.reset();});
//hide the input form till the out has finished showing
window.setTimeout(function(){ document.getElementById('inputForm').style.visibility="visible"; },ajaxRequest.responseText.length*10);
}
}
var age = document.getElementById('inputfield').value;
var queryString = "?inputfield=" + age;
ajaxRequest.open("GET", "consoleprocess.php" + queryString, true);
ajaxRequest.send(null);
//hide the input form
document.getElementById('inputForm').style.visibility="hidden";
}
// Function to process the input form
function VisualInterfaceUpdateFunction(){
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('visualWindowContent');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
//clear the form
$('#inputForm').each(function(){ this.reset();});
//hide the input form till the out has finished showing
window.setTimeout(function(){ document.getElementById('inputForm').style.visibility="visible"; },ajaxRequest.responseText.length*10);
}
}
var age = document.getElementById('inputfield').value;
var queryString = "?inputfield=" + age;
ajaxRequest.open("GET", "visualinterfaceprocess.php" + queryString, true);
ajaxRequest.send(null);
//hide the input form
document.getElementById('inputForm').style.visibility="hidden";
}
// Function to process the input form
function CommandExecutionFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
eval(ajaxRequest.responseText);
}
}
var age = document.getElementById('inputfield').value;
var queryString = "?inputfield=" + age;
ajaxRequest.open("GET", "commandexecution.php" + queryString, true);
ajaxRequest.send(null);
}
I'm basically creating the same function 3 times while only changing the page to send the variable to and how to deal with the returning content. But I can't figure out how to get it working in one function.
Any help will be appreciated.
EDIT:
Thank you for the help all. I believe I have solved the problem as this works fine. Of course if you see something I've done wrong let me know!
$('#inputForm').submit(function() {
$string ="inputfield=" + $('#inputfield').val();
$.ajax({
type: "GET",
url: "consoleprocess.php",
data: $string,
success: function(data) {
$('#outputDiv').Typewriter({animDelay: 10,text: data, div: 'outputDiv' });
}
});
$.ajax({
type: "GET",
url: "visualinterfaceprocess.php",
dataType: "html",
data: $string,
success: function(data) {
$('#visualWindowContent').replaceWith(data);
}
});
$.ajax({
type: "GET",
url: "commandexecution.php",
dataType: "script",
data: $string,
});
//clear the form
$('#inputForm').each(function(){ this.reset();});
return false;
});

Answer 1

First I think you better use jQuery $.ajax to send your ajax request. You are not really consistent in your code:
var age = document.getElementById('inputfield').value;
but later you use jQuery selector
$('#inputForm').each(function(){ this.reset();});
Also I think the better solution for your problem is to use Events. An action (click, submit, ...) trigger an event called MyEvent.
Then you can have an Event Listener that will trigger all you functions: ConsoleUpdateFunction(event, data), VisualInterfaceUpdateFunction(event, data), CommandExecutionFunction(event, data)
To resume, use jQuery $.ajax() (documentation here) and Events using jQuery $.trigger(), $.bind() or $.on() (documentation here).
I hope this will help you. It will simplify a lot of your code.

Answer 2

First try using Prototype or jQuery to simplify your code.
You can try sending your request to a single script instead of three and return data from PHP as JSON. See php json_encode() and http://prototypejs.org/learn/json