Jump to content

Html and Php form

Ice_Talon

By Ice_Talon
in Javascript Help

 Share

Recommended Posts

Ice_Talon Newbie

Ice_Talon

Posted
Posted

Hi everyone

 

I've got virtually no knowledge of PHP but I'm trying to get into learning the language as it has made life so much easier when I have used it. Basically I need help with an online form. I have created two drop down options in html and a submission button - that's the easy bit but I need it so that certain options on the drop down list are available when specific items have been selected in the first drop down. For example;

 

The user selects an option from the dropdown list of the first tier: "Ford", "Vauxhall" or "Honda". Depending on which of these is chosen, the second tier drop down option changes.

 

If the user chose "Ford", the tier two options are: "Focus", "Fiesta" or "Escort". If the user chose "Vauxhall": "Astra", "Vectra", "Corsa" are selected as the tier 2 options and so on.

 

Finally, there is a "Quote" button that shows an estimate of insurance depending on the vehicle selected in tier 2. This insurance value does not need to be generated but will be a pre-determined by whichever tier 2 option is selected.

 

Ideally, I don't want this to use a database as there aren't any details input to be pulled or stored. I believe this can be done with "if" statements but unfortunately I don't have the knowledge to be able to write the code currently.

 

Any help with this would be greatly appreciated.

 

Thanks in advance for all help!

 

Paul

Link to comment
Share on other sites
Ice_Talon Newbie

Ice_Talon

Posted
  • Author
Posted

Okay, I have set up the following currently (the online page has a lot more options but this is fine as an example). The only thing I need help with now is how to post the insurance value once the user clicks the "Calculate" button.

 

For example: if the user selects "Ford" and then "Focus", I need the text "From £1,200" to appear underneath the Calculate button once the button has been pressed. Once again, I don't need the form to submit any data to a database; this is purely information for the website's users.

 

Apologies if this has already been covered in another topic but I wasn't able to find anything with a quick scan using the search function.

 

The code currently is this (great thanks to mjdamato for the link to this):

 

<html>
<head>

<script type="text/javascript">

// model lists
var model = new Array();
model['Ford'] = new Array('Escort', 'Focus', 'Fiesta');
model['Vauxhall'] = new Array('Astra', 'Vectra', 'Corsa');
model['Honda'] = new Array('Civic', 'Accord', 'Odyssey');


function setmodel(){

  manufacturerSel = document.getElementById('manufacturer');
  modelSel = document.getElementById('model');

  modelList = model[manufacturerSel.value];

  changeSelect(modelSel, modelList);

}

//**************************************************************************//
// FUNCTION changeSelect(fieldObj, valuesAry, [optTextAry], [selectedVal])
//
//**************************************************************************//
function changeSelect(fieldObj, valuesAry, optTextAry, selectedValue) {

  //Clear the select list
  fieldObj.options.length = 0;

  //Set the option text to the values if not passed
  optTextAry = (optTextAry)?optTextAry:valuesAry;

  //Itterate through the list and create the options
  for (i in valuesAry) {
    selectFlag = (selectedValue && selectedValue==valuesAry[i])?true:false;
    fieldObj.options[fieldObj.length] = new Option(optTextAry[i], valuesAry[i], false, selectFlag);
  }

}

</script>

</head>

<body onLoad="setmodel();">


<h1>Personal manufacturer Calculator</h1>
<form>
    <fieldset>
<legend><p>Approximate insurance value</p></legend>

<p>Please select the vehicle manufacturer from the drop down list then choose the desired vehicle model.</p>
<p>
<label for="manufacturer">manufacturer:</label><br/>
<select name="manufacturer" id="manufacturer" onChange="setmodel();">
      <option value="Please choose">Please choose</option>
  <option value="Ford"<?php if ($_POST['manufacturer']=='Ford') echo ' selected'; ?>>Ford</option>
  <option value="Vauxhall"<?php if ($_POST['manufacturer']=='>Vauxhall') echo ' selected'; ?>>Vauxhall</option>
  <option value="Honda"<?php if ($_POST['manufacturer']=='Honda') echo ' selected'; ?>>Honda</option>
</select>
    </p>
<p>
<label for="model">model of manufacturer:</label><br/>
<select name="model" id="model"></select>
    </p>
    <input type="button" value="Calculate" /><br/>
    </fieldset>
</form>


</body>
</html>

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

Since your form already requires javascript, why require the user to select the button to see the text. just add the text dynamically.

 

<?php

$carsAry = array(
    'Ford' => array(
        'Escort' => '£1,200',
        'Focus'  => '£1,300',
        'Fiesta' => '£1,400'
        ),
    'Vauxhall' => array(
        'Astra'  => '£2,200',
        'Vectra' => '£2,300',
        'Corsa'  => '£2,400'
        ),
    'Honda' => array(
        'Civic' => '£3,200',
        'Accord' => '£3,300',
        'Odyssey' => '£3,400'
        )
    );

$selectedModel = (isset($_POST['manufacturer'])) ? $_POST['manufacturer'] : false;

//Iterate through models to generate javascript and select lists
$js_model_lists = '';
$js_model_price = '';
$model_options = '';
foreach($carsAry as $make => $modelsAry)
{
    //Select options
    $selected = ($selectedModel==$make) ? ' selected="selected"' : '';
    $model_options .= "<option value=\"{$make}\"{$selected}>{$make}</option>\n";

    //JS arrays
    $make_models = array();
    $js_model_price .= "prices['{$make}'] = new Array();\n";
    foreach($modelsAry as $model => $price)
    {
        $make_models[] = "'$model'";
        $js_model_price .= "prices['{$make}']['{$model}'] = '{$price}';\n";
    }
    $js_model_lists .= "models['{$make}'] = new Array(" . implode(', ', $make_models) . ");\n";
}

?>
<html>
<head>

<script type="text/javascript">

// model lists
var models = new Array();
<?php echo $js_model_lists; ?>

// model prices
var prices = new Array();
<?php echo $js_model_price; ?>

function setmodel()
{
  var manufacturerSel = document.getElementById('manufacturer');
  var modelList = (models[manufacturerSel.value] != undefined) ? models[manufacturerSel.value] : false;
  changeSelect('model', modelList);
}

//**************************************************************************//
// FUNCTION changeSelect(selectID, valuesAry, [optTextAry], [selectedVal])
//
//**************************************************************************//
function changeSelect(selectID, valuesAry, optTextAry, selectedValue)
{
    var selectObj = document.getElementById(selectID);
    //Clear the select list
    selectObj.options.length = 0;

    if(valuesAry!==false)
    {
        //Set the option text to the values if not passed
        optTextAry = (optTextAry) ? optTextAry : valuesAry;
        //Itterate through the list and create the options
        for (i in valuesAry)
        {
            selectFlag = (selectedValue && selectedValue==valuesAry[i])?true:false;
            selectObj.options[selectObj.length] = new Option(optTextAry[i], valuesAry[i], false, selectFlag);
        }
        selectObj.disabled = false;
    }
    else
    {
        selectObj.options[selectObj.length] = new Option(' - Select a Make - ', '', false);
        selectObj.disabled = true;
    }
    showPrice();
}

function showPrice(selectedCar)
{
    var makeObj  = document.getElementById('manufacturer');
    var modelObj = document.getElementById('model');

    var selectedMake  = makeObj.options[makeObj.selectedIndex].value;
    var selectedModel = modelObj.options[modelObj.selectedIndex].value;

    var price = (selectedMake && selectedModel) ? prices[selectedMake][selectedModel] : '';
    document.getElementById('price').innerHTML = price;
}
</script>

</head>

<body onLoad="setmodel();">

<h1>Personal manufacturer Calculator</h1>
<form>
    <fieldset>
<legend><p>Approximate insurance value</p></legend>

<p>Please select the vehicle manufacturer from the drop down list then choose the desired vehicle model.</p>
<p>
<label for="manufacturer">manufacturer:</label><br/>
<select name="manufacturer" id="manufacturer" onChange="setmodel();">
      <option value=""> - Select a Make - </option>
  <?php echo $model_options; ?>
</select>
    </p>
<p>
<label for="model">Model of manufacturer:</label><br/>
<select name="model" id="model" onChange="showPrice();" disabled="disabled">
      <option value=""> - Select a Make - </option>
    </select>
    </p>
    Price: <span id="price"></span>
    </fieldset>
</form>


</body>
</html>

Link to comment
Share on other sites
  • 2 months later...
Ice_Talon Newbie

Ice_Talon

Posted
  • Author
Posted

Hi all, sorry for the really late reply - moving house is fun enough already without having to fight the broadband supplier to get connected at the new address...

 

Thanks very much for all your help with this, it's definately appreciated! I managed to get this up and running with your help so thanks again

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.