populate option list

[Zuggy]

I'm new to javascript and ajax and after several hours of fruitless googling I have a problem.

I'm trying to create a form with an option list pulled from a database, but also has a text box so that if the option the person is looking for isn't in the list they can add it and then it will refresh the list with the new option without refreshing the page.

 

[BabyJeffy]

Break your problem into smaller parts and then aim to solve each one individually.

Task 1 - Create a form that has option data populated from a database.

Complete this task and get everything working properly (this will require setting up a database and the data table, coding the server-side connection to the database to pull the data back, looping through the result set and outputting the data to the page in the HTML).

Decide the combination of technologies you are going to use (MySQL and PHP are a good working combination for this task) based on your web host. Look in the FAQ sections of the specific forums for the server-side language (in my example, PHP) for some assistance or a pre-existing solution.

Task 2 - Allow a free-text string to be entered into a form field and then have it stored in the same data table you created in Task 1.

Once you have done Task 2, all you need do is re-display the page after submitting the free-text - and it will already have the new entry in the drop down (since the option data is taken from the database).

There is no need to involve Javascript (or AJAX) in this kind of solution. In fact, it's probably best you avoid it until you have Task 1 and 2 working without Javascript. Afterwards you could extend the solution to use AJAX to submit the free-text and to return the contents of the drop-down without requiring a page reload (via form submit).

Let us know how you go!

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094