Ajax Subscribe

ajax.js

$("#stepOne").on("submit", function(e) {
    e.preventDefault();
    
    // This is the shape of the data. Email and List_ID are required for every request
    // the optional params are 'spa_wellness', 'family', 'exclusive_offers' and 'midweek_offers'
    // the values for these are true or false. You can just submit only the true values if necessary.
    // this below example is just an idea. Whatever way you want to post the data is up to you.

    var initial_data = {
        list_id: "XXXXX",
        name: $(".name").val(),
        email: $(".email").val()
    }

    // The email here is the ID of the subscriber, so when you post additinal interests in step two we can map them to the users email
    var interests = {
        email: $(".email").val()
        spa_wellness: $(".spa_wellness").prop("checked"),
        family: $(".family").prop("checked"),
        exclusive_offers: $(".exclusive_offers").prop("checked"),
        midweek_offers: $(".midweek_offers").prop("checked")
    };

    $.post("https://send.ie/wp-json/subscribe/v1/flynnhotels", initial_data).then(function(resp) {
        
        if(resp.success) {
            
            // this is where you would display the modal for step two
            // then on the second submit of step two you post it through
            $("#stepTwo").on("submit", function(e) {
                e.preventDefault();
                $.post("https://send.ie/wp-json/subscribe/v1/flynnhotels", interests).then(function(resp) {
                    if(resp.success) {
                        // close modal
                        // show thanks message
                        // etc
                    }
                });
            });

        } else {
            // handle error i.e email isnt correct etc
        }
    
    });
});

index.html

<div class="subscribe">
    <form id="stepOne" action="/">
        <p>
            <label for="fieldName">Name</label>
            <input id="fieldName" name="name" type="text" class="name" value="[email protected]" />
        </p>
        <p>
            <label for="fieldEmail">Email</label>
            <input id="fieldEmail" name="email" type="email" class="email" value="[email protected]" />
        </p>
        <p>
                <button class="js-cm-submit-button" type="submit">Subscribe</button>
            </p>
    </form>

    <div class="modal">
        <form id="stepTwo" action="/">
            <p>
                <label for="spa_wellness">
                    Spa & Wellness
                    <input type="checkbox" name="spa_wellness" id="spa_wellness" class="spa_wellness">
                </label>
        
                <label for="family">
                    Family
                    <input type="checkbox" name="family" id="family" class="family">
                </label>
        
                <label for="exclusive_offers">
                    Exclusive Offers
                    <input type="checkbox" name="exclusive_offers" id="exclusive_offers" class="exclusive_offers">
                </label>
        
                <label for="midweek_offers">
                    Midweek Offers
                    <input type="checkbox" name="midweek_offers" id="midweek_offers" class="midweek_offers">
                </label>

                <button class="js-cm-submit-button" type="submit">Subscribe</button>
            </p>
        </form>
    </div>

</div>