lundi 30 mars 2015

How to trim form 'submit' values for a multi-level select list?

I have a form with a multi-level select list, the select list displays options based on what was previously selected (using jQuery). You can find the fiddle attached in my post or here. My form action is as follows:



<form action="catalog.php?category=submit" method="GET" id="selectorForm">


The returned URL when the submit button is clicked is as follows:



.../catalog.php?series=5series&3generation=&5generation=e39&e46model=&e39model=525i&e60model=


However, I only want the last option selected in the multi-level select list to be passed in the URL. E.g: ../catalog.php?category=525i.


How can I do this?


Alternatively if I get the URL as it currently is to my catalog.php, how can I determine which the level values were passed based on the level of the select list?





jQuery(function($) {

$("#series").change(function() {
var targetID = $(this).val();
$("div.generation").hide();
$('#' + targetID).show();
});

$("#3generation").change(function() {
var targetID = $(this).val();
$("div.model").hide();
$('#' + targetID).show();
});

$("#5generation").change(function() {
var targetID = $(this).val();
$("div.model").hide();
$('#' + targetID).show();
});

$('.selectModel').change(function() {
if ($(this).val() != "") {
$('#submit').show();
} else {
$('#submit').hide();
}
});

});



<script src="http://ift.tt/1qRgvOJ"></script>
<h3 align="center">Choose your BMW<br /><br /></h3>

<div id="selectorFormContainer" width="100%" align="center">

<form action="catalog.php?category=submit" method="GET" id="selectorForm">

<div id="SeriesContainer" class="selector">
<select id="series" class=" validate['required']" name="series" size="1">
<option value="">Choose your BMW's series</option>
<option value="3series">3 series</option>
<option value="5series">5 series</option>
</select>
</div>
<br />
<div id="3series" class="generation" style="display: none;" onchange="ChangeDropdowns(this.value)">
<select id="3generation" class="selectGen" name="3generation" size="1">
<option value="">Choose your BMW's generation</option>
<option value="e46">E46 (1998 - 2006)</option>
</select>
</div>
<div id="5series" class="generation" style="display: none;" onchange="ChangeDropdowns(this.value)">
<select id="5generation" class="selectGen" name="5generation" size="1">
<option value="">Choose your BMW's generation</option>
<option value="e39">E39 (1995 - 2003)</option>
<option value="e60">E60 (2003 - 2010)</option>
</select>
</div>
<br />
<div id="e46" class="model" style="display: none;" onchange="ChangeDropdowns(this.value)">
<select id="e46model" class="selectModel" name="e46model">
<option value="">Choose your BMW's model</option>
<option value="320i">320i</option>
</select>
</div>
<div id="e39" class="model" style="display: none;" onchange="ChangeDropdowns(this.value)">
<select id="e39model" class="selectModel" name="e39model">
<option value="">Choose your BMW's model</option>
<option value="525i">525i</option>
<option value="540i">540i</option>
</select>
</div>
<div id="e60" class="model" style="display: none;" onchange="ChangeDropdowns(this.value)">
<select id="e60model" class="selectModel" name="e60model">
<option value="">Choose your BMW's model</option>
<option value="M5">M5</option>
</select>
</div>
<br />
<div id="submit" style="display: none;">
<input value="submit" style="border: none; border-radius: 5px; height: 2em; width: 10em; background-color: #22b8f0; color: #ffffff;" type="submit" />
</div>
</form>
</div>



Aucun commentaire:

Enregistrer un commentaire