CODEWITHSUNDEEP
javascriptjquery
Bariq Dharmawan
Bariq Dharmawan

Reputation: 820

Jquery - Insert value on append element

How can I insert value on <input type="text"> but this element is from append method. Here'is the code

HTML

<input type="email" name="invite_people" placeholder="Invite someone">
  <a href="#!" class="add_people">Add People</a>
  <div class="people_invite">
    <!-- Here is <input type="text" name="people_invited" readonly> is added by jquery -->
  </div>

Jquery

$(".add_people").click(function () {
   var orang_yg_diinvite = $("input type='text' name='invite_people'>").val();
   $(".people_invite").append("<input type='text' name='people_invited' readonly>");
});

It success for append <input type="text" name="people_invited" readonly> inside <div class="people_invite">, but I want to make <input type="text" name="people_invited" readonly> have an value from var orang_yg_diinvite . How can I do that? Please help me :)

Upvotes: 0

Views: 3360

Answers (4)

Satpal
Satpal

Reputation: 133403

Create element using jQuery( html, attributes ) method, Here you can set HTML attributes

var input = $("<input/>", { type: 'text', value : orang_yg_diinvite})
$(".people_invited").append(input);


$(".add_people").click(function() {
  var orang_yg_diinvite = $("input[name='invite_people']").val();
  var input = $("<input/>", {
    type: 'text',
    value: orang_yg_diinvite
  })
  $(".people_invited").append(input);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email" name="invite_people" placeholder="Invite someone">
<a href="#!" class="add_people">Add People</a>
<div class="people_invited">
  <!-- Here is <input type="text" name="people_invited" readonly> is added by jquery -->
</div>

Upvotes: 1

Tanmay
Tanmay

Reputation: 1165

You can also add value and readonly attribute while appending input string.

$(".add_people").click(function () {
   var orang_yg_diinvite = $("input[name='invite_people']").val();
   $(".people_invited").append("<input type='text' name='people_invited' value='"+ orang_yg_diinvite +"' readonly />");
});

Upvotes: 1

Narendra Jadhav
Narendra Jadhav

Reputation: 10262

You can pass directly in value attribute of input

$(".add_people").click(function() {
  var v = $("input[name='invite_people']").val();
  $(".people_invited").append(`<input readonly type="text" value=${v} >`);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email" name="invite_people" placeholder="Invite someone">
<a href="#!" class="add_people">Add People</a>
<div class="people_invited">
   
</div>

Upvotes: 1

Zenoo
Zenoo

Reputation: 12880

There's mutliple ways to do that:

Just directly add it to the HTML of the input you're appending

$(".people_invited").append("<input type='text' value='"+orang_yg_diinvite+"'>");

Or

Edit your input's value after it was appended

$(".people_invited").append("<input type='text'>");
$(".people_invited>input").val(orang_yg_diinvite);

Demo:

$(".add_people").click(function () {
   var orang_yg_diinvite = $("input[name='invite_people']").val();
   $(".people_invited").append("<input type='text' value='"+orang_yg_diinvite+"'>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email" name="invite_people" placeholder="Invite someone">
<a href="#!" class="add_people">Add People</a>
<div class="people_invited">
</div>

Upvotes: 1

Related Questions