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?
<>and create a minimal reproducible example with RENDERED html. Please click TIDY before savingreview. So it's normal that the variablereviewisundefinedand the propertylengthis inexistant.