JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#contact-modal">
  Launch modal
</button>
<div id="contact"></div>
<div id="contact-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3>Contact Form</h3>
            </div>
            <form id="contactForm" name="contactForm">
                <div class="modal-body">                
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" name="name" id="name" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" name="email" id="email" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea name="message" id="message" class="form-control"></textarea>
                    </div>                    
                </div>
                <div class="modal-footer">                    
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <!-- <input type="submit" class="btn btn-success" form="contact" id="submit200"> -->
                    <button type="button" onclick="submitForm()" class="btn btn-success" id="submit200" name="submit200" value="Save"...

JavaScript

$("#contactForm").on("submit", function(event) {
  event.preventDefault();
  submitForm();
});

function submitForm(){
    var data = [],
    $form = $('#contactForm'); // I tried #contactForm and .contactForm, nothing works.
    $.each( $form.serializeArray(), function () {
        console.log(this.value);
        data[ this.name ] = this.value;
    } );

     $.ajax({
        type: "POST",
        url: "/echo/html/",
        data: {html: JSON.stringify($form.serialize())},
        success: function(response){
        		console.dir(response);
            $("#contact").html(response)
            $("#contact-modal").modal('hide');
        },
        error: function(){
            alert("Error");
        }
    });
}