2

I'm very new with JavaScript and I'm struggling to implement something which I don't think should be very complicated.

What I want to do is:

  • form is open in browser with a drop-down list of records in a database
  • if the desired option is not in the list, the user can click on a link next to it to add a new entry to the database
  • this will open a new window with an additional form for this entry
  • on clicking submit the processing script will run to insert this information into the database
  • when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)

Maybe that last thing with the list refreshing is quite complicated (unless the list only in fact loads from the db on click?) but everything else should be simple enough, I think. I've tried all sorts of things but nothing that's got close enough to working to be worth posting here.

Could someone please give me some sort of idea of the sort of functions I should be using and roughly how to implement them? I don't necessarily need precise code, just a framework to work from. (I'll learn more in that case anyway.)

ETA: I should add that I've been trying to work with window.open() and window.close(). I don't even really know if this is the best method?

DontVoteMeDown
  • 19,660
  • 10
  • 65
  • 96
ajor
  • 1,312
  • 7
  • 20
  • 35
  • What is the desired language and database ? – DontVoteMeDown Jul 24 '13 at 11:35
  • The database is mysql, the forms etc are php based. They're all working fine - I have them all set up and working already on separate pages, I just want at this point to be able to have one of them in the popup. – ajor Jul 24 '13 at 11:41

1 Answers1

1

No, that's not(at least relatively) complicated. What you'll need is jQuery and jQuery UI(these frameworks are just suggestions, you may chose any other if you like) to achieve that. So...

form is open in browser with a drop-down list of records in a database

This part is easy, just a simple html form with a select tag and a add link/button on it. You will need a JavaScript function to refresh the select options from database. For that I suggest this or this -there are many others on the web- post.

if the desired option is not in the list, the user can click on a link next to it to add a new entry to the database

this will open a new window with an additional form for this entry

The easy way to do this is using jQuery UI Dialog Widget to open the popup with the new form.

on clicking submit the processing script will run to insert this information into the database

On that form you'll have to use jQuery Ajax to send data to database through your server language(PHP, ASP.Net, JSP, whatever...). Some examples here and here.

when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)

So when data processing was complete, you call the refresh select function that you created before and close the dialog on the ajax success callback. Example here.

And this is it. Now it's up to you. Hope it helps.

Community
  • 1
  • 1
DontVoteMeDown
  • 19,660
  • 10
  • 65
  • 96