...

View Full Version : ajax select box fils out form



Phil_n
10-21-2010, 12:13 PM
I am having some difficulty with the following code. I want the form to fill out with default values depending on the option in the select box. I found some sample code which changed the value of a second select box depending on what was selected in the first and have tried to adapt. This is what I have.

Page with Form

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body{
background-repeat:no-repeat;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
height:100%;
background-color: #FFF;
margin:0px;
padding:0px;
}
select{
width:150px;
}
</style>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
/**************************************************************************************************** ********
Ajax chained select
Copyright (C) 2006 DTHMLGoodies.com, Alf Magne Kalleland

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.

Alf Magne Kalleland, 2006
Owner of DHTMLgoodies.com


**************************************************************************************************** ********/
var ajax = new Array();

function getCityList(sel)
{
var countryCode = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_city').options.length = 0; // Empty city select box
if(countryCode.length>0){
var index = ajax.length;
ajax[index] = new sack();

ajax[index].requestFile = 'getCities.php?countryCode='+countryCode; // Specifying which file to get
ajax[index].onCompletion = function(){ createCities(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}

function createCities(index)
{
var formObj = document.forms['supplierForm']
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
</script>
</head>

<body>
<form name="supplierForm" action="" method="post">
<table>
<tr>
<td>Country: </td>
<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
<option value="">Select a country</option>
<option value="dk">Denmark</option>
<option value="no">Norway</option>
<option value="us">US</option>
</select>
</td>
</tr>
<tr>
<td>City: </td>
<td><input type="text" name="supplier" value="" />
</td>
</tr>

</table>
</form>

</body>
</html>

getCities.php


<?php

if(isset($_GET['countryCode'])){

switch($_GET['countryCode']){

case "no":
echo "formObj.supplier.value = 'Test1';";
break;

case "dk":

echo "formObj.supplier.value = 'Test2';";

break;
case "us":

echo "formObj.supplier.value = 'Test3';";

break;
}
}

?>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum