Question

I am trying to clone part of a form without including the information that the user inputs into the first form. I am using the In-Field Labels jQuery Plugin.

When I use val(”) to address this problem, the value of the input is not duplicated, but the watermark for the In-Field Labels plugin doesn’t appear as it should – it’s just blank.

Does anyone have any suggestions on how to resolve this problem, or even how to make the code I have more efficient/correct? Thank you.

(function() {
var count = 0;

  $('#add-standard-button').live('click',function () {

    var source = $('.details'),
        clone = source.clone();

    clone.find('.copyme').val('').attr('id', function(i, val) {
        return val + count;
    });
    clone.find('.copyme').val('').attr('name', function(i, val) {
        return val + count;
    });
    clone.find('.placeholder').val('').attr('for', function(i, val) {
        return val + count;
    });

    clone.insertAfter('.details:last');

    count++;

});

HTML:

<div class="details" id="standard-details">
  <div class="markName">
    <p>
     <span class="markName-field">
      <label for="markName" class="placeholder">
       <span>Watermark Text Goes Here</span>
      </label>
      <input type="text" name="markName" id="markName" class="copyme">
     </span>
   </p> 
 </div>
</div>

Answer 1

Set the title tag on your inputs and then pull your default value from that.

clone.find('.copyme').val( $(this).attr('title').attr('name', function(i, val) {
        return val + count;

See an example: http://jsfiddle.net/4KLU5/

Or you could use HTML5 data tags

      <input type="text" data-default="default text" name="markName" id="markName" class="copyme">

and

  clone.find('.copyme').val( $(this).data('default') ).attr('name', function(i, val) {
        return val + count;