JSFiddle - React, Tailwind, and code Playground

by largan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<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>

JavaScript

$(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;
			}