0

私はしばらくこれに取り組み、理解できなかったのであきらめましたが、今は戻ってきました。私のウェブサイトにはメール ニュースレターのサインアップ フォームがあり、私と一緒に音楽のクラスに興味があるかどうかを確認するためのチェックボックスがあります。私がフォームを機能させたいのは、クラスに興味がない場合は値を取得しませんが、クラスに興味がある場合は「クラスに興味があります-$city」を取得することです。現在、どちらの場合も「クラスに興味があります-$city」を取得しています。

私は通常のhtmlコード(divを隠すなど)と同様にjavascriptを使用しているため、フォームは少し複雑なので、そこで混乱していると思います。

フォーム:

<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>

JavaScript-このコードが質問に関連していない場合は申し訳ありません-私はまだかなり新しいので、十分ではなく、多すぎることが最善であることがわかりました! (私は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>

フォームのエラーをチェックし、クラスの Interest の値を設定して電子メールを送信するための JavaScript は次の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;
  });
});

最後に、sendEmail.php を示します (これは、条件文を配置した場所です$classInterest)。

    <?php 
$mailTo = 'email@address.com'; // 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 );
?>
4

1 に答える 1

1

classInterestから.val()を取得すると、チェックされているかどうかに関係なく、常に値が返されます。$( "#classInterest")。is( ":checked")を実行する必要があります。これにより、チェックボックスがオンになっているかどうかを示すブール値が返されます。

将来このような問題をデバッグする良い方法は、開発ツール(F12)を備えたChromeのようなブラウザーでネットワークタブを表示することです。これにより、渡した情報を表示して、エラーが発生している場所を確認できます。

値が必要な場合は、次のようにします。

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

効率を上げるために、ここでclassInterestセレクターをキャッシュしています。

于 2013-01-15T21:03:31.970 に答える