Creating Conditional Submit Form

KennyPowers

KennyPowers

Motherfucking fastball
Jul 2, 2010
484
14
0
Alright, so I basically have little to no programming knowledge, but I'm looking to create a conditional submit form. Something along the following lines:

1. Choose your country
2. Now choose your state
3. Based on that, now choose your city
4. And after being narrowed down, choose among the following options (whatever that may be)

Click to search.

And then I would be able to instantly redirect the submit to a URL of my choice (depending on what they select).

In total I calculated out all the possible combinations, and there's about 3,500 for what I'm trying to do (meaning that there's 3,500 redirect links for each individual criterion).

So my question is, what would be the easiest way to create a conditional submit form on a landing page, and how can I make this submit form look appealing and not so ridiculous? Also, are there any programs out there that could easily eliminate any repetitive work?



Really appreciate any help, thank you.
 


Look into using javascript cascading select boxes.

You will only need to populate the first dropdown(select) element. On update, it will grab the value of the selected item and use it to query a datasource, then populate the next dropdown.
 
Alright, I'm trying to wrap my head around this. So far I found the following php code:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>

<script type="text/javascript">
var makes = new Array("BMW", "Ford");
var models = new Array();
models["BMW"] = new Array("318", "525", "650", "X5");
models["Ford"] = new Array("Bronco", "Explorer", "Focus");

function resetForm(theForm) {
  /* reset makes */
  theForm.makes.options[0] = new Option("Please select a make", "");
  for (var i=0; i<makes.length; i++) {
    theForm.makes.options[i+1] = new Option(makes[i], makes[i]);
  }
  theForm.makes.options[0].selected = true;
  /* reset models */
  theForm.models.options[0] = new Option("Please select a model", "");
  theForm.models.options[0].selected = true;
}

function updateModels(theForm) {
  var make = theForm.makes.options[theForm.makes.options.selectedIndex].value;
  var newModels = models[make];
  theForm.models.options.length = 0;
  theForm.models.options[0] = new Option("Please select a model", "");
  for (var i=0; i<newModels.length; i++) {
    theForm.models.options[i+1] = new Option(newModels[i], newModels[i]);
  }
  theForm.models.options[0].selected = true;
}

</script>

</head>
<body>

<form name="autoSelectForm" action="" method="post">
<select size="1" name="makes" onchange="updateModels(this.form)">
</select>
<select size="1" name="models">
</select>
<input type="submit">
</form>
<script type="text/javascript">
  resetForm(document.autoSelectForm);
</script>

<?php
  $make = $_POST['makes'];
  $model = $_POST['models'];
  if ($make && $model) {
    echo "<p>".$make." - ".$model."</p>";
  }
?>

</body>
</html>

This was an example someone put up presumably for a an auto site. So now I'm wondering: What do I have to do to add additional cascading select boxes that relate to the preceding select boxes?

I'm going to continue playing around with this for a while but would appreciate if anyone could lead me in the right direction.
 
I would just go out and find an existing site that has what you want, then copy and paste and hack a little bit. It's the javascript that you need so you can just "steal" it.
 
For this example, you'd probably do better making a separate function for each successive select box-
in the javascript, take a look at this line:

Code: 
var make = theForm.makes.options[theForm.makes.options.selectedIndex].value;

make = the value to be submitted to the form
makes = the select box (what is in the html select name="" attribute)
options = the list of option values

so if you wanted another select box for colors, make another html select like the ones below, but change name="" attribute to something else.(html)
Code: 
<select size="1" name="colors" onchange="updateColors(this.form)">

This is where it depends on what you actually want to do. For this example, you may have certain color names depending on make and/or model like "Cerulean Blue" instead of "blue" so you'd potentially need an array for each individual model like (javascript):

Code: 
models["BMW"]["318"] = Array("Bright White", "Dingy Brown", "Murder Black");
models["BMW"]["525"] = Array("Bright White", "Cherry Red", "Murder Black");

and so on for each make, each model. In this example, you will be adding another dimension for each cascading select box you have(though I am not sure how deep js will allow the arrays). If a lot of them are the same, you could assign them in a loop.

Then, in the new function you can pretty much copy updateModels(theForm), but change theForm.makes.options to theForm.models.options and reference them in the array by

models[make][color]


And if you have a lot of these functions, you could combine them by adding a parameter to specify which select box you are dealing with, but it could get complicated.

I probably missed a few things, but that's the gist of it.
 
Alright, so I found the following site which basically allows you to create two boxes:

Javascript Menu Generator - MenuGen - SuperTom.Com

It says to reference some other site to figure out how to add additional boxes, but there's really nothing on the other site mentioning how to do it.

So if I want to create a third, fourth, fifth box, what exactly would I have to change with the code in order for the boxes to become interdependent? Thanks.
 
Hello,

Do you have to redirect the form to your own website? or to any other website?

In both of the above conditions, its very easy using PHP:

For example:
A user entered record like this
1. Country:USA >> then list of all states of US pops up
2. State:Alaska >> then list of all cities belongs to Alaska pop ups.
3. City:Eagle River >> then further more details fields pop ups.

This pop uping system is generate using JAVASCRIPT.

But to submit form to the USA >> Alaska >> Eagle River is by using PHP. Basically you have to use PHP variables to do that. Each variable have differ value and redirect to differ page that is also created using PHP.

Show me your interest, so I clearfy it more.

Thanks & Regards
 
You must log in or register to reply here.
Top Bottom