使用Mootools的新闻稿注册表，没有页面重新加载

Question

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 submission without reloading
• I don't want to have to use jQuery or Protoype or any other library outside of Mootools (I already have Mootools for some other parts of the site, and adding more libraries to that would create too much clutter I think?)
• Trying to find one with nice but simple effects (like the spinning "loading" image when it's sending...but only found this for jQuery/Prototype so far)
• I'm using clean urls: .htaccess to send the URI to index.php, which then parses the URL and figures out what php files to include to create each page. In other words, I'm not sure if there's a way to do the validation/insert entries into mysql without messing with the URL?

Any help would be much appreciated, thank you!

Answer 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><a href="demos/Ajax.Form/ajax.form.phps">See ajax.form.phps</a></p>

<form id="myForm" action="demos/Ajax.Form/ajax.form.php" method="get">
    <div id="form_box">
        <div>
            <p>First Name:</p>
            <input type="text" name="first_name" value="John" />
        </div>
        <div>
            <p>Last Name:</p>
            <input type="text" name="last_name" value="Q" />
        </div>
        <div>
            <p>E-Mail:</p>
            <input type="text" name="e_mail" value="john.q@mootools.net" />
        </div>
        <div>
            <p>MooTooler:</p>
             <input type="checkbox" name="mootooler" value="yes" checked="checked" />
        </div>
        <div>
            <p>New to Mootools:</p>
            <select name="new">
              <option value="yes" selected="selected">yes</option>
              <option value="no">no</option>
            </select>
        </div>
        <div class="hr"><!-- spanner --></div>
        <input type="submit" name="button" id="submitter" />
    <span class="clr"><!-- spanner --></span>
    </div>
</form>
<div id="log">
    <h3>Ajax Response</h3>
    <div id="log_res"><!-- spanner --></div>
</div>
<span class="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_box div {
    height: 25px;
    padding: 0.2em 0.5em;
}

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

#form_box p {
    float: left;
    margin: 4px 0pt;
    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: 20px 0;
    background: url(http://demos111.mootools.net/demos/Group/spinner.gif) no-repeat center;
}

Hope this helps.

Answer 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();

    new Request({
        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 class
        onComplete: 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.