JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<form id="form1" name="form1" method="post" action="">
<select name="Select1" id="Select1">
  <option value="Item 1">Item 1</option>
  <option value="Item 2">Item 2</option>
  <option value="Item 3">Item 3</option>
</select>
<br />
<select name="OtherItem" id="OtherItem">
  <option value="OtherItem 1">OtherItem 1</option>
  <option value="OtherItem 2">OtherItem 2 </option>
  <option value="OtherItem  3">OtherItem 3</option>
</select>
<input type="text" name="textfield1" id="textfield1" />
<input type="text" name="textfield2" id="textfield2" />
    <textarea></textarea>
</form><div id="FormSummary"></div>

JavaScript

$('input, select, textarea')
    .on('change',
        function(e){
            var inputs = $('input:text').map(
                function(){
                    return $(this).val();
                        }).get().join(', ');
            var selects = $('select option:selected').map(
                function(){
                    return $(this).text();
                });
            var textareas = $('textarea').map(
                function(t){
                    return $(this).val();
                }).get().join();
            $('#FormSummary')
                .html('<p>Inputs: ' + inputs + '.</p><p>Selects: ' + selects + '.</p><p>Textareas: ' + textareas + '</p>');
        });