JSFiddle - React, Tailwind, and code Playground

by baximilian

HTML

<div class="container">
    <input type="text" id="res" readonly="" placeholder="result" style="width:500px"/>		
    <div class="col-md-6 col-md-offset-3">
				<h1>Form1 Class FormA</h1>
	
				<form id="form1">
					<div class="form-group">
						<label for="Prop1">Prop1</label>
                        <input type="text" name="Prop1"/> 
					</div>	
					<div class="form-group">
						<label for="Prop2">Prop2</label>
                        <input type="text" name="Prop2"/> 
					</div>
				</form>
	
				<form id="form2">
					<h1>Form2 Class FormB</h1>
					<div class="form-group">
						<label for="Prop1">Prop1</label>
                        <input type="text" name="Prop1"/> 
					</div>	
					<div class="form-group">
						<label for="Prop2">Prop2</label>
                        <input type="text" name="Prop2"/> 
					</div>				
					<div class="form-group">
						<label for="Prop3">Prop3</label>
                        <input type="text" name="Prop3"/>
					</div>
				<button type="button" class="btn btn-success submit">send</button>
				<br/><br/>
			</div>
		</div>

JavaScript

function mapForm(form)
{
    var result = {};
    
    $.map($(form).serializeArray(), 
                    function(el){
                        mapFormProperty(result, el);
                             });
    
    return result;
}
function mapFormProperty(form, property)
{
    form[property.name] = property.value;
}

$('.submit').click(function(){
			
    var form1 = mapForm($('#form1'));
    var form2 = mapForm($('#form2'));	
    
    var formContainer = {
       'Form1': form1,
	   'Form2': form2
	   };
    
    $('#res').val(JSON.stringify(formContainer));
    
$.ajax({
url: '/echo/json/',
data: JSON.stringify(formContainer),
type: 'POST',
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function(resp) {
						}});
					});