JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Form Test</h2>
<p>
     <label>Method</label>: <select id="method" name="method">
        <option value="GET">GET</option>
        <option value="POST">POST</option>
        <option value="HEAD">HEAD</option>
        <option value="PUT">PUT</option>
        <option value="DELETE">DELETE</option>
    </select>
    <br/>
    <label>Use Ajax</label>: <input type="checkbox" id="use-ajax" checked="true"/>
</p>    
<form id="form" method="post" action="/echo/html/">
    <input type="text" name="param1" value="123"/><br/>
    <input type="text" name="param2" value="Jones & Jones"/><br/>
    <input type="text" name="param3" value="$&+,/:;=?@ #%{}|\^~[]´'"/>
    <input type="hidden" name="html" value="Text echoed back to request"/>
    <p>
        <input type="submit"/>
    </p>
</form>
<hr/>
<h2>Mulitpart Form Test</h2>
<form id="form2" method="post" action="/echo/html/" enctype="multipart/form-data">
    <input type="file" name="file"/>
    <input type="hidden" name="html" value="Text echoed back to request"/>
    <input type="submit"/>
</form>

JavaScript

jQuery("#form").on("submit", function(event) {
    var method = jQuery("#method").val();
    jQuery("#form").attr("method", method);
    if (!jQuery("#use-ajax").is(":checked")) {
        return true;
    }
    event.preventDefault();
    jQuery.ajax({
       url: '/echo/html/',
       type: method,
       data: jQuery("#form").serialize(),
       success: function(response) {
         //...
       }
    });
    return false;
});