Adding records to a form without submitting the form

**coolest_coder** · 11-03-2008, 09:28 AM

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.

**Jesdisciple** · 11-03-2008, 07:53 PM

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;
    }
}

**coolest_coder** · 11-04-2008, 11:16 AM

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.

**Jesdisciple** · 11-04-2008, 08:17 PM

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>

**coolest_coder** · 11-06-2008, 09:42 PM

Thank you Chris!!

Thread: Adding records to a form without submitting the form

Thread Tools

Search Thread

Adding records to a form without submitting the form

Bookmarks

Bookmarks

Posting Permissions