JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<form id="profile">
    <label><span>Name</span>
        <input type="text" value="Mohamed" name="name" />
    </label>
    <label><span>Age</span>
        <input type="text" value="30" name="age" />
    </label>
    <label><span>City</span>
        <input type="text" value="chennai" name="city" />
    </label>
    <label><span>Country</span>
        <input type="text" value="india" name="country" />
    </label>
    <input type="submit" value="Submit" />
</form>

CSS

label {
    display:block;
}
label span {
    display:inline-block;
    width:20%;
}

JavaScript

var convert2Json = function (datas) {
    $.each(datas, function(data){
        console.log(this.name);
    });
};

$('#profile').on('submit', function (e) {
    e.preventDefault();
    var data = $(this).serializeArray();
    convert2Json(data);
});