Modalbox DOM version, Form submit within the modalbox

4 views
Skip to first unread message

jestep

unread,
Jun 8, 2009, 10:56:40 AM6/8/09
to ModalBox
I am generating an html form within a modalbox. I am having trouble
getting the form to submit via an ajax function. So far, it only
submits as a normal form.

Here's what my modalbox is loaded with:

var note_form = new Element('div', {className: 'form', style:
'display:none'}).update(
new Element('form', {id: 'note_form', method: 'post'}).update(
new Element('div', {id: 'form_result', className:
'form_row'}).update(
new Element('textarea', {name: 'note', className: 'note'})
).insert(
new Element('div', {className: 'form_row form_submit',
style: 'text-align:center;'}).update(
new Element('center').insert(
new Element('input', {type: 'submit', value: 'Add
note', className: 'submit'})
)
)
)
)
);

I need the form to do this:
<form onsubmit="new Ajax.Updater('form_result', '/some/url',
{asynchronous:true, evalScripts:false, parameters:Form.serialize
(this)}); return false;" method="post" />

Here's what I'm trying to use to do that:

function noteSumbit()
{
new Ajax.Updater('form_result', '/some/page', {asynchronous:true,
evalScripts:false, parameters:Form.serialize(this)});
return false;
}

Event.observe('note_form', 'submit', noteSumbit);

Right now, it posts just like a normal form, and not through an ajax
request. Any help would be appreciated.

Justinas Urbanavicius

unread,
Jun 8, 2009, 12:33:58 PM6/8/09
to moda...@googlegroups.com
why don't you create elements manually without javascript it is alot faster.

as for the form, try this:
Event.observe(window, 'load', function() {
Event.observe('signinForm', 'dom:loaded', checkForm);
});

although i didn't ever succeed in catching form submit, when it was initiated with submit buttton,
any workaround would be to add onClick event observer on that input button.

jestep

unread,
Jun 9, 2009, 12:45:20 PM6/9/09
to ModalBox
I went with a straight Ajax call on the initial load and everything's
working perfectly now. The DOM generated form was causing more
problems than I wanted to deal with. Using the ajax version cleaned
everything up. There's a small delay in loading the initial content
via ajax, but it's not enough to make a difference in usability.

Thanks for the reply.

Justinas Urbanavicius

unread,
Jun 9, 2009, 12:50:26 PM6/9/09
to moda...@googlegroups.com
you could always preload content in the main page, so if the user clicks the modalbox button the content is then displayed form the div or if it is not jet downloaded fully is fetched form the server via ajax.
Reply all
Reply to author
Forward
0 new messages