Using JSON to submit an email subscriber

A client of ours uses DotNetNuke as their CMS and wishes to have a sign-up form on their website to gather email subscribers to their current Campaign Monitor list.

As DotNetNuke is an ASP.NET based system the problem of nested forms has arisen, meaning we cannot place as simple <form>...</form> on a page and have it submit correctly.

I'm trying to use a modified version of the AJAX submit form, as the standard AJAX method on github still relies on the elements being wrapped in a form in the standard manner.

Here's my code so far:

<script type="text/javascript">
    $(document).ready(function () {
        $('#campaignmonitor-btn').click(function () {
             $.getJSON('http://theaccountname.createsend.com/t/j/s/fjidy/',
            {
                "aljhk-aljhk": $('#fjidy-fjidy').val()
            },
            function (data) {
                if (data.Status == 400) {
                    alert("Error: " + data.Message);
                } else {
                    alert("Success: " + data.Message);
                }
        });
    });
});
</script>
<div>
    <label for="aljhk-aljhk">Email:</label><br /><input type="text" name="cm-fjidy-fjidy" id="fjidy-fjidy" /><br>
    <input type="button" id="campaignmonitor-btn" name="campaignmonitor-btn" value="Submit" />
</div>

But this appears currently to not actually submit the JSON object, despite my assumptions that it would.

Any help here would be greatly appreciated!

Phil Phil, 1 year ago

Hi Danny,

You're pretty close, although you've left out and modified a couple of crucial bits:
1. Form submissions submit the *name* of the element, not the id, and that's what the endpoint is looking for. So the json object you submit needs to be:

{
    "cm-fjidy-fjidy": $('#fjidy-fjidy').val()
}

2. To avoid the cross-site scripting problem, this needs to be a jsonp request (otherwise the browser won't submit anything - which is what you've found). The way to make getJSON do that is to include "callback=?" in the query string of the url, ie:

$.getJSON('http://theaccountname.createsend.com/t/j/s/fjidy/?callback=?', etc

Those two changes will do the trick.

DannyBishop, 1 year ago

Thanks Phil,

Your extra code help has solved the issue for me.  For anyone else keen on the full code:

<script type="text/javascript">
    $(document).ready(function () {
        $('#campaignmonitor-btn').click(function () {
             $.getJSON('http://accountname.createsend.com/t/j/s/fjidy/?callback=?',
            {
                "cm-name": $('#name').val(),
                "cm-fjidy-fjidy": $('#fjidy-fjidy').val()
            },
            function (data) {
                if (data.Status == 400) {
                    alert("Error: " + data.Message);
                } else {
                    alert("Success: " + data.Message);
                    // clear the form values to ensure no accidental repeat submissions
                    $('#name').val("");
                    $('#fjidy-fjidy').val("");
                }
        });
    });
});
</script>
<div>
    <label for="name">Name:</label><br /><input type="text" name="cm-name" id="name" /><br />
    <label for="aljhk-aljhk">Email:</label><br /><input type="text" name="cm-fjidy-fjidy" id="fjidy-fjidy" /><br>
    <input type="button" id="campaignmonitor-btn" name="campaignmonitor-btn" value="Submit" />
</div>

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account