JavaScript Forum

**synritical** · 11-16-2007, 09:02 AM

Hi guys,

I'm currently using AJAX to handle a dynamic form I'm coding for my company. I have learnt how to do this by using an array to store the data for the dropdown lists that i wish to be dynamic. However, it has now gotten to the point where I need to link to a MySQL database instead of an array.

Any ideas on the best way to do this? I'll post my code below, please let me know if any further information is required! Thanks!

array page

Code:

<?php
    $dataOptions = array();

    $dataOptions["Ford"] = array("Choose One", "Fiesta", "Focus", "Escort", "KA");

    $dataOptions["Renault"] = array("Choose One", "Scenic", "Clio", "Espace", "Megane");

    $dataOptions["Fiesta"] = array("Choose One", "GTI", "Blah", "BlahExec");

    if(isset($_POST["dataRequest"]) && isset($dataOptions[$_POST["dataRequest"]]))
    {
        foreach($dataOptions[$_POST["dataRequest"]] as $secondaryOptions)
        {
            printf("%s,", $secondaryOptions);
     }}
?>

form page

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Nathan's Test - Control Field Input Via AJAX</title>
<script src="ajaxBasics.js" type="text/javascript" language="javascript"></script>
<script src="dynamicForm.js" type="text/javascript" language="javascript"></script>

<link href="dynamicForm.css" rel="stylesheet" type="text/css" />
</head>
<body>

<form action="#" method="get" id="myForm">
	<fieldset>
	<legend>Online Quote Form</legend>
	<label for="firstName">Name</label>
	<input class="formInputText" type="text" name="firstName" id="firstName" value="First" size="12" maxlength="16" tabindex="1" onfocus="clearField(this)" />
	<input class="formInputText" type="text" name="lastName" id="lastName" value="Last" size="12" maxlength="16" tabindex="2" onfocus="clearField(this)"/>
	<br/>
	<label for="address1">Address</label>
	<input class="formInputText" type="text" name="address1" id="address1" value="Address 1" size="26" maxlength="24" tabindex="3"onfocus="clearField(this)"/>
	<br/>
	<label>&nbsp;</label>
	<input class="formInputText" type="text" name="address2" id="address2" value="Address 2" size="26" maxlength="24" tabindex="4"onfocus="clearField(this)"/>
	<br/>
	<label for="state">Vehicle Make</label>
	<select class="formSelect" name="country" id="country" size="1" tabindex="5" onchange="chooseVehicle(this.options[this.selectedIndex].text,'model')">
<option value="" selected="selected">Choose One</option>
<option>Ford</option>
<option>Renault</option>
</select>
<br/>
	<label for="model">Vehicle Model</label>
	<select class="formSelect" name="model" id="model" size="1" tabindex="5" onchange="chooseVehicle(this.options[this.selectedIndex].text,'type')">
		<option selected="selected">Choose a vehicle make first</option>
	</select>
	<br />

	<label for="type">Vehicle Type</label>
	<select class="formSelect" name="type" id="type" size="1" tabindex="5">
		<option selected="selected">Choose a vehicle model first</option>
	</select>
	
	<br/>
	<label for="postalCode">Postal Code</label>
	<input class="formInputText"type="text" name="postalCode" id="postalCode" size="10" maxlength="10" tabindex="6"/>
	<br/>
	<label>Share this information with other groups?</label>
	<input type="radio" name="share" id="shareYes" value="no" checked="checked" tabindex="7"/>
	<label class="fieldLabel" for="shareYes">Yes</label>
	<input type="radio" name="share" id="shareNo" value="yes" tabindex="8"/>
	<label class="fieldLabel" for="shareNo">No</label>
	<br/>
	<div style="clear:both;">
		<label>&nbsp;</label>
		<input class="formInputButton" type="submit" name="submitButtonName" id="submitButtonName" value="Send" tabindex="9"/>
	</div>
	</fieldset>
</form>
</body>
</html>

ajax bit

Code:

function clearField(obj) {
	if (obj.defaultValue==obj.value) obj.value = '';
}

function chooseVehicle(requestedData,objectID) {
	fetchData('dataPage.php',requestedData,objectID);
}

function filterData(pageRequest,objectID){
	if (pageRequest.readyState == 4 && (pageRequest.status==200 || window.location.href.indexOf("http")==-1)) {
		var object = document.getElementById(objectID);
		object.options.length = 0;
		if(pageRequest.responseText != '') {
			var arrSecondaryData = pageRequest.responseText.split(',');
			for(i = 0; i < arrSecondaryData.length; i++) {
				if(arrSecondaryData[i] != '')
					object.options[object.options.length] = new Option(arrSecondaryData[i], arrSecondaryData[i]);
}}}}