JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset id="myData">
    <legend>My Data</legend>
</fieldset>

<form id="myForm" action="/ajax_html_echo/">
    <input type="text" value="Default value">
    <input type="submit" value="Click me" />
        <input type="hidden" />
    <!--hidden is for being able to submit by hitting enter-->
</form>

JavaScript

$(function() {
   $('#myForm').submit(function() {
      //do whatever you want here.
      //this will take place after the form is submitted, but before your ajax request
      $('input[type=text]').each(function() {
          $('#myData').append('<div class="placeholder">' + $(this).val() + '</div>');
      });

      //serialize your form data
      var toSubmit = $('input[type=text]').serialize();

      //do ajax here
      $.post('/ajax_html_echo/', toSubmit, function(data) {
        alert('Your AJAX POST request returned: ' + data);
      }, 'text');

      //this will prevent the form from submitting normally
      return false;
   });
});