CODEWITHSUNDEEP
javascriptjqueryhtml
user13286
user13286

Reputation: 3075

On click, clone element to variable and append it to another element

I have a form and I would like to set it up so that when a user enters/selects values into the inputs and clicks the "Add" button, it will clone each of the inputs/select boxes, assign them to a variable and then append them to another element below. What i have currently is just returning [object Object] instead of cloning the elements. Where am I going wrong?

$(function() {
  $('button').click(function() {
    var $name = $('#name').clone(),
        $email = $('#email').clone(),
        $package = $('#package').clone(),
        $newRow = '<div class="name">' + $name + '</div><div class="email">' + $email + '</div><div class="package">' + $package + '</div>';
        
    $('.row').append($newRow);
  });
});
.row {
  display:table-row;
}
  .row > div {
    display:table-cell;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="email" />
<select id="package">
  <option value="one">Package One</option>
  <option value="two">Package Two</option>
  <option value="three">Package Three</option>
</select>

<button>ADD ROW</button>

<div class="row">

</div>

Upvotes: 3

Views: 2354

Answers (3)

Unamata Sanatarai
Unamata Sanatarai

Reputation: 6637

Append each cloned element to its own div. Then append all divs into the row.

Due to a bug, you must force value on the cloned select box

$(function() {
  $('button').click(function() {
    var $name = $('<div class="name"></div>').append($('#name').clone()),
        $email = $('<div class="email"></div>').append($('#email').clone()),
        $package = $('<div class="package"></div>').append($('#package').clone());
        $package.find('#package').val($('#package').val());
    $('.row').append($name, $email, $package);
  });
});
.row {
  display:table-row;
}
  .row > div {
    display:table-cell;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="email" />
<select id="package">
  <option value="one">Package One</option>
  <option value="two">Package Two</option>
  <option value="three">Package Three</option>
</select>

<button>ADD ROW</button>

<div class="row">

</div>

One last thing. You shouldn't be recognizing elements by id= as those are meant to be unique per whole page. Try rewriting your code so you could use classes for selectors. For example:

<input class="i_name" />
...
$('.i_name').clone()

Upvotes: 2

Jonathan M.
Jonathan M.

Reputation: 397

I don't fully understand what do you need but clone return an object that's why appending to a string will return into a [object Object]. Perhaps you could use outerHTML.

$(function() {
  $('button').click(function() {
    var $name = $('#name').clone();
        $email = $('#email').clone();
        $package = $('#package').clone();
        $newRow = '<div class="name">' + $name[0].outerHTML + '</div><div class="email">' + $email[0].outerHTML + '</div><div class="package">' + $package[0].outerHTML + '</div>';
        
    $('.row').append($newRow);
  });
});
.row {
  display:table-row;
}
  .row > div {
    display:table-cell;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="email" />
<select id="package">
  <option value="one">Package One</option>
  <option value="two">Package Two</option>
  <option value="three">Package Three</option>
</select>

<button>ADD ROW</button>

<div class="row">

</div>

Upvotes: 1

Dale
Dale

Reputation: 1941

You just need to append the cloned objects.

$(function() {
  $('button').click(function() {
    var $name = $('#name').clone(),
        $email = $('#email').clone(),
        $package = $('#package').clone();
     
        
    $('.row').append($name);  
    $('.row').append($email);  
    $('.row').append($package);


  });
});
.row {
  display:table-row;
}
  .row > div {
    display:table-cell;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="email" />
<select id="package">
  <option value="one">Package One</option>
  <option value="two">Package Two</option>
  <option value="three">Package Three</option>
</select>

<button>ADD ROW</button>

<div class="row">

</div>

Upvotes: 1

Related Questions