JQuery Not Working After Adding PHP to HTML file

Question

I'm building a webpage with fully functioning jquery (for form submit). Since adding php to the file to pull user data into the form, the jQuery has stopped working and the function triggered on button click is no longer called.

Console now returns this when function is called.

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)

Here is the php included at top of file:

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

Throughout the body, <?php echo $product; ?> is inserted in several places.

Here is the jQuery, placed before </head> tag (now not working):

$(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);
      }
    });
  });
});

Here is the html of the form:

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

After several attempts to resolve this with $.noConflict(); and changing $ to jQuery, the console still throws the same error.

Any ideas on what may cause the jQuery to stop working?

Answer 1

The line 254 is var review = $('textarea#review').val();, which means that you want to get the value of a textarea with the id set to review.

In the generated HTML, the textarea have an id set to entry-focus. So, your code on line 254 does not get anything but undefined. This why you have the error message at line 255.

To get the right content, you have to replace the line 254 with this code:

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

Or set the id of your textarea to review.