Popups or callouts for simple data entry

[bjhess]

I am working on an application that includes a screen with a list of
people on the right and a list of groups they can be involved in on the
left. The user can drag-and-drop people from the right to groups on
the left and visa-versa.

I would like to be able to have a quick way for the user to add a new
person in the right-hand list. Preferrably the user could click a
"new" link, a popup or callout would appear and user could enter the
person's name and contact info, click "save" and never leave the screen
through all this. I'm not too concerned about the AJAX code to
dynamically update the list of people - I'll be using prototype.js for
that.

I'm simply looking for a primer on creating that callout code. Does
anyone know of a good starting place?

Thanks,

Barry

 

[ASM]

(e-mail address removed) a écrit :

I would like to be able to have a quick way for the user to add a new
person in the right-hand list. Preferrably the user could click a
"new" link, a popup or callout would appear and user could enter the
person's name and contact info, click "save" and never leave the screen
through all this.

JS :
function showNew() {
var n = document.forms['new'].style;
n.display = n.display==''? 'block' : '';
}
function saveNewMember(Form) {
var memberName = Form.name.value;
var memberContact = Form.contact.value;
// job to add to list(s)
showNew(); // hidde adding form
}

HTML :
<a href="#" onclick="showNew();return false;">Add member</a>
<form
name="new"
style="display:none"
onsubmit="saveNewMember(this);return false;">
<p>Name <input name="name">
<p>Contact <input name="contact">
<p>input type=submit value="Add">
</form>

 

[bjhess]

Thanks for the reply. This did work for the most part (change noted
below). However, I'd also like to create a version where a callout
appears as a layer above the rest of the page rather than inline with
the page. Does anyone have another tip for that type of situation?

Thanks.

JS :
function showNew() {
var n = document.forms['new'].style;
n.display = n.display==''? 'block' : '';
}

I changed that last line to:

n.display = n.display=='none' ? 'block' : 'none';