Next steps with Performer

Step 6: Modifying the flavour form to use Selector

For the Flavour form we want a list of tracks to appear when someone selects the style of jazz they are interested in. This list is generated by a remote page, so this is another AJAX function. So I add the Submitter CSS classes to the flavour select element:

<select name="chooseflavour" id="chooseflavour" class="selector targetEl-flavourtracks targetPage-/next-steps/jazz-flavourtracks">
	<option value="Bebop">Bebop</option>
	<option value="Blues">Blues</option>
	<option value="Solo">Solo</option>
	<option value="Big Band">Big Band</option>
	<option value="Rock">Rock</option>
	<option value="Modern">Modern</option>
	<option value="Trad">Trad</option>
</select>

And them make sure I put the id on the track list:

<ul id="flavourtracks">
...

Now when a new value is chosen in the flavour list the value will be sent to the /next-steps/jazz-flavourtracks page, and the response loaded into the flavourtracks list. To make this a bit neater we can hide the submit button using JavaScript:

<p class="hider">
	<label for="submitflavour">Submit</label>
	<button type="submit" name="submitflavour" id="submitflavour">Submit flavour</button>
</p>

This way people with JavaScript disabled will get the normal form, and people with JavaScript don't see the submit button. Try it out here. Go to step 7....

Pages: 1 2 3 4 5 6 7 8