-1

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?

13
  • Please click <> and create a minimal reproducible example with RENDERED html. Please click TIDY before saving Commented Jun 15, 2017 at 9:56
  • What's the error in console? Commented Jun 15, 2017 at 9:59
  • use on method : most probably your elements are loading after the jquery. w3schools.com/jquery/tryit.asp?filename=tryjquery_event_on Commented Jun 15, 2017 at 10:00
  • view the generated html (right click>view source) and edit you question with the javascript at line 255 (as indicated by the error message). Also, unless the page is massive, it would help to add the complete generated html to your question Commented Jun 15, 2017 at 10:04
  • 2
    In your HTML, there's no textarea with the id review. So it's normal that the variable review is undefined and the property length is inexistant. Commented Jun 15, 2017 at 11:27

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.