Setting up a dynamic form to work with multiple sections

I have a script that dynamically adds lines to a form with default values:

        $(document).ready(function() {
        var defaults = {
    'name[]':           'Name',
    'email[]':          'Email',
    'organisation[]':   'Organisation',
    'position[]':       'Position'
};

var setDefaults = function(inputElements, removeDefault)
{
    $(inputElements).each(function() {
        if (removeDefault)
        {
           if ($(this).data('isDefault'))
           {
            $(this).val('')
                   .removeData('isDefault')
                   .removeClass('default_value');
           }
        }
        else
        {
            var d = defaults[this.name];
            if (d && d.length) 
            {
                this.value = d;
                $(this).data('isDefault', true)
                       .addClass('default_value');
            }
        }
    });
};

setDefaults(jQuery('form[name=booking] input'));

$(".add").click(function() {
                var x = $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
    setDefaults(x.find('input'));

                return false;
            });

            $(".remove").click(function() {
                $(this).parent().remove();
            });

// Toggles 
$('form[name=booking]').delegate('input', {
    'focus': function() {
       setDefaults(this, true);
    },
    'blur': function() {
       if (!this.value.length)    setDefaults(this);
    }
});
 });

For the following view:

<form method="post" name="booking" action="bookingengine.php">
                <p><input type="text" name="name[]">
                 <input type="text" name="email[]">
                <input type="text" name="organisation[]">
                <input type="text" name="position[]">
                <span class="remove">Remove</span></p>

                <p><span class="add">Add person</span><br /><br /><input type="submit" name="submit" id="submit" value="Submit" class="submit-button" /></p>

</form>

Now I would like to split the form into 2 sections, each of which can have dynamically added lines. The second section will contain only spaces for the name and email, so the form as a whole, before adding any additional lines, will look something like this:

enter image description here

But I'm not sure how to achieve this. Either I will create a separate form with a separate script, and then you will need to know how to send information from both forms together, or I would just have one form, but then you would need to develop how to dynamically add lines to each section.

Can anyone help with this?

Thank,

Nick

+3
2

.

, . , fieldset ( div, fieldset - ). 4 fieldset, ; " " fieldset, . , fieldset fieldset, setDefaults.

:

  • setDefaults : setDefaults removeDefaults - , , .

  • .delegate "" - "" . "" jQuery, , , .

  • jQuery , Javascript (, ). , jQuery DOM -, , , - , , DOM.

  • .data, , , , , . , .hasClass('test') , .data('test'), , .

+4

. div. script / div.

, div, divs .

+1

All Articles