PHPをHTMLファイルに追加した後にJQueryが機能しない

Question

私は完全に機能するjquery（フォーム送信用）を備えたWebページを構築しています。ファイルにphpを追加してユーザーデータをフォームに取り込んだ後、jQueryが機能しなくなり、ボタンのクリックでトリガされた関数が呼び出されなくなりました。

コンソールは、関数が呼び出されたときにこれを返します。ここで

Uncaught TypeError: Cannot read property 'length' of undefined 
at HTMLButtonElement.<anonymous> ((index):255) 
at HTMLButtonElement.dispatch (jquery.min.js:3) 
at HTMLButtonElement.q.handle (jquery.min.js:3) 

は、PHPはファイルの先頭に含まれています。bodyを通じて

<?php 
if(isset($_GET['p'])){ 
    $product_code = $_GET['p']; 
} 
else{ 
    $product_code = "beans"; 
} 

if(isset($_GET['name'])){ 
    $name = $_GET['name']; 
} 
else{ 
    $name = ""; 
} 

if(isset($_GET['email'])){ 
$email = $_GET['email']; 
} 
else{ 
$email = ""; 
} 

switch ($product_code) { 
    case "beans": 
    $product = "Baked Beans"; 
    break; 
    case "peas": 
    $product = "Green Peas"; 
    break; 
?> 

、<?php echo $product; ?>は、いくつかの場所に挿入されています。ここ

は</head>タグ（現在動作していない）の前に配置され、jQueryのである：ここ

$(document).ready(function() { 
    $("#form-cont-btn").click(function(e) { 
    e.preventDefault(); 
    var review = $('textarea#review').val(); 
// ***line 255 below*** 
    if (review.length < 1) { 
     $("textarea").addClass("error"); 
     alert("Oops! Looks like your review is empty..\n\nPlease write review before pressing 'Continue'."); 
     return false; 
    } else if (review.length < 50) { 
     $("textarea").addClass("error"); 
     alert("Oops! Your review should contain at least 50 characters"); 
     return false; 
    } 
    $(".act-1,.act-1-btn").fadeOut('slow', function() { 
     $(".act-2,.act-2-btn").fadeIn(); 
    }); 
    return false; 
    }); 
    $("textarea").click(function(e) { 
    $("textarea").removeClass("error"); 
    }); 
    var form = document.getElementById('form-id'); 
    $("#form-btn").click(function() { 
    var name = $('#name').val(); 
    if (name.length < 1) { 
     $("#name").addClass("error"); 
     alert("Oops! Looks like your name is empty..\n\nPlease enter your name before pressing 'Enter Now'."); 
     return false; 
    } else if (name.length < 2) { 
     $("#name").addClass("error"); 
     alert("Oops! Please enter a valid name, an alias is fine"); 
     return false; 
    } 
    var email = $('#email').val(); 
    if (email.length < 1) { 
     $("#email").addClass("error"); 
     alert("Oops! Looks like your email is empty..\n\nPlease enter your email before pressing 'Enter Now'."); 
     return false; 
    } else if ((email.indexOf('@') == -1) || (email.indexOf('.') == -1) || (email.length < 7)) { 
     alert(email.indexOf('@')); 
     alert(email.indexOf('.')); 
     alert(email.length); 
     $("#email").addClass("error"); 
     alert("Oops! Looks like your email is invalid..\n\nPlease enter a valid email before pressing 'Enter Now'."); 
     return false; 
    } 
    alert('submitting'); 
    $('this').submit(); 
    }); 

    $("#name").click(function(e) { 
    $("#name").removeClass("error"); 
    }); 
    $("#email").click(function(e) { 
    $("#email").removeClass("error"); 
    }); 
    $('#entry-focus').change(function() { 
    var selected_product = $('#entry-focus').find(":selected").text(); 
    $('form').find("textarea").each(function() { 
     if (!$(this).val()) { 
     $(this).attr("placeholder", "Comment on your experience with " + selected_product); 
     } 
    }); 
    }); 
}); 

は、フォームのHTMLである：でこれを解決するいくつかの試みの後

<div class="row form-holder"> 
       <h2 class="upper spaced">Enter your review for a chance to Win</h2> 
       <form id="form-id" action="connect/csv.php" method="POST"> 

         <!--ACT 1--> 
         <div class="row act-1 grid"> 
          <div class="row"> 

           <span class="form-label">Product:</span> 

           <h2 class="upper heavy spaced bigger text-left" align="left"><? echo $product; ?></h2> 
          <input type="hidden" value="<?php echo $product_code; ?>" id="product" name="product"> 

         </div> 
         <div class="row"><span class="form-label">Review:</span><textarea type="textarea" value="" id="entry-focus" name="review" form="form-id" placeholder="Comment on your experience with <? echo $product; ?>"></textarea></div> 
         </div> 

         <button id="form-cont-btn" class="btn-action widest act-1-btn">Continue</button> 

         <!--END ACT 1--> 
         <!--ACT 2--> 
         <div class="row act-2"> 
         <div class="row"><span class="form-label">Name:</span><input type="text" value="<? echo $name; ?>" id="name" name="name" placeholder="Enter Your Name"></div> 
         <div class="row"><span class="form-label">Email:</span><input type="text" value="<? echo $email; ?>" id="email" name="email" placeholder="Enter Valid Email"></div> 
         </div> 

         <button id="form-btn" class="btn-action widest act-2-btn">Enter Now</button> 
         <input type="hidden" value="set" name="submit"> 

         <!--END ACT 2--> 
       </form> 
      </div> 

$.noConflict();、$をjQueryに変更すると、コンソールでも同じエラーが発生します。

jQueryの動作を停止させる原因は何ですか？

Answer 1

ライン254あなたはreviewからidセットでtextareaの値を取得したいということを意味し、var review = $('textarea#review').val();です。

生成されたHTMLでは、テキストエリアはidがentry-focusに設定されています。したがって、254行のコードはundefined以外は取得できません。このため、255というエラーメッセージが表示されます。

右のコンテンツを取得するには、このコードの行254交換する必要がある：reviewへ

var review = $('textarea#entry-focus').val(); 

またはあなたのテキストエリアのidを設定します。