将JQuery添加到HTML文件后，PHP不工作

Question

我正在构建一个功能齐全的jquery网页(用于表单提交)。由于将php添加到文件中以将用户数据拉到表单中，jQuery已停止工作，按钮单击时触发的函数不再被调用。

现在，当调用函数时，Console会返回此消息。

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; ?>被插入到多个位置。

下面是放在</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停止工作的原因有什么想法吗？