I am trying to create a JSON from all the fields that I have inside a DIV. The script is taking all the field names and values and put them in JSON, which works fine, except for textarea. For some reason the script is missing a comma after the value of the textarea, although it should place a comma.
Here is the script and also a fiddle
$(document).on('click', '.add', function() {
var json = buildRequestStringData($('#holder'));
$('#result').html(json);
});
function buildRequestStringData(div)
{
var select = div.find('select'),
textarea = div.find('textarea'),
input = div.find('input'),
requestString = '{';
for (var i = 0; i < select.length; i++) {
requestString += '"' + $(select[i]).attr('id') + '": "' +$(select[i]).val() + '",';
}
if (select.length > 0) {
requestString = requestString.substring(0, requestString.length - 1);
}
for (var i = 0; i < textarea.length; i++) {
requestString += '"' + $(textarea[i]).attr('id') + '": "' +$(textarea[i]).val() + '",';
}
if (textarea.length > 0) {
requestString = requestString.substring(0, requestString.length - 1);
}
for (var i = 0; i < input.length; i++) {
if ($(input[i]).attr('type') !== 'checkbox') {
requestString += '"' + $(input[i]).attr('id') + '":"' + $(input[i]).val() + '",';
} else {
if ($(input[i]).attr('checked')) {
requestString += '"' + $(input[i]).attr('id') +'":"' + $(input[i]).val() +'",';
}
}
}
if (input.length > 0) {
requestString = requestString.substring(0, requestString.length - 1);
}
requestString += '}';
return requestString;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container-fluid" id="holder">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="active">Field One</label>
<input type="text"class="form-control" id="Field One">
</div>
<div class="form-group">
<label for="active">Field Two</label>
<input type="text" class="form-control" id="Field Two">
</div>
<div class="form-group">
<label for="active">Textarea Field</label>
<textarea class="form-control h-25" id="Textarea Field"></textarea>
</div>
<div class="form-group">
<label for="active">Field Four</label>
<input type="text" class="form-control" id="Field Four">
</div>
<button class="add">
Create
</button>
</div><div class="col-md-4">
<div id="result">
</div>
</div>
</div>
</div>