How do I submit a poMMo mailing list form using Ajax without refresh?

Question

I have searched on here for ways to do this, but only simple Ajax submission forms have been asked about.

If anyone is not familiar with poMMo, it is a mailing list management software which allows developers to implement custom forms onto websites for the sole purpose of collecting emails for mailing lists. Is it possible to merge Ajax and the poMMo forms together?

The code I have been using is:

test.php

<form action='_test.php' method='post' class='ajaxform'>
<input type='text' name='txt' value='Enter e-mail address'>
<input type='submit' value='submit'>
</form>
</head>


<div id='testDiv'></div>

_test.php

<?php
  $arr = array( 'testDiv' => $_POST['txt'] );
  echo json_encode( $arr ); 
?>

jsFile.js

jQuery(document).ready(function(){

jQuery('.ajaxform').submit( function() {

    $.ajax({
        url     : $(this).attr('action'),
        type    : $(this).attr('method'),
        dataType: 'json',
        data    : $(this).serialize(),
        success : function( data ) {
                    for(var id in data) {
                        jQuery('#' + id).html( data[id] );
                    }
                  }
    });

    return false;
});

});

I will be checking back constantly to answer any questions and provide information for anyone willing to help. Please and thank you. :)

Answer 1

Here is the code I created:

<form action="" name="signup">
<fieldset>
<legend>Subscribe</legend>
<div>
<label for="email"><strong>Your Email:</strong></label>
<input type="text" name="Email" id="email" maxlength="60" />
</div>
</fieldset>
<div id="buttons">
<input type="hidden" id="pommo_signup" name="pommo_signup" value="true" />
<input type="submit" class="button" value="Subscribe" />
</div>
</form>

// JavaScript Document
$(document).ready(function() {
$('.button').click(function() {
    var email = $("input#email").val();
    var pommo_signup = $("input#pommo_signup").val();

    var data = 'Email='+ email + '&pommo_signup='+ pommo_signup;

    $.ajax({
        type: 'POST',
        url: 'http://localhost/pommo/user/process.php',
        data: data,
        dataType: 'json',
        success: function(json){                
            if (!json.success){
                alert(json.errors);             
            } else { 
                $("form").html("<div id='message'></div>");
                $('#message').html('<h2>Subscription Received!')
                .append("<p>We will be in touch soon.</p>")
                .hide()
                .fadeIn(1500);
            }
        },
        error: function(json){
        }
    });
    return false;
});    
});

You also need to add this to your PoMMo process.php file in order to get JSON data back from the request:

/**********************************
JSON OUTPUT INITIALIZATION
 *********************************/
Pommo::requireOnce($pommo->_baseDir.'inc/classes/json.php');
$json = new PommoJSON();

I put my main error messages in the validation part of the process.php by calling the fail method in the json.php file which is located in the /inc/classes/json.php:

/**********************************
VALIDATE INPUT
 *********************************/

if (empty ($_POST['pommo_signup']))
Pommo::redirect('login.php');

$subscriber = array(
'email' => $_POST['Email'],
'registered' => time(),
'ip' => $_SERVER['REMOTE_ADDR'],
'status' => 1,
'data' => @$_POST['d'],
);
// ** check for correct email syntax
if (!PommoHelper::isEmail($subscriber['email'])){
$json->fail(Pommo::_T('Invalid e-mail address. Please try again.'));
}
// ** check if email already exists in DB ("duplicates are bad..")
if (PommoHelper::isDupe($subscriber['email'])) {
$json->fail(Pommo::_T('Error the email already exists in the database.'));
}

Finally, I put my success message after the email was sent to the user in the add subscriber section of process.php:

If the subscription requires confirmation:

    // send confirmation message.
    if (PommoHelperMessages::sendMessage(array('to' => $subscriber['email'], 'code' => $subscriber['pending_code'], 'type' => 'confirm'))) {
        $subscriber['registered'] = date("F j, Y, g:i a",$subscriber['registered']);
        if ($comments || isset($notices['pending']) && $notices['pending'] == 'on')
            PommoHelperMessages::notify($notices, $subscriber, 'pending', $comments);

        $json->success(Pommo::_T('Subscription request received.'));
        if ($config['site_confirm'])
            Pommo::redirect($config['site_confirm']);
    }

and here also here if it doesn't...

else {

    // send/print welcome message
    PommoHelperMessages::sendMessage(array('to' => $subscriber['email'], 'type' => 'subscribe'));

    $subscriber['registered'] = date("F j, Y, g:i a",$subscriber['registered']);
    if ($comments || isset($notices['subscribe']) && $notices['subscribe'] == 'on')
        PommoHelperMessages::notify($notices, $subscriber, 'subscribe',$comments);

    $json->success(Pommo::_T('Subscription request received.'));

    // redirect
    if ($config['site_success'])
        Pommo::redirect($config['site_success']);
}

i ended up not using the success message but, you need to run the success method to turn it to true instead of false, otherwise json.success will never be anything but false.

Let me know if that helps!