adjusting default value script to work with multiple rows

I am using a default value script (jquery.defaultvalue.js) to add default text to various input fields on a form:

<script type='text/javascript'>
jQuery(function($) {
    $("#name, #email, #organisation, #position").defaultvalue("Name", "Email", "Organisation", "Position");
});
</script>

The form looks like this:

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

                <p><span class="add">开发者_JAVA百科Add person</span><br /><br /><input type="submit" name="submit" id="submit" value="Submit" class="submit-button" /></p>


</form>

I am also using a script so that users can dynamically add (clone) rows to the form:

<script>
    $(document).ready(function() {

            $(".add").click(function() {
                var x = $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
                x.find('input').each(function() { this.value = ''; });
                return false;
            });

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

        });
</script>

So, when the page loads there is one row with the default values. The user would then start adding information to the inputs. I am wondering if there is a way of having the default values show up in subsequent rows that are added as well.

You can see the form in action here.

Thanks,

Nick

---

Just call .defaultValue this once the new row is created. The below assumes the format of the columns is precticable/remains the same.

$(".add").click(function() {
     var x = $("form > p:first-child");
     x.clone(true).insertBefore("form > p:last-child");
     x.find('input:not(:submit)').defaultvalue("Name", "Email", "Organisation", "Position");
    return false;
});

You should remove ids from the input fields because once these are cloned, the ids, classes, everything about the elements are cloned. So you'll basically end up with multiple elements in the DOM with the same id -- not good.

---

A better "set defaults"

Personally I would remove the "set defaults plugin" if it's used purely on the site for this purpose. It can easily be re-created with the below and this is more efficient because it doesn't care about ordering of input elements.

var defaults = {
    'name[]':           'Name',
    'email[]':          'Email',
    'organisation[]':   'Organisation',
    'position[]':       'Position'
};
    
var setDefaults = function(inputElements)
{               
    $(inputElements).each(function() {
        var d = defaults[this.name];
        if (d && d.length)
        {
            this.value = d;
            $(this).data('isDefault', true);
        }
    });
};

Then you can simply do (once page is loaded):

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

And once a row is added:

$(".add").click(function() {
     var x = $("form > p:first-child");
     x.clone(true).insertBefore("form > p:last-child");
     setDefaults(x.find('input')); // <-- let the magic begin
    return false;
});

For the toggling of default values you can simply delegate events and with the help of setDefault

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

Fiddle: http://jsfiddle.net/garreh/zEmhS/3/ (shows correct toggling of default values)

---

Okey, first of all; ids must be unique so change your ids to classes if you intend to have more then one of them.

and then in your add function before your "return false":

var 
    inputs = x.getElementsByTagName('input'),
    defaults = ["Name", "Email", "Organisation", "Position"];

for(var i in inputs){
    if(typeof inputs[i] == 'object'){
        $(inputs[i]).defaultvalue(defaults[i]);
    }
}