prototype & multiple forms on a page?

[dsandall]

Hi,

This might be hard to explain, but hopefully I can muddle through and explain what I'm thinking, and someone can either smack me upside the head and tell me it's a bad idea, or point me in the right direction :-)

The page I'm working on has a week's worth of data blocks like this - pseudo code & markup:
<form 1>
field a 1
field b 1
submit 1
response 1
</form 1>

<form 2>
field a 2
field b 2
submit 2
response 2
</form 2>

and so on for either 7 or 14 days.

I'm trying to conceptualize an prototype based js function that can handle all the forms to submit the data to the backend.

What I have now, that works is like the following

Event.observe(window, 'load', ajax_init, false);

function ajax_init () {
Event.observe('form_1', 'submit', send_form_1);
Event.observe('form_2', 'submit', send_form_2);
}

function send_form_1 (e) {
$('response_1').innerHTML = 'doing the deed for 1!';
var myAjax = new Ajax.Updater('response_1', 'ajax_server.php', {method: 'post', parameters: Form.serialize(this)});
Event.stop(e);
}

function send_form_2 (e) {
$('response_2').innerHTML = 'doing the deed for 2!';
var myAjax = new Ajax.Updater('response_2', 'ajax_server.php', {method: 'post', parameters: Form.serialize(this)});
Event.stop(e);
}


But, in my mind, there has to be a way to streamline this so that one function 'send_form' can do the magic rather than having multiple iterations of it. I was looking at the bind functions in prototype, but perhaps it was the late night and lack of coffee, but I wasn't seeing the application of bindAsEventListener in this context.

Thoughts?

Thanks a ton,
Dwayne

[jimfraser]

I think what you want to do is submit all of the data at once...
obvious choice is 1 big form.

If you dont want to do that, then in your onsubmit function you will be manipulating all of the little forms into 1 big form anyway.

The other option would be to submit each little form in the onchange event of each text field, nice but bandwidth hungry.

[dsandall]

Thanks for the reply Jim, a few questions/comments though...

I think what you want to do is submit all of the data at once...
obvious choice is 1 big form.

that won't work with the functional design of the page. A user will be progressively filling in information on a daily or every other day basis and the info they have already filled in for previous days will already be there.

If you dont want to do that, then in your onsubmit function you will be manipulating all of the little forms into 1 big form anyway.

Nope, that's not the way it works now. There are either 7 or 14 small forms and each one is handled as an individual item, passing it's data to the back end as illustrated above.

The other option would be to submit each little form in the onchange event of each text field, nice but bandwidth hungry.

I don't quite understand why this would be an option, can you explain?

[jimfraser]

OK I see what you mean. You want to submit them all at once, but individually. I don't see why you would need all those functions as the only difference is the id of the form, you could get it like this or pass it as a param to the handler

function ajax_init () {
Event.observe('form_1', 'submit', send_form);
Event.observe('form_2', 'submit', send_form);
}

function send_form (e) {
var id = this.id.split("_")[1];
$('response_' + id).innerHTML = 'doing the deed for ' + id + '!';
var myAjax = new Ajax.Updater('response_' + id, 'ajax_server.php', {method: 'post', parameters: Form.serialize(this)});
Event.stop(e);
}

[dsandall]

Jim,

That one line is what I was missing...
-- var id = this.id.split("_")[1];

I had done something like that and it kept throwing an error which is why I went down the path of trying to figure out the bind stuff; thinking that it was my scope that was being lost.

Thanks a ton!

Dwayne