SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Winnipeg
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    prototype & multiple forms on a page?

    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
    Last edited by dsandall; Mar 26, 2007 at 14:29. Reason: typo in pseudo code not matching js function

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Winnipeg
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Jim, a few questions/comments though...

    Quote Originally Posted by jimfraser View Post
    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.

    Quote Originally Posted by jimfraser View Post
    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.


    Quote Originally Posted by jimfraser View Post
    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?

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    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);
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Winnipeg
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •