JSFiddle - React, Tailwind, and code Playground

by ashleycam3ron

HTML

<h1>Add a Location</h1>

<form method="post" action="add_location.php" name="add_location_form" id="add_location_form">
    
    
    <div class="formitem">
        <label for="street">Street Address:</label>
        <input type="text" id="street" name="street" />
    </div>
    
    <div class="formitem">
        <label for="city"> City:</label>
        <input type="text" id="city" name="city" />
    </div>
    
    <div class="formitem">
        <label for="state">State:</label>
        <select name="state" id="state" size="1">
            <option value="AK">AK</option>
            <option value="AL">AL</option>
            <option value="AR">AR</option>
            <option value="AZ">AZ</option>
            <option value="CA">CA</option>
            <option value="CO">CO</option>
            <option value="CT">CT</option>
            <option value="DC">DC</option>
            <option value="DE">DE</option>
            <option value="FL">FL</option>
            <option value="GA">GA</option>
            <option value="HI">HI</option>
            <option value="IA">IA</option>
            <option value="ID">ID</option>
            <option value="IL">IL</option>
            <option value="IN">IN</option>
            <option value="KS">KS</option>
            <option value="KY">KY</option>
            <option value="LA">LA</option>
            <option value="MA">MA</option>
            <option value="MD">MD</option>
            <option value="ME">ME</option>
            <option value="MI">MI</option>
            <option value="MN">MN</option>
            <option value="MO">MO</option>
            <option value="MS">MS</option>
            <option value="MT">MT</option>
            <option value="NC">NC</option>
            <option value="ND">ND</option>
            <option value="NE">NE</option>
            <option value="NH">NH</option>
            <option value="NJ">NJ</option>
            <option value="NM">NM</option>
            <option...

CSS

.formitem{padding:10px 0;}

JavaScript

$('#street, #city, #state, #zip').bind('keypress blur', function() {
       
        
    $('#latlongaddress').val($('#street').val() + ' ' +
                             $('#city').val() + ', ' +
                             $('#state').val() + ' ' +
                             $('#zip').val() );
});