CODEWITHSUNDEEP
formsamp-html
SenderDefender
SenderDefender

Reputation: 43

No body on AMP form submit

Hi guys I'm learning how to use AMP and coming to an issue where my api requests are coming back with an empty body. My get route works fine and my post route works for non-AMP form submissions.

If someone could let me know what Im doing wrong it'd be appreciated!

HTML for the AMP form, from the amp website & contains no amp errors on load.

<form method="post" action-xhr="/subscribe" target="_top" style="width: 75%; margin: auto;">
            <fieldset>
                <label>
                    <span>Name:</span>
                    <input type="text" name="name" required>
                </label>
                <br>
                <label>
                    <span>Email:</span>
                    <input type="email" name="email" required>
                </label>
                <br>
                <input type="submit" value="Subscribe">
            </fieldset>
            <div submit-success>
                <template type="amp-mustache">
                    Subscription successful!
                </template>
            </div>
            <div submit-error>
                <template type="amp-mustache">
                    Subscription failed!
                </template>
            </div>
        </form>

API routes, get works fine and the post works for non-AMP forms

module.exports = function (app) {
    // Subs get
    app.get("/api/all", function (req, res) {
        Sub.findAll({}).then(function (results) {
            res.json(results);
        });

    });

    // Subs post
    app.post("/subscribe", function (req, res) {
        console.log("Sub Data:");
        console.log(req.body);        
    });
};

Upvotes: 1

Views: 271

Answers (1)

Channaveer Hakari
Channaveer Hakari

Reputation: 2927

The first and the foremost thing to work for AMP form is to use the following script

<script async="" custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

Secondly your action-xhr must be full domain path and must be HTTPS

From this

action-xhr="/subscribe"

To this

action-xhr="https://yourdomain.com/subscribe"

Upvotes: 1

Related Questions