Question

I am using a third party shopping cart that sends a registration form to a .cgi script.

I want to send information from that form to me, and the customer via a jQuery $.get() function call.

The $.get calls a registration.mail.php script.

The problem is that the form submitting seems to cancel out the ajax call before the ajax call can be completed.

I can think of some inelegant solutions, and I have decided, because I’m about to travel, to use a counter and make the user click ‘Register’ twice. This solution hurts my soul obviously.

Here’s the Javascript, that lives in the footer:

<script type="text/javascript">
var getsuccess = false;
$(document).ready(function() {

    $('form#registerWholesale').bind('submit', function() {

        $email = $('#email').val();
        $username = $('#contactname').val();
        $company = $('#company').val();
        $phone = $('#billphone1').val();

        $message = "A new customer has registered at the wholesale website. \n ";
        $message += "They have the username of: " + $username + ". \n";
        $message += "Their company is: " + $company + ". \n";
        $message += "Their email is: " + $email + ". \n";
        $message += "Their phone is: " + $phone + ". \n";
        $message += "Please help them ASAP. You can access the back end of the site at: http://location of website admin backend";

      $.get('/mail.php', {from: '[e-mail]', message: $message, email: $email, username: $username, company: $company}, function(data, textStatus, xhr) {
         getsuccess = true;
      });

      if (getsuccess) {
        return true;
      }else{
        return false;
      }
    });


</script>

And here is the registration.mail.php code.

<?php

//Vendor email (to us)
$to = "[e-mail]";
$subject = "URGENT--New Registration--URGENT";
$message = htmlentities($_GET['message'], ENT_QUOTES, 'UTF-8');
//$message = $_GET['message'];
$from = htmlentities($_GET['from'], ENT_QUOTES, 'UTF-8');
//$from = trim($_GET['from']);
$headers = "From: $from";
mail($to,$subject,$message,$headers);
//echo "Mail Sent.";



//Customer email (to them)
$to_cust = htmlentities($_GET['email'], ENT_QUOTES, 'UTF-8');
$subject_cust = 'OurCompany Online Wholesale Account Request Recieved';
$message_cust = "Thank you for you interest in OurCompany's new wholesale website. \n\n
We have received your request to create an account.   In order to obtain a wholesale account, a OurCompany representative must verify your account information and details by telephone.  OurCompany will contact you within 1 business day at the telephone number that we have on file, or feel free to give us a call at 1-xxx-xxx-xxxx anytime if you would like a more rapid approval.  \n\n

Thanks Again ~ OurCompany";

$headers_cust = "From: [e-mail]";
mail($to_cust,$subject_cust,$message_cust,$headers_cust)
?> 

Thank you!

Answer 1

One solution is to bind the event to the button click , prevent the default action of the click so the form does not submit, then finally submit the form in the .get callback.

N.B As Jaanus suggests you should really look at the app design and send the mail and save the cart in the same call. What happens if the email gets sent then the form submission action fails?

$(document).ready(function() {

    $('#yourSubmitButton').click( function(ev) {

        //prevent form submission
        ev.preventDefault();

        $email = $('#email').val();
        $username = $('#contactname').val();
        $company = $('#company').val();
        $phone = $('#billphone1').val();

        $message = "A new customer has registered at the wholesale website. \n ";
        $message += "They have the username of: " + $username + ". \n";
        $message += "Their company is: " + $company + ". \n";
        $message += "Their email is: " + $email + ". \n";
        $message += "Their phone is: " + $phone + ". \n";
        $message += "Please help them ASAP. You can access the back end of the site at: http://location of website admin backend";

        $.get('/mail.php', {from: '[e-mail]', message: $message, email: $email, username: $username, company: $company}, function(data, textStatus, xhr) {

           //all is well, submit the form
           $('#yourForm').submit()

       });

    });