piecing together a jquery form mailer

Posted by Joel on Stack Overflow See other posts from Stack Overflow or by Joel
Published on 2010-05-05T06:40:05Z Indexed on 2010/05/05 6:48 UTC
Read the original article Hit count: 199

Filed under:
|

Hi guys, My newbieness is shining through here...I managed to piece together a form mailer that works great, but now I need to add two more fields, and I'm at a loss as to how to do it. Over the months, I have commented out some things I didn't need, but now I'm stuck.

I borrowed from this tutorial to make the original form: http://trevordavis.net/blog/tutorial/ajax-forms-with-jquery/

But then I cannibalized it to make an email signup form for a newsletter, so the fields I need are:

  • recipient email (me-hard coded in)

  • senders email address subject (hardcoded in)

  • first name and city in the body of the message

For my form, I have this:

<div>
  <?php include('verify.php'); ?>
      <form action="index_success.php" method="post" id="sendEmail" class="email">
        <h3 class="register2">Newsletter Signup:</h3>
        <ul class="forms email">
         <li class="name"><label for="yourName">Name: </label>
     <input type="text" name="yourName" class="info" id="yourName" value=" " /><br>
    </li>

    <li class="city"><label for="yourCity">City: </label>
     <input type="text" name="yourCity" class="info" id="yourCity" value=" " /><br>
    </li>
     <li class="email"><label for="emailFrom">Email: </label>
     <input type="text" name="emailFrom" class="info" id="emailFrom" value="<?= $_POST['emailFrom']; ?>" />
                 <?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>'; 
                 ?>
            </li>

           <li class="buttons email">
               <button type="submit" id="submit">Send</button>
               <input type="hidden" name="submitted" id="submitted" value="true" />
           </li>

        </ul>
      </form>
</div>

emailcontact.js:

$(document).ready(function(){
  $("#submit").click(function(){
    $(".error").hide();
    var hasError = false;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;


    var emailFromVal = $("#emailFrom").val();

    if(emailFromVal == '') {
      $("#emailFrom").after('<span class="error">You forgot to enter the email address to send from.</span>');
      hasError = true;

    } else if(!emailReg.test(emailFromVal)) {
      $("#emailFrom").after('<span class="error">Enter a valid email address to send from.</span>');
      hasError = true;
    }

    var subjectVal = $("#subject").val();
    if(subjectVal == '') {
        $("#subject").after('<span class="error">You forgot to enter your name.</span>');
        hasError = true;
    }

    var messageVal = $("#message").val();
    if(messageVal == '') {
        $("#message").after('<span class="error">You forgot to enter your city.</span>');
        hasError = true;
    }
    if(hasError == false) {
      $(this).hide();
      $("#sendEmail li.buttons").append('<img src="/wp-content/themes/default/images/template/loading.gif" alt="Loading" id="loading" />');
      $.post("/includes/sendemail.php",
//emailTo: emailToVal, 
           { emailFrom: emailFromVal, subject: subjectVal, message: messageVal  },
             function(data){
            $("#sendEmail").slideUp("normal", function() {
              $("#sendEmail").before('<h3 class="register2">Success!</h3><p class="emailbox">You are on the Newsletter email list.</p>');
            });
             }
         );
    }
    return false;
  });
});

sendmail.php:

<?php
$mailTo = $_POST['emailTo'];
$mailFrom = $_POST['emailFrom'];
$subject = $_POST['yourName'];
$message = $_POST['yourCity'];
mail('[email protected]','Rattletree Newsletter', 'Name='.$subject. ' City='.$message, "From: ".$mailFrom);

?>

Thanks for any help! I'm going crosseyed trying to figure this one out.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about form