Geek Answers Handbook

How do you re-populate dynamically generated parameters for a select box?

Background I have two fields of the selected form connected together: duration and frequency. When the user selects a frequency, duration parameters are dynamically inserted. There are default options, but it's just that the field is not empty when the user expands it.

For example, the frequency parameters are “day”, “another day” and “week”. If I select “day,” the frequency settings change to “5 days,” “15 days,” and “30 days.”

Problem The problem occurs when the user submits the form with errors, the form returns with re-filling all the form fields and highlighting the errors - except for the frequency selection field - the parameters of which are dynamically generated. It is not highlighted, and its parameters are the default parameters.

Is there a way for these parameters to be re-populated if the user submitted with an error. We do very little JavaScript validation, so this situation should not happen as often, but I would like to make a mistake as painless an experience as possible for users.

code I use jquery and a jquery plugin called cascade to combine the two fields. ( http://plugins.jquery.com/project/cascade )

Here is my custom JavaScript.

This script generates a list of options:

var list1 = [ {'When':'86400','Value':' ','Text':' '}, {'When':'172800','Value':' ','Text':' '}, {'When':'604800','Value':' ','Text':' '}, {'When':'86400','Value':'432000','Text':'5 days'}, {'When':'86400','Value':'1296000','Text':'15 days'}, {'When':'86400','Value':'2505600','Text':'30 days'}, {'When':'172800','Value':'1296000','Text':'15 days'}, {'When':'172800','Value':'2505600','Text':'30 days'}, {'When':'172800','Value':'3888000','Text':'45 days'}, {'When':'604800','Value':'2505600','Text':'4 weeks'}, {'When':'604800','Value':'3715200','Text':'6 weeks'}, {'When':'604800','Value':'4924800','Text':'8 weeks'} ]; function commonTemplate(item) { return "<option value='" + item.Value + "'>" + item.Text + "</option>"; }; function commonMatch(selectedValue) { return this.When == selectedValue; };

And this is a script that starts the generation of selection options:

 jQuery("#duration).cascade("#frequency",{ list: list1, template: commonTemplate, match: commonMatch })

Question Any thoughts on how to get dynamically generated frequency parameters for refilling when the form returns to the browser with errors? Can I use the cascading plugin that I am currently using, or some other method?

Help is much appreciated. :-)

+4
source share
1 answer

I am not familiar with this plugin, but could you just fire the change() #duration and / or #frequency on document.ready?

 $(document).ready(function() { $('#duration').change(); $('#frequency').change(); });

I am sure that all that the script does is bind the material to the select change event (at least by default) to make the plugin work with its magic ...

+2
source

More articles:


All Articles