0

I have worked on this for a while and gave up because I couldn't figure it out, but now I'm back to it. I have an email newsletter signup form on my website, and I have a checkbox for people to check if they are interested in music classes with me. The way I want the form to work is that if they are not interested in classes, I will get no value, but if they are interested in classes I get "Interested in classes - $city". Right now I am getting "Interested in classes - $city" in both cases.

The form is kind of complicated because I'm using javascript as well as the regular html code (hiding divs, etc), so I think I'm getting confused there.

The form:

<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="<?php echo $_POST['yourName']; ?>" /><br />
                </li>
                <li class="city"><label for="yourCity">City: </label>
                    <input type="text" name="yourCity" class="info" id="yourCity" value="<?php echo $_POST['yourCity']; ?>" /><br />
                </li>
                <li class="classes"><label for="classInterest">Interested in classes?: </label>
                    <input type="checkbox" name="classInterest" class="info" id="classInterest" value="Yes" /><br />
                </li>
                <li class="email">
                    <label for="emailFrom">Email: </label>
                    <input type="text" name="emailFrom" class="info" id="emailFrom" value="<?php echo $_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>

The javascript-my apologies if this code is not relevant to the question-I'm still pretty new so I have found that it is best to include too much rather than not enough! (I'm using jQuery):

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

 $('#emailFrom')
  .focus(function(){
   if ($('#overlay').length) { return; } // don't keep adding overlays if one exists
   $('#sendEmail')

    .find('.name, .city, .classes').slideDown(300, function(){ $(this).show(); });
   $('.outeremailcontainer').css({ position: 'relative', bottom: 0, left: 0, zIndex : 1001 });
   $('<div id="overlay"></div>').appendTo('body');
  });

 $('#overlay').live('click', function(){
   $('#sendEmail')
    .css({ backgroundColor : 'transparent' })
    .find('.name, .city, .classes').slideUp(300);
   $('.outeremailcontainer').css({ position : 'static' });
   $('#overlay').remove();
  });

});
</script>

Here is the javascript for checking the errors on the form and emailing setting the value for the class interest classInterestVal:

$(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"><br />You forgot to enter the email address to send from.</span>');
      hasError = true;

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

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

    var yourCityVal = $("#yourCity").val();
    if(yourCityVal == '') {
        $("#yourCity").after('<span class="error"><br />You forgot to enter your city.</span>');
        hasError = true;
    }
    var classInterestVal = $("#classInterest").val();


    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, yourName: yourNameVal, yourCity: yourCityVal, classInterest: classInterestVal },
             function(data){
            $("#sendEmail").slideUp("normal", function() {
              $("#sendEmail").before('<h3 class="register2">Thank you!  You\'re on the email list!</h3><p class="emailbox">Click <a href="http://rattletree.com/Songs/Live_EP/Chikende.mp3">HERE</a> for your free song.</p>');
            });
             }
         );
    }
    return false;
  });
});

And lastly here is the sendEmail.php (this is where I put the conditional for $classInterest):

    <?php 
$mailTo = '[email protected]'; // This is the hardcoded Recipient Address 
$mailSubject = 'Newsletter'; // This is the hardcoded Subject
$mailFrom = $_POST['emailFrom']; 
$yourName = $_POST['yourName']; 
$yourCity = $_POST['yourCity'];


if (isset($_POST['classInterest']) && $_POST['classInterest'] == 'Yes'){
                            $classInterest ="Class Interest - " . $yourCity;
                        }
                        else {
                            $classInterest = '';
                        }
$mailHeader = "From: {$mailFrom}"; 
$mailBody = "Name = {$yourName} City = {$yourCity} Class interest = {$classInterest}";

mail( $mailTo , $mailSubject , $mailBody , $mailHeader );
?>
3
  • And... where are you getting that message anyways? I read "Class Interest - " . $yourCity instead :) Commented Jan 15, 2013 at 21:02
  • @Alexander When I fill out the form and send it, the email I receive has Class Interest - $yourCity no matter what. Commented Jan 15, 2013 at 21:03
  • 1
    To collect form input, check out the serialize() method api.jquery.com/serialize Commented Jan 15, 2013 at 21:10

1 Answer 1

1

Getting .val() from classInterest will always return the value whether it is checked or not. What you need to do is $("#classInterest").is(":checked") this will return a boolean telling you if the checkbox is checked or not.

A good way to debug problems like this in the future would be to view the network tab in a browser like Chrome that has dev tools (F12). This will allow you to view the information that you are passing so that you can see where the error is occurring.

If you want the value then do:

var classInterest = $("#classInterest");
var classInterestVal = classInterest.is(":checked") ? classInterest.val() : "";

I'm caching the classInterest selector here for efficiency.

Sign up to request clarification or add additional context in comments.

7 Comments

That did it! Thanks so much! And thank you for telling me how to debug this! I use firebug and just now learned how to do it there.
ah wait-so I changed the one line to 'var classInterestVal = $("#classInterest").is(":checked");' but now I'm not passing the value if it is 'true'
@Joel I updated the solution with a ternary operation that should solve your problem.
Yes that did it. Thank you! One area of confusion for me-why do I not need to change anything in the last sendEmail.php? Since the email is sending via javascript, does sendEmail.php not actually do the sending?
@Joel That's exactly what's happening. The post call is calling the php page and passing it the paramaters from the line that you mentioned api.jquery.com/jQuery.post
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.