Tricky Forms Question

  • Timmy
  • Graduate
  • Graduate
  • Timmy
  • Posts: 104

Post 3+ Months Ago

I have a drop down menu in a form with a number of options relating to different locations of a company.

eg: Leeds,London, Luton, Manchester, Mansfield

I want the selection of a location to immediatly affect the form areas below.

eg: You select Luton from the drop down menu and the next for blank text areas of the form read

Luton Office
25 *peach* Rd
Somewhere
1BJ 36DD

Does anyone know how to achieve this monstrous task.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Carnix
  • Guru
  • Guru
  • User avatar
  • Posts: 1098

Post 3+ Months Ago

Yes... but it will require a significant JavaScript to do it.

Do you have a database that is storing all this? If so, use server side script to write the javascript vars dynamically... if not, it's not impossible, but just a lot of coding.

I'll write up a quick example for you and post it in a bit.

.c
  • Carnix
  • Guru
  • Guru
  • User avatar
  • Posts: 1098

Post 3+ Months Ago

Wasn't really that significant.. heh. But if you have MANY locations, the script might get very long...
Hope you like multidimensional arrays =]
Enjoy
.c

Code: [ Select ]

<html>
<script LANGUAGE="JavaScript" TYPE="text/javascript">
var address_array = new Array();

/*
    With a database and PHP (or whatever) you can use a loop to create the following arrays programmatically:
*/


address_array[0] = new Array("123 Here Street", "Atlanta", "Georgia","30312");
address_array[1] = new Array("124 Another Street", "Seattle", "Washington","98310");
address_array[2] = new Array("124 Crap Street", "Boston", "Massishiasdlasets","66666");

function do_populate(elementObj,formObj,oid){
    if(oid != ""){
        formObj.address.value = address_array[oid][0];
        formObj.city.value = address_array[oid][1];
        formObj.state.value = address_array[oid][2];
        formObj.zip.value = address_array[oid][3];
    }
    else {
        formObj.address.value = "";
        formObj.city.value = "";
        formObj.state.value = "";
        formObj.zip.value = "";
    }
}

function validate(formObj){
//if(something)
//return true;
//else
    return false;
}

</script>
<body>
<form ACTION="testpage.html" METHOD="POST" NAME="theform" ID="The Form" onSubmit="return validate(this)">
<p>Office Location: <select NAME="office" ID="Office Location" onChange="do_populate(this,this.form,this.value);">
<option VALUE=""> - Select and Office - </option>
<option VALUE="0">Atlanta</option>
<option VALUE="1">Seattle</option>
<option VALUE="2">Bostom</option>
</select></p>

<p>Address: <input TYPE="text" NAME="address" ID="Address" VALUE=""/><br/>
City: <input TYPE="text" NAME="city" ID="City" VALUE=""/><br/>
State: <input TYPE="text" NAME="state" ID="State" VALUE=""/><br/>
Zip: <input TYPE="text" NAME="zip" ID="Zip" VALUE=""/><br/>
</p>
</form>
</body>
</html>
  1. <html>
  2. <script LANGUAGE="JavaScript" TYPE="text/javascript">
  3. var address_array = new Array();
  4. /*
  5.     With a database and PHP (or whatever) you can use a loop to create the following arrays programmatically:
  6. */
  7. address_array[0] = new Array("123 Here Street", "Atlanta", "Georgia","30312");
  8. address_array[1] = new Array("124 Another Street", "Seattle", "Washington","98310");
  9. address_array[2] = new Array("124 Crap Street", "Boston", "Massishiasdlasets","66666");
  10. function do_populate(elementObj,formObj,oid){
  11.     if(oid != ""){
  12.         formObj.address.value = address_array[oid][0];
  13.         formObj.city.value = address_array[oid][1];
  14.         formObj.state.value = address_array[oid][2];
  15.         formObj.zip.value = address_array[oid][3];
  16.     }
  17.     else {
  18.         formObj.address.value = "";
  19.         formObj.city.value = "";
  20.         formObj.state.value = "";
  21.         formObj.zip.value = "";
  22.     }
  23. }
  24. function validate(formObj){
  25. //if(something)
  26. //return true;
  27. //else
  28.     return false;
  29. }
  30. </script>
  31. <body>
  32. <form ACTION="testpage.html" METHOD="POST" NAME="theform" ID="The Form" onSubmit="return validate(this)">
  33. <p>Office Location: <select NAME="office" ID="Office Location" onChange="do_populate(this,this.form,this.value);">
  34. <option VALUE=""> - Select and Office - </option>
  35. <option VALUE="0">Atlanta</option>
  36. <option VALUE="1">Seattle</option>
  37. <option VALUE="2">Bostom</option>
  38. </select></p>
  39. <p>Address: <input TYPE="text" NAME="address" ID="Address" VALUE=""/><br/>
  40. City: <input TYPE="text" NAME="city" ID="City" VALUE=""/><br/>
  41. State: <input TYPE="text" NAME="state" ID="State" VALUE=""/><br/>
  42. Zip: <input TYPE="text" NAME="zip" ID="Zip" VALUE=""/><br/>
  43. </p>
  44. </form>
  45. </body>
  46. </html>

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 34 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.