將PHP添加到HTML文件後JQuery不工作

Question

我正在構建一個功能完備的jquery（用於表單提交）的網頁。由於將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：

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

整個body，<?php echo $product; ?>插在幾個地方。

這裏是jQuery的，前置於</head>標籤（現在不工作）：

$(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是var review = $('textarea#review').val();，這意味着要與id設置爲review得到textarea的價值。

在生成的HTML中，textarea的id設置爲entry-focus。因此，254行上的代碼除undefined外沒有其他任何內容。這就是爲什麼你有錯誤信息在行255。

爲了得到正確的內容，你有這個代碼替換線254：

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

，或者設置textarea的id到review。