JSFiddle - React, Tailwind, and code Playground

by lise_nakache

HTML

<form method="post" action="/echo/html/">
    
    <span id="result"></span>
   
    <span>        
        <label>Message: </label>
        <input type="text" name="html" placeholder="Name" />
    </span>
    
    <span>
        <input type="submit" value="Submit" />      
    </span>
    
</form>

CSS

body{
    font-family: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif;
    font-size: 13px;       
}

form span{  
    display: block;
    margin: 10px;
}

label{
    display: inline-block;
    width: 100px;     
}

input[type="text"]{
    border: 1px soild #ccc;
    width: 200px;
    padding: 5px;
}

input[type="submit"]{
     padding: 5px 15px;       
}

span#result{
    padding: 5px;
    background: #ff9; 
    color: red
}

JavaScript

$(document).ready(function(e) {
    
    $("form").submit(function(e) {
        
        e.preventDefault();
        
        var form_data = $(this).serialize();
        var form_url = $(this).attr("action");
        var form_method = $(this).attr("method").toUpperCase();
        
       
        $.ajax({
            url: form_url, 
            type: form_method,      
            data: form_data,     
            cache: false,
            success: function(returnhtml){                       
                $("#result").append(returnhtml);              
            }           
        });    
        
    });
    
});