JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

<form id="form">
    <label for="firstName">First Name</label>
    <input id="firstName" type="text">
        
    <label for="lastName">Last Name</label>
    <input id="lastName" type="text">
        
    <label for="age">Age</label>
    <input id="age" type="number">
    
    <button id="send" type="submit">Send it</button>
</form>

CSS

label,
input {
    display: block;
}

JavaScript

$("#form").on("submit", function(event) {
    event.preventDefault();
    
    var person = {
        firstName: $("#firstName").val(),
        lastName: $("#lastName").val(),
        age: $("#age").val()
    };
    
    var postData = {
        json: JSON.stringify(person)
    };
    
    var queryString = "firstName=" + person.firstName + "&lastName=" + person.lastName + "&age=" + person.age; 
    
    $.ajax({
        url: "/echo/json/?" + queryString,
        data: postData,
        type: "POST"
    }).done(function(data, status) {
        console.log("success data", data);
        console.log("status", status);
    }).fail(function(data, status) {
        console.log("error data", data);
        console.log("status", status);
    });
});