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="[e-mail]" />
        </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.