Tell me more ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.
up vote 4 down vote favorite

I'm still new to web design/development. I'm working on a data entry form for an internal system at work. On the form, the user can select an office from a list queried from a database. (The backend for this is PHP and MySQL, if you're curious.)

I would like to add the functionality to allow the user to add an office to the list, among other things, with minimal invasiveness. I don't want to use a popup window since the default behavior for company browsers is to block popups. I've seen this, which shows you how to create an alert alternative in place of a new window. To me that seems like basically the same thing, and not really an improvement except that it would keep the browser from putting a kibosh on the new form.

I think it might also be good just to keep the popup/alert functionality out of the picture altogether and opt for a new undisplayed <div> that is triggered by a button or doubleclick, autc. and closed by okay or cancel.

Like I said, I'm still new to web design/development, and I'm wondering what the currently accepted best practice is for accomplishing this task with the best possible user experience.

Update: the real question is "Is there a current best practice for accomplishing this task with the best possible user experience?" The answer may be "no, there are many options and none are more prevalent." What I'm looking for is either that, or "yes, the currently accepted best practice for user-experience in this case is X."

share|improve this question
3  
"I think it might also be good just to keep the popup/alert functionality out of the picture altogether and opt for a new undisplayed <div> that is triggered by a button or doubleclick, autc. and closed by okay or cancel." This is exactly what the sample you linked to does. Uses a div in lieu of a popup. – Mike Brown Oct 6 '11 at 14:55
Maybe a javascript/ajax form that allows for seamlessly adding offices without reloading the page? – Anonymous Oct 6 '11 at 14:55
@MikeBrown, it uses a <div> but it still has the ultimate effect of popping up with a window of some sort (an alert in this case) rather than some other design that might be better. I'm trying to ask what design choice would be better than a popup. – user25791 Oct 6 '11 at 15:00
@Anonymous, thanks... I should have said that I feel that's a given in this case, at least when it comes to repopulating the select after the new office is added to the database. – user25791 Oct 6 '11 at 15:03
4  
If you can describe the task in more detail, and possibly provide a a screenshot or mockup, you'll get some good advice on the User Experience site. – Patrick McElhaney Oct 6 '11 at 16:38
show 3 more comments

closed as off topic by Mark Trapp Oct 6 '11 at 18:07

Questions on Programmers Stack Exchange are expected to relate to software development within the scope defined in the FAQ. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about closed questions here.

3 Answers

up vote 3 down vote accepted

The cliche answer for "how do I do this with Javascript" is always jQuery. I'm immensely happy with its .dialog call:

<div id="popup"><!-- all your markup for the dialog goes here --></div>

$("#popup").dialog ({
    autoOpen: false,
    buttons: {
        "Ok" : function() { alert("ok was clicked"); }
        "Cancel" : function() { alert("cancel was clicked"); $(this).dialog("close"); }
    },
    modal: true
});

http://jqueryui.com/demos/dialog/#modal

share|improve this answer
up vote 1 down vote

There are many possibilities here: You could for example: * use fancybox, for popup-like looking functionality * when user clicks 'add' you could load a new form, inject it to current page, and scroll to it. * etc

What I personally would do, is look at the site as it is now. Is similar functionality already present? Can you use it? Does your new solution fit into the current gui?

Even the most usable solution will look bad, if it does not fit with the rest of the site. Your users are familiar with the current gui, if you add something new, you will force them to learn a new thing (that will take a lot of time, and you will get many 'bugreports' about it).

share|improve this answer
up vote 0 down vote

On the form, the user can select an office from a list queried from a database

Just use a Combo Box.

share|improve this answer
Did you read beyond the first paragraph? "I would like to add the functionality to allow the user to add an office to the list". That's what the pop up is for, not the basic selection. – Jon Hopkins Oct 6 '11 at 16:32
A Combo Box is CALLED a combo Box because it allows for Selection or free text entry.... – Morons Oct 6 '11 at 17:18
1  
I don't think there's really a VB-style combobox option in HTML. I think that's what you're referring to--if there were an easy/straight-forward way to implement that in HTML, that would be perfect. I haven't been able to find it. – user25791 Oct 6 '11 at 18:09
@tjb1982 - there are many ways to do this... Google it. – Morons Oct 6 '11 at 18:52