Reputation: 23

How to make dynamic custom textarea with jquery?

I want to make a dynamic form where the user can add more textarea and input elements when the user presses a button (named Tambah Penawaran).

The textarea element appends a bullet point upon pressing enter, which doesn't occur when the textarea element is dynamically appended to the form.

Please help me, Thank you.

Codepen:

Example At Codepen

HTML

<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  </head>
  <body>
        <div id="buatPenawaranContainer">
      <div class="form-group row">
        <label class="buat-label col-sm-12 btn btn-secondary ">Penawaran</label>
      </div>
      <div class="form-group row">
        <label class="buat-label col-sm-3 btn btn-info " id="labelPenawaran1">Nama Penawaran</label>
        <div class="col-sm-9 buat-input-div">
          <input type="text" class="form-control buat-input" id="buatNamaPenawaran1" placeholder="Nama Penawaran" required>
        </div>
      </div>
      <div class="form-group row">
        <label class="buat-label col-sm-12 btn btn-secondary" id="labelKeuntungan1">Keuntungan</label>
      </div>
      <div class="form-group row">
        <div class="col-sm-12 buat-input-div div-keuntungan">
          <textarea id="keuntungan" class="form-control keuntungan todolist " name="todolist" rows="5" placeholder="Tekan Enter Untuk Setiap Keuntungan"></textarea>
        </div>
      </div>
    </div>
    <div class=" w=100 tambah-keuntungan-container">
      <button type="button" class="btn btn-success" id="tambahPenawaran">Tambah Penawaran</button>
    </div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  </body>
</html>

Javascript

let tambahPenawaran = 1;
$("#tambahPenawaran").click(function () {
  tambahPenawaran++;
  $("#buatPenawaranContainer").append('<div class="form-group row"><label class="buat-label col-sm-12 btn btn-secondary ">Penawaran '+tambahPenawaran+'</label></div><div class="form-group row"><label class="buat-label col-sm-3 btn btn-info " id="labelPenawaran'+tambahPenawaran+'">Nama Penawaran</label><div class="col-sm-9 buat-input-div"><input type="text" class="form-control buat-input" id="buatNamaPenawaran'+tambahPenawaran+'" placeholder="Nama Penawaran" required></div></div><div  class="form-group row"><label class="buat-label col-sm-12 btn btn-secondary" id="labelKeuntungan'+tambahPenawaran+'">Keuntungan</label></div><div class="form-group row" ><div class="col-sm-12 buat-input-div div-keuntungan"><textarea class="form-control keuntungan todolist" name="todolist" rows="5" placeholder="Tekan Enter Untuk Setiap Keuntungan"></textarea></div></div>');
});

$(".div-keuntungan").on('focus', '.keuntungan', function(e){
  if(e.target.value === ''){
      e.target.value +='• ';
  }
});

$(".div-keuntungan").on('keyup', '.keuntungan', function(e){
  let keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
        e.target.value +='• ';
    }
    let txtval = document.getElementById('keuntungan').value;
    if(txtval.substr(txtval.length - 1) == '\n'){
     e.target.value = txtval.substring(0,txtval.length - 1);
    }
});

Upvotes: 1

Answers (3)

Gustav F N

Reputation: 9

I cannot see a bullet point on the first textarea on codepen. If you really want bullets to show for visual purposes then isn't it a matter of just wrapping the textarea being inserted in a li element? I did that and bullets appeared:

$("#buatPenawaranContainer").append('<li><div class="form-group row"><label class="buat-label col-sm-12 btn btn-secondary ">Penawaran '+tambahPenawaran+'</label></div><div class="form-group row"><label class="buat-label col-sm-3 btn btn-info " id="labelPenawaran'+tambahPenawaran+'">Nama Penawaran</label><div class="col-sm-9 buat-input-div"><input type="text" class="form-control buat-input" id="buatNamaPenawaran'+tambahPenawaran+'" placeholder="Nama Penawaran" required></div></div><div  class="form-group row"><label class="buat-label col-sm-12 btn btn-secondary" id="labelKeuntungan'+tambahPenawaran+'">Keuntungan</label></div><div class="form-group row" ><div class="col-sm-12 buat-input-div div-keuntungan"><textarea class="form-control keuntungan todolist" name="todolist" rows="5" placeholder="Tekan Enter Untuk Setiap Keuntungan"></textarea></div></div></li>');

You will have to style it to look decent: This could be a starting point for you: CSS

#buatPenawaranContainer {
  padding: 10px;
}
#buatPenawaranContainer li{
  margin-left: 10px;
}

Upvotes: 0

Daniel Manta

Reputation: 6683

Instead of attaching bullet events to the textarea, do it to the parent div buatPenawaranContainer. That way same functions will handle events for all new textareas you create.

let tambahPenawaran = 1;
$("#tambahPenawaran").click(function() {
  tambahPenawaran++;
  $("#buatPenawaranContainer").append('<div class="form-group row"><label class="buat-label col-sm-12 btn btn-secondary ">Penawaran ' + tambahPenawaran + '</label></div><div class="form-group row"><label class="buat-label col-sm-3 btn btn-info " id="labelPenawaran' + tambahPenawaran + '">Nama Penawaran</label><div class="col-sm-9 buat-input-div"><input type="text" class="form-control buat-input" id="buatNamaPenawaran' + tambahPenawaran + '" placeholder="Nama Penawaran" required></div></div><div  class="form-group row"><label class="buat-label col-sm-12 btn btn-secondary" id="labelKeuntungan' + tambahPenawaran + '">Keuntungan</label></div><div class="form-group row" ><div class="col-sm-12 buat-input-div div-keuntungan"><textarea class="form-control keuntungan todolist" name="todolist" rows="5" placeholder="Tekan Enter Untuk Setiap Keuntungan"></textarea></div></div>');
});

$("#buatPenawaranContainer").on('focus', '.keuntungan', function(e) {
  if (!$(e.target).hasClass("keuntungan")) return;
  if (e.target.value === '') {
    e.target.value += '• ';
  }
});

$("#buatPenawaranContainer").on('keyup', '.keuntungan', function(e) {
  if (!$(e.target).hasClass("keuntungan")) return;
  let keycode = (event.keyCode ? event.keyCode : event.which);
  if (keycode == '13') {
    e.target.value += '• ';
  }
  let txtval = document.getElementById('keuntungan').value;
  if (txtval.substr(txtval.length - 1) == '\n') {
    e.target.value = txtval.substring(0, txtval.length - 1);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
</head>

<body>
  <div id="buatPenawaranContainer">
    <div class="form-group row">
      <label class="buat-label col-sm-12 btn btn-secondary ">Penawaran</label>
    </div>
    <div class="form-group row">
      <label class="buat-label col-sm-3 btn btn-info " id="labelPenawaran1">Nama Penawaran</label>
      <div class="col-sm-9 buat-input-div">
        <input type="text" class="form-control buat-input" id="buatNamaPenawaran1" placeholder="Nama Penawaran" required>
      </div>
    </div>
    <div class="form-group row">
      <label class="buat-label col-sm-12 btn btn-secondary" id="labelKeuntungan1">Keuntungan</label>
    </div>
    <div class="form-group row">
      <div class="col-sm-12 buat-input-div div-keuntungan">
        <textarea id="keuntungan" class="form-control keuntungan todolist " name="todolist" rows="5" placeholder="Tekan Enter Untuk Setiap Keuntungan"></textarea>
      </div>
    </div>
  </div>
  <div class=" w=100 tambah-keuntungan-container">
    <button type="button" class="btn btn-success" id="tambahPenawaran">Tambah Penawaran</button>
  </div>
</body>

</html>

Upvotes: 1

SpeedOfRound

Reputation: 1278

You focus listener for your textarea bind when the page loads. The listener will not catch the boxes you generate after the page loads. To avoid this behavior, you have to bind the listener to the document.

$(document).on('focus', '.div-keuntungan .keuntungan', function(e){...

This will allow you to listen to dynamically generated elements.

Upvotes: 0

How to make dynamic custom textarea with jquery?

Answers (3)

Related Questions