1

I am displaying a tell-a-friend form in a twitter bootstrap modal, I want to post the form without EE's default redirect page, keeping the user within the modal with a success message saying their email was sent.

I was able to post via ajax other EE forms (login/logout and some custom modules I built) but I am having trouble with the tell-a-friend form, below is my jQuery ajax code and tell-a-friend template code.

I use the jQuery validate library to only fire the form when all fields are satisfied. When I hit submit, it posts the data, sends the email successfully, redirects me to EE's default template saying:

Thank You!

Your email message has been sent.

Click here if you are not redirected automatically

Then redirects me to the page I was on.

$("#email-a-friend-form").validate({
    submitHandler: function() {

        $("#email-a-friend-form").submit(function(event) {
            event.preventDefault(); 

            var XID = $('#email-a-friend-form input[name=XID]');
            var RET = $('#email-a-friend-form input[name=RET]');
            var URI = $('#email-a-friend-form input[name=URI]');
            var ACT = $('#email-a-friend-form input[name=ACT]');
            var site_id = $('#email-a-friend-form input[name=site_id]');

            var user_recipients = $('#email-a-friend-form input[name=user_recipients]');
            var replyto = $('#email-a-friend-form input[name=replyto]');
            var redirect = $('#email-a-friend-form input[name=redirect]');
            var charset = $('#email-a-friend-form input[name=charset]');

            var to = $('#email-a-friend-form input[name=to]');
            var name = $('#email-a-friend-form input[name=name]');
            var from = $('#email-a-friend-form input[name=from]');
            var subject = $('#email-a-friend-form input[name=subject]');
            var message = $('#email-a-friend-form textarea[name=message]');

             $.ajax({
                 url: $("#email-a-friend-form").attr("action"), //your server side script
                 //url: '/index.php',
                 //data: $(this).serialize(),
                 data: { XID: XID, RET: RET, URI: URI, ACT: ACT, site_id: site_id, user_recipients: user_recipients, replyto: replyto, redirect: redirect, charset: charset, to: to, name: name, from: from, subject: subject, message: message },
                 type: 'POST',
                 success: function (data) {
                     //$('#response').append('<li>' + data + '</li>');
                     $('#email-a-friend-form').hide();
                     $('#email-a-friend-form-response').html("<h3 style='text-align:center;'>Thank you, your email was sent</h3>");
                 },
                 error: function (jxhr, msg, err) {
                     $('#email-a-friend-form-response').append('<li style="color:red">' + msg + '</li>');
                 }
             });
        });
    }
});


{exp:email:tell_a_friend status="open|Featured" form_id="email-a-friend-form"}
    <div class="col-sm-12">
        <h4>Required fields*</h4>
    </div>

    <div class="field">
        <label for="to">*Receipient's Email: </label>
        <input type="text" id="to" name="to" size="40" maxlength="35" class="required" />
    </div>

    <div class="field">
        <label for="name">*Your Name: </label>
        <input type="text" id="name" name="name" size="40" maxlength="35" value="{member_name}" class="required" />
    </div>
    <div class="field">
        <label for="from">*Your Email:</label>
        <input type="text" id="from" name="from" size="40" maxlength="35" value="{member_email}" class="required" />
    </div>

    <div class="field">
        <label for="subject">Subject:</label>
        <input type="text" id="subject" name="subject" size="40" value="Check out this recipe {title}" class="required" />
    </div>
    <div class="field comments">
        <label for="message">Comments:</label>
        <textarea id="message" name="message" rows="18" cols="40" class="required">{title_permalink="recipes/view"}</textarea>
    </div>
    <div class="field">
        <input name="submit" type='submit' value='Submit Form' />
    </div>
{/exp:email:tell_a_friend}

Rendered html

<form id="email-a-friend-form" method="post" action="http://domain.dev/"  >
<div class='hiddenFields'>
<input type="hidden" name="XID" value="d86fbce39b478093a96c57e4d07fd42a35acdaa3" />
<input type="hidden" name="ACT" value="5" />
<input type="hidden" name="RET" value="" />
<input type="hidden" name="URI" value="recipes/view/chicken-tostada" />
<input type="hidden" name="recipients" value="NjNhOWYwZWE3YmI5ODA1MDc5NmI2NDllODU0ODE4NDU=" />
<input type="hidden" name="user_recipients" value="2e3b623e1a07a6150a744a7b74c18e69" />
<input type="hidden" name="charset" value="" />
<input type="hidden" name="redirect" value="" />
<input type="hidden" name="replyto" value="" />
<input type="hidden" name="site_id" value="1" />
</div>

    <div class="col-sm-12">
        <h4>Required fields*</h4>
    </div>

    <div class="field">
        <label for="to">*Receipient's Email: </label>
        <input type="text" id="to" name="to" size="40" maxlength="35" class="required" />
    </div>

    <div class="field">
        <label for="name">*Your Name: </label>
        <input type="text" id="name" name="name" size="40" maxlength="35" value="Brad Morse" class="required" />
    </div>
    <div class="field">
        <label for="from">*Your Email:</label>
        <input type="text" id="from" name="from" size="40" maxlength="35" value="bmorse@brandmovers.com" class="required" />
    </div>

    <div class="field">
        <label for="subject">Subject:</label>
        <input type="text" id="subject" name="subject" size="40" value="Check out this recipe Chicken Tostada" class="required" />
    </div>
    <div class="field comments">
        <label for="message">Comments:</label>
        <textarea id="message" name="message" rows="18" cols="40" class="required">http://misn003.dev/en/recipes/view/chicken-tostada</textarea>
    </div>
    <div class="field">
        <input name="submit" type='submit' value='Submit Form' />
    </div>
</form>

<div id="email-a-friend-form-response"></div>

UPDATE: Bad jQuery, this did it:

$("#email-a-friend-form").validate({
    submitHandler: function() {

         $.ajax({
             url: $("#email-a-friend-form").attr("action"),
             data: $("#email-a-friend-form").serialize(),
             type: 'POST',
             success: function (data) {
                 $('#email-a-friend-form').hide();
                 $('#email-a-friend-form-response').html("<h3 style='text-align:center;'>Thank you, your email was sent!</h3>");
             },
             error: function (jxhr, msg, err) {
                 $('#email-a-friend-form').append('<li style="color:red">' + msg + '</li>');
             }
         });
    }
});
1

Browse other questions tagged or ask your own question.