CODEWITHSUNDEEP
javascriptjqueryhtmlinputdefault-value
bennyho88
bennyho88

Reputation: 11

How do I get the value of the added input fields with Jquery?

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)

    })

})

Upvotes: 1

Views: 47

Answers (1)

Growyour GK
Growyour GK

Reputation: 463

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.

Upvotes: 2

Related Questions