Question

The Problem

I have a page with a form on. It has a hidden field called: generic_portrait

I want the user to click a link “select portrait”

This will open a Dialog/Popup using jQuery, based on a dropdown completed earlier in the form. If the value of the dropdown called “gender” is “male” then show male options, if “gender” is set to “female” show female options.

Each portrait has a radio button, each with a name assigned “male1”, “male2” etc

Depending on the radio button selected in the popup, I want the hidden field to be set to match this.

The Questions

What is the best way to show a dialog/popup using jQuery, different depending on a dropdown box on the page. Use Javascript to see what is selected, then show a corresponding Div?

I can do the check to see what the dropdown is set to using jQuery, but how can I then shown a specific popup based on that?

Once i’ve popped it up, how do I take the value assigned to the selected radio box, and set the hidden field called “generic_portrait” to this value.

Why i’m asking

Normally I would figure this out myself, as i’m sure it’s not that difficult, but I don’t use Javascript and/or PHP very often, and this is due for a client urgently. So I would really, really appreciate some help on this one.

Thanks for all replies in advance.

Answer 1

Moses has some good insight. But, to specifically answer your questions:

• For the popup you need you might try using a “modal”. Check out the jQuery UI library and specifically look at the dialog widget.
• As to how to show a different modal in each circumstance, one option would be to create an empty div element which is hidden by default via CSS. Then using the dialog widget, create a different modal for each. A basic example:$("#yourID").html("your content").dialog({title:"your title",show:"fade",hide:"fade",buttons:{Done:function(){$(this).dialog("destroy");}}}); NOTE: There are a number of ways to create the modal content, including creating them in full in the HTML, while being hidden, and then simply using the dialog widget to display them.
• As to how to populate your hidden field with what was selected in the dialog widget, look at dialog widget source code (e.g. the “view source” link on the page) to see how they get form values. You can then use jQuery to set the hidden field’s value attribute.