piecing together a jquery form mailer

Question

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 (my email-hard coded in)

• senders email address

• the 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]','Newsletter', 'Name='.$subject. ' City='.$message, "From: ".$mailFrom);

?>

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

Answer 1

Not 100% sure of what the difficulty is here. From my reading of the OP, I am assuming the following:

• You want to add an additional two fields ('first name' and 'city') to the Form and have their contents shown in the body of the Email which is generated.
• You want to hardcode the Recipient's Email address.
• You want to add an additional field to the Form for the Sender's Email Address.
• You want to hardcode the Subject of the Email generated.

I am not completely sure if that was what you wanted as "senders email address subject (hardcoded in)" doesn't sound terribly clear.

Anyway, working off those assumptions:

1. Simply add two new fields to the Form in the PHP file for "firstName" and "city" (Note: these are just suggested field names, and can be whatever you want. But I will use these in the offered solution for clarity.)

2. Within the sendmail.php file, modify as follows:

   $mailTo = '[email protected]'; // This is the hardcoded Recipient Address $mailSubject = 'This is the Subject'; // This is the hardcoded Subject

   $mailFrom = $_POST['emailFrom']; $firstName = $_POST['firstName']; $city = $_POST['city'];

   ... (Additional Fields, and maybe some further validation here) ... $mailHeader = "From: {$mailFrom}"; $mailBody = "Name = {$firstName} City = {$city}";

   mail( $mailTo , $mailSubject , $mailBody , $mailHeader );

3. I should also note that, within the PHP file containing the form, there is no field called "subject" and yet it is referred to by your Javascript/jQuery validation.

Using an existing example as a framework to gain familiarity with the system is a great idea, but there is a point where you have to start redefining that example to do the work you need, which means changing variable names (which you may have adapted for other purposes) so that they are logical and appropriate for what they contain/are used for, etc.