Stack Overflow Asked by David Noya on November 29, 2021
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:
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);
}
});
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;
}Answered by Gustav F N on November 29, 2021
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>Answered by Daniel Manta on November 29, 2021
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.
Answered by SpeedOfRound on November 29, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP