JSFiddle - React, Tailwind, and code Playground

by hansvedo

HTML

<form id="info_form">
    <input id="first_name" type="text" value="John">
    <input id="submit_button" type="submit" value="Submit">
</form>

<div id="paragraph">Hi <span id="first_name_placeholder"></span>, lorem ipsum.</div>

CSS

#paragraph{
 display:none;   
}

JavaScript

$(document).ready(function(){
    $('#submit_button').click(function(event){
        // Stop the form from actually submitting.        
        event.preventDefault();            
        
        // Capture the entered name and put it into the placeholder.
        var first_name = $('#first_name').val();
        $('#first_name_placeholder').html(first_name);
        
        // Hide the form
        $('#info_form').hide();        
        
        // Reveal the paragraph.
        $('#paragraph').show();
    });
});