Results 1 to 5 of 5

Thread: Adding records to a form without submitting the form

  1. #1
    Join Date
    Nov 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Adding records to a form without submitting the form

    Hello everyone,

    In my form I take user details from the user, ie. name, address, etc. Now there are two options for user:
    1. Submit form
    2. Add records

    If user dont have any previous addresses, he just submit's the form, which is working fine.

    But if the user wants to add previous address details, he needs to click on "Add records" button. After clicking that button, user should be asked for number of records to be added and then according to the number entered, that many records must be added to the same form. After filling all the address details (present and previous) he must click on submit button to submit the form.

    Can anyone tell me how to add the records in the form without submitting the form according to the number entered by the user.

    Thank you.

  2. #2
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    Mods, please move this thread to the JavaScript forum.

    See this thread for a very similar project. The following function (a modified version of the one from that thread) is the only thing you should copy; the functions called and the techniques used in the rest of that thread demonstrate a pattern for using this core function. (The cb in the parameter names stands for callback.)
    Code:
    function makeDuplicator(button, element, cb_dress, cb_append){
        var prototype = element.cloneNode(true);
        button.onclick = function(){
            for(var i = 0; i < parseInt(prompt('How many more records would you like?')); i++){
                //Dress the clone.
                var clone = (cb_dress || lazy)(prototype.cloneNode(true));
                //Append the clone.
                if(cb_append) //Native objects apparently don't like short-circuit operators.
                    cb_append(clone, element);
                else
                    element.parentNode.appendChild(clone);
            }
        };
        function lazy(e){
            return e;
        }
    }
    Last edited by Jesdisciple; 11-03-2008 at 07:06 PM.
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

  3. #3
    Join Date
    Nov 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for your reply. I had posted this thread in Javascript forum first, but someone said that I would get a proper answer in PHP forum.

    Anyways, in your makeDuplicator() you have passed four arguments. Would you please tell me what all should I pass over there. Since I am calling that funtion at an onclick event of a button:

    <input type="button" onclick="makeDuplicator()" value="Add Record" />

    Please reply.

  4. #4
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    It's actually supposed to be called when the document loads. For any simple arrangement, i.e. if you don't need to change the new elements at all before appending them to the document, only the first two arguments are required: the button to do the copying and the element to be copied. If you want to add a row to a table, pass the tr as the element. If the button is inside the same row, you might want to use the first callback parameter to remove it from the new rows.

    To make a script run when the page loads, you can use either of these... (The first is preferable.)
    Code:
    <html>
        <head>
            <title>Titled Document</title>
        </head>
        <body>
            ...
            <script type="text/javascript"> //Move this script to an external .js file.
                makeDuplicator(...);
            </script>
        </body>
    </html>
    Code:
    <html>
        <head>
            <title>Titled Document</title>
            <script type="text/javascript"> //Move this script to an external .js file.
                window.onload = function(){
                    makeDuplicator(...);
                }
            </script>
        </head>
        <body>
            ...
        </body>
    </html>
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

  5. #5
    Join Date
    Nov 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you Chris!!

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
  •