JSFiddle - React, Tailwind, and code Playground

by aldomatic

HTML

<form id="leadForm" role="form" method="post" action="#" autocomplete="off" parsley-validate>
    <!-- Hidden Values -->
    <input type="hidden" name="sample" id="sample" value="campagin id" />
    
    
    <!-- Form Values -->
    <input type="text" name="firstname" id="firstname" value="" placeholder="First Name" />
    <input type="text" name="lastname" id="lastname" value="" placeholder="Last Name" />
    
    <button type="submit" id="submitLeadButton">Submit &amp; Continue</button>  
</form>

JavaScript

$(function(){
   // Submit Button Event
    $("#submitLeadButton").click(function(event){
        event.preventDefault();
           postLeadCall();   
    });
    
});

// Method to post to service
function postLeadCall(){ 
   //var isValid = $("#leadForm").parsley('validate');  
    //if (isValid){ 
        
        var formData = {};
        $.each($("#leadForm").serializeArray(), function(i, field) {
            formData[field.name] = field.value;
        });
    
        $.ajax({
            type: 'POST',
            url: "WEB SERVICE URL HERE",
            data: formData,
            crossDomain: true,
            beforeSend: function(){
               // nothing
            },
            error: function(jqXHR, data, errorThrown) {
                alert("We're sorry, an error has occurred");
            },
            success: function(data){
                console.log(data); // Response data from third party service
            }
        });  
   // }
}