How to run a script and dispay the results in a text box

[AdRock]

I am really new to ajax and am struggling to understand it.

 

I want to run a php file which reads a CSV file and display the contents in the text boxes.

 

I have that part already working but it does it after refreshing the page.

 

I have looked at the example on here but don't know how i would get what i need to do using this example

 

How do i run the php script after the user enters some adress details and clicks the button and display the results in the text boxes without refreshing the page?

 

this is the php to be executed

<?php

    //variables start of route
    $s_street = $_POST['s_street'];
    $s_town = $_POST['s_town'];
    $s_postcode = $_POST['s_postcode'];
    $s_lat = $_POST['s_lat'];
    $s_long = $_POST['s_long'];

    //variables for end of route
    $e_street = $_POST['e_street'];
    $e_town = $_POST['e_town'];
    $e_postcode = $_POST['e_postcode'];
    $e_lat = $_POST['e_lat'];
    $e_long = $_POST['e_long'];

    function get_coords($street, $town, $postcode) {
global $lat,$long;

	// Google Maps API key
	$key = 'ABQIAAAACD5MDwMWe4_TsimyWWBKmRSpZ735DQ5aG39qy-Ctgv5PksM1MRSjN07D5yHKh3uRE-aTS81sZXqYuw';
	//$url = 'http://maps.google.com/maps/geo?q='.urlencode($location).'&key='.$key.'&output=csv';
	$url = 'test.csv';
	$data = explode(',', file_get_contents($url));
	// Searched string
	$location = $street.'+'.$town.'+'.$postcode.'+england';
	$httpstatuscode = $data[0];
	$accuracy = $data[1];
	// Accuracy levels specified by Google. $accuracy_array[$accuracy] will return the readable version of the accuracy
	$accuracy_array = array(
		'Unknown location',
		'Country',
		'Region (state, province, prefecture, etc.)',
		'Sub-region (county, municipality, etc.)',
		'Town (city, village)',
		'Post code (zip code)',
		'Post code (zip code)',
		'Intersection',
		'Address'
	);
	// Comma separated latitude and longitude
	$lat = $data[2];
	$long = $data[3];	
    }

    if(isset($_POST['start_get'])) { 
global $lat,$long, $s_lat, $s_long;

get_coords($s_street, $s_town, $s_postcode);
$s_lat = $lat;
$s_long = $long;
    }

    if(isset($_POST['end_get'])) { 
global $lat,$long, $e_lat, $e_long;

get_coords($e_street, $e_town, $e_postcode);
$e_lat = $lat;
$e_long = $long;
    }
?>

 

and the form

<form id="registerForm" name="registerForm" action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
    
    <fieldset>
<legend>Start of Route</legend>
<p class="hint">Please enter the start of route street name</p>
<p><label for="s_street">Street Name:</label> <input type="text" size="28" name="s_street" value="<?php echo $s_street; ?>" /></p>
<p class="hint">Please enter the start of route town/city</p>
<p><label for="s_town">Town/City:</label> <input type="text" size="28" name="s_town" value="<?php echo $s_town; ?>" /></p>
<p class="hint">Please enter the start of route postcode</p>
<p><label for="s_postcode">Postcode:</label> <input type="text" size="28" name="s_postcode" value="<?php echo $s_postcode; ?>" /></p>
<p class="hint">Please enter the start of route latitude/longitude co-ordinates or click on button to get co-ordinates automatically</p>
<p><label for="s_lan">Latitude:</label> <input type="text" size="28" name="s_lat" value="<?php echo $s_lat; ?>" /></p>
<p><label for="s_lon">Longitude:</label> <input type="text" size="28" name="s_long" value="<?php echo $s_long; ?>" /></p>
<p><label for="s_get"> </label><input type="submit" name="start_get" value="Get Latitude/Longitude" class="sendbutton" style="width: 215px"/></p>
    </fieldset>
    <fieldset>
<legend>End of Route</legend>
<p class="hint">Please enter the end of route street name</p>
<p><label for="e_street">Street Name:</label> <input type="text" size="28" name="e_street" value="<?php echo $e_street; ?>" /></p>
<p class="hint">Please enter the end of route town/city</p>
<p><label for="e_town">Town/City:</label> <input type="text" size="28" name="e_town" value="<?php echo $e_town; ?>" /></p>
<p class="hint">Please enter the end of route postcode</p>
<p><label for="e_postcode">Postcode:</label> <input type="text" size="28" name="e_postcode" value="<?php echo $e_postcode; ?>" /></p>
<p class="hint">Please enter the end of route latitude/longitude co-ordinates or click on button to get co-ordinates automatically</p>
<p><label for="e_lan">Latitude:</label> <input type="text" size="28" name="e_lat" value="<?php echo $e_lat; ?>" /></p>
<p><label for="e_lon">Longitude:</label> <input type="text" size="28" name="e_long" value="<?php echo $e_long; ?>" /></p>
<p><label for="e_get"> </label> <input type="submit" name="end_get" value="Get Latitude/Longitude" class="sendbutton" style="width: 215px"/></p>
    </fieldset>
    <p><label for="Submit" style="width: 80px"> </label>
    <input type="submit" name="addcarshare" value="Add Car Share" class="sendbutton" style="width: 150px"/>
    <input type="reset" value="Reset Fields" class="sendbutton" style="width: 120px"/></p>
</form>

[eddierosenthal]

inside your html page you need

1) create the ajax request object, and define how it will get return values -

    look at the line: http.open('POST',  'handle_form.php'); that defines that a php program is called by the object

    when it itself is called.

  2) the form to gather the data

3) a php program to accept and return data to the form.

 

in this example i am using a form to gather the data, and the response ( from the form handler )

is pushed back into the request object using text, and is processed by the php program,

then comes back and goes to a document id idforresults ...

 

the data goes from keyboard into the form, on change calls the ajax to push the data to the form handler

  this statement takes some input from the user, and sends the input to the php program assigned by the

html object.

this is in the form:

<input  name="name"  type="text" size="35"  onchange="sendRequestTextPost(this.name,this.value,0,'GENERAL')" /> 

 

this is in the ajax portion of script and gets the results back and pushes it to the document by id function.

document.getElementById("idforresults").innerHTML = response;

 

<script type="text/javascript">

 

<!--

var http = createRequestObject();

 

function createRequestObject() {

var xmlhttp;

try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); }

  catch(e) {

    try { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

    catch(f) { xmlhttp=null; }

  }

  if(!xmlhttp&&typeof XMLHttpRequest!="undefined") {

  xmlhttp=new XMLHttpRequest();

  }

return  xmlhttp;

}

// -->

</script>

 

 

<script type="text/javascript">

<!--

function sendRequestTextPost(name, value,cf,room) {

 

 

 

var rnd = Math.random();

//if ( name == 'email' )

    //    alert (" name is \n" + name  + " value is:\n " + value );

 

try{

    http.open('POST',  'handle_form.php');

    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    http.onreadystatechange = handleResponseText;

http.send('name='+name+'&value='+value+'&cf='+cf+'&room='+room+'&rnd='+rnd);

 

}

catch(e){}

finally{}

}

// -->

</script>

 

<script type="text/javascript">

<!--

function handleResponseText() {

try{

    if((http.readyState == 4)&& (http.status == 200)){

    var response = http.responseText;

        document.getElementById("idforresults").innerHTML = response;

  //alert(" handled " );

}

  }

catch(e){alert("hello");}

finally{}

}

// -->

</script>

 

[AdRock]

I am even more confused now  ???