JSFiddle - React, Tailwind, and code Playground

by AndreaLigios

HTML

<div id="form-detail">
  <form action="https://postman-echo.com/post" method="POST">
    <input type=hidden name="oid" value="00D1q0000008dRY">    
    <input type="text" name="foo" value="bar" />
    <input type="submit" value="Invia" />
  </form>
</div>

JavaScript

$(document).on('submit','#form-detail>form',  function(e, options) {
    options = options || {};

    if ( !options.salesforce_post_completed ) {
        console.log("Preventing the default form submit");
        e.preventDefault();
        console.log("Firing an AJAX form submit to Salesforce");
        // The following URL must allow THIS site to perform CORS requests.
        // Salesforce whitelist: 
        $.post( "https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8", $( "#form-detail>form" ).serialize())
         .done(function(){ console.log("Salesforce OK!");})
         .fail(function(){ console.log("Salesforce Error!");})
         .always(function() {
						console.log("Triggering again the submit event");
            $(e.currentTarget).trigger('submit', { 'salesforce_post_completed': true });
  			});
    } else {
        console.log("Now sending the default POST request");
    } 
});