JSFiddle - React, Tailwind, and code Playground

by staeff

HTML

<html>

    <head>
        <script type="text/javascript" src="script.js"></script>
    </head>

    <body>
        <form name="myTravelForm">
            <label>First Name:</label>
            <input type="text" name="firstname" />
            <label>Last Name:</label>
            <input type="text" name="lastname" />

            <select name="destination">
                <option value="Antarctica" selected>Antarctica</option>
                <option value="Costa Rica">Costa Rica</option>
            </select>
                <input type="button" value="Add this traveler" id="subutton"/>
        </form>
        
        <div id="travelerInfo"></div>

    </body>

</html>

JavaScript

// Form data to document content
document.getElementById('subutton').onclick = function() {
    processTravelForm();
};

function processTravelForm() {
    var firstName = document.myTravelForm.firstname.value;
    var lastName = document.myTravelForm.lastname.value;
    var destination = document.myTravelForm.destination.value;
    
    var travelerInfo = '<div>First Name: ' + firstName;
    travelerInfo += ' | Last Name: ' + lastName;
    travelerInfo += ' | Destination: ' + destination + '</div>';
    document.getElementById("travelerInfo").innerHTML += travelerInfo;
    
}