Newsletter Signup Form Using Mootools, No Page Reload

I've been searching a lot for a good mootools script for a simple newsletter signup form with a one-line input field + send button. Some things I'm trying to consider: form submis

Solution 1:

You can use the Ajax.Form method, found here - This is an ajax post/post-back method for storing your data.

Here's the skinny on the code:

$('myForm').addEvent('submit', function(e) {
    /**
     * Prevent the submit event
     */new Event(e).stop();

    /**
     * This empties the log and shows the spinning indicator
     */var log = $('log_res').empty().addClass('ajax-loading');

    /**
     * send takes care of encoding and returns the Ajax instance.
     * onComplete removes the spinner from the log.
     */
    this.send({
        update: log,
        onComplete: function() {
            log.removeClass('ajax-loading');
        }
    });
});

HTML/CSS to use with this reference code:

<h3>Send a Form with Ajax</h3><p><ahref="demos/Ajax.Form/ajax.form.phps">See ajax.form.phps</a></p><formid="myForm"action="demos/Ajax.Form/ajax.form.php"method="get"><divid="form_box"><div><p>First Name:</p><inputtype="text"name="first_name"value="John" /></div><div><p>Last Name:</p><inputtype="text"name="last_name"value="Q" /></div><div><p>E-Mail:</p><inputtype="text"name="e_mail"value="john.q@mootools.net" /></div><div><p>MooTooler:</p><inputtype="checkbox"name="mootooler"value="yes"checked="checked" /></div><div><p>New to Mootools:</p><selectname="new"><optionvalue="yes"selected="selected">yes</option><optionvalue="no">no</option></select></div><divclass="hr"><!-- spanner --></div><inputtype="submit"name="button"id="submitter" /><spanclass="clr"><!-- spanner --></span></div></form><divid="log"><h3>Ajax Response</h3><divid="log_res"><!-- spanner --></div></div><spanclass="clr"><!-- spanner --></span>

Additional reference CSS:

#form_box {
    float: left;
    width: 290px;
    background: #f8f8f8;
    border: 1px solid #d6d6d6;
    border-left-color: #e4e4e4;
    border-top-color: #e4e4e4;
    font-size: 11px;
    font-weight: bold;
    padding: 0.5em;
    margin-top: 10px;
    margin-bottom: 2px;
}

#form_boxdiv {
    height: 25px;
    padding: 0.2em0.5em;
}

#form_boxdiv.hr {
    border-bottom: 2px solid #e2e2e1;
    height: 0px;
    margin-top: 0pt;
    margin-bottom: 7px;
}

#form_boxp {
    float: left;
    margin: 4px0pt;
    width: 120px;
}


#log {
    float: left;
    padding: 0.5em;
    margin-left: 10px;
    width: 290px;
    border: 1px solid #d6d6d6;
    border-left-color: #e4e4e4;
    border-top-color: #e4e4e4;
    margin-top: 10px;
}

#log_res {
    overflow: auto;
}

#log_res.ajax-loading {
    padding: 20px0;
    background: url(http://demos111.mootools.net/demos/Group/spinner.gif) no-repeat center;
}

Hope this helps.

Solution 2:

to fix the north creative example so it works with 1.2+:

http://jsfiddle.net/dimitar/gEdqa/

the code to intercept the form submission is as simple as can be:

document.id("myForm").addEvent("submit", function(e) {
    e.stop();

    newRequest({
        url: this.get("action"),
        method: "post",
        data: this,
        onRequest: function() {
            document.id("result").set("html", "sending...");
            // or do whatever spinner you want.
        },
        // update: $("results"),// evalScripts: true, // etc etc options to request classonComplete: function() {
            document.id("result").set("html", this.response.text);
        }
    }).send();
});

also, storing a request instance in the element.send prototype shortcut still works but i will leave you to read up on the details.