How do I get the value of the added input fields with Jquery?
Question
I am trying to get the values from the added input fields and display it in the textarea.
The values of the input fields will be added once the codeBtn has been clicked and will add it in the textarea. I only have managed to get the values from the first input fields that has been created in HTML.
Moreover, I have tried to add the new value input fields.
let titleValue2 = $('#titleInput2').val();
let contentValue2 = $('#contentInput2').val();
totalString += (titleValue1 + contentValue1 + titleValue2 + contentValue2)
But this will give me 'undefined' when I only want to display the values of titleInput1 and contentInput1. Basically what I'm trying is to get the values from each added input fields to the textarea. Can anyone please help me? Thank you
Sample HTML Code:
<div class="btn-section">
<button class="addButton">+</button>
<button class="codeButton">Generate code</button>
</div>
<div class="container">
<label for="">Titel:</label>
<input type="text" id="titleInput1">
<label for="">Content:</label>
<input type="text" id="contentInput1">
</div>
<div class="newInputs">
</div>
<textarea name="" id="textInput" cols="30" rows="10"></textarea>
JQuery Code:
let inputCount = 1;
let totalString = ''
const defaultInput_firstpart = `<label for="">Titel:</label>
<input type="text" id="titleInput`
const defaultInput_secondpart = `">
<label for="">Content:</label>
<input type="text" id="contentInput`
const defaultInput_lastpart = `">`
function addNewInputs() {
$('.newInputs').append(defaultInput_firstpart + inputCount + defaultInput_secondpart + inputCount + defaultInput_lastpart)
}
function addValues() {
let titleValue1 = $('#titleInput1').val();
let contentValue1 = $('#contentInput1').val()
let titleValue2 = $('#titleInput2').val();
let contentValue2 = $('#contentInput2').val()
totalString += (titleValue1 + contentValue1 + titleValue2 + contentValue2)
}
$(document).ready(function() {
$('.addButton').on('click', function() {
inputCount++;
addNewInputs();
})
$('.codeButton').on('click', function() {
addValues();
$('#textInput').text(totalString)
})
})
1 answers
solution1
2 ACCPTED 2019-12-13 12:25:25
Instead using dynamically created id use classes to get inputs value. Below is the example
let inputCount = 1; let totalString = '' const defaultInput_firstpart = `<div class="nwlist"><label for="">Titel:</label> <input type="text" class="titleInput" id="titleInput` const defaultInput_secondpart = `"> <label for="">Content:</label> <input type="text" class="contentInput" id="contentInput` const defaultInput_lastpart = `"></div>` function addNewInputs() { $('.newInputs').append(defaultInput_firstpart + inputCount + defaultInput_secondpart + inputCount + defaultInput_lastpart) } function addValues() { totalString = ""; $(".nwlist").each(function(){ totalString = totalString + $(this).find(".titleInput").val() + " " + $(this).find(".contentInput").val() + " "; }) } $(document).ready(function() { $('.addButton').on('click', function() { inputCount++; addNewInputs(); }) $('.codeButton').on('click', function() { addValues(); $('#textInput').text(totalString) }) })
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="btn-section"> <button class="addButton">+</button> <button class="codeButton">Generate code</button> </div> <div class="container"> <div class="nwlist"> <label for="">Titel:</label> <input type="text" class="titleInput" id="titleInput1"> <label for="">Content:</label> <input type="text" class="contentInput" id="contentInput1"> </div> <div class="newInputs"> </div> </div> <textarea name="" id="textInput" cols="30" rows="10"></textarea> </body> </html>
Hope it will help.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.