Console logs keep saying that the function is not defined onClick of this button. I really can't find out why. I have 2 other popups that use this same format, all of them say function undefined when I push each button for each popup. The page doesn't state that there any any obvious javascript syntax errors.
Thanks for any help
HTML
<div class="popup" id="popup-subscribe">
<div id="close-subscribe" class="close-button"> </div>
<div class="popup-title">Subscribe</div>
<form method="post" name="subscribe" action="">
<span class="label" style="margin-right: 5px">Name: </span><input type="text" placeholder="Name" name="name" /><br>
<span class="label" style="margin-right: 5px">Email: </span><input type="text" placeholder="Email" name="email_subscribe" /><br>
<div class="errors" id="subscribe-errors"></div>
<div onclick="validateSubscribeForm()" class="button-medium">Sign me up!</div>
</form>
</div>
Javascript
function validateSubscribeForm() {
var emailSubscribe =document.forms["subscribe"]["email_subscribe"].value;
var atpos=emailSubscribe.indexOf("@");
var dotpos=emailSubscribe.lastIndexOf(".");
var name = document.forms["subscribe"]["name"].value;
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=emailSubscribe.length)
{
$("#subscribe-errors").html("The email you entered is not valid");
return false;
}
else if (name == null || name == "")
{
$("#subscribe-errors").html("Please enter a name");
}else {
document.subscribe.submit();
}
}
Specifically, the console log error states: Uncaught ReferenceError: validateSubscribeForm is not defined
2 Answers 2
You need to put your JavaScript function definition in the head tag of your HTML:
<head>
<!-- INCLUDE jQuery library first -->
<script type="text/javascript">
function validateSubscribeForm() {
var emailSubscribe = document.forms["subscribe"]["email_subscribe"].value;
var atpos = emailSubscribe.indexOf("@");
var dotpos = emailSubscribe.lastIndexOf(".");
var name = document.forms["subscribe"]["name"].value;
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= emailSubscribe.length) {
$("#subscribe-errors").html("The email you entered is not valid");
return false;
} else if (name == null || name == "") {
$("#subscribe-errors").html("Please enter a name");
} else {
document.subscribe.submit();
}
}
</script>
</head>
<body>
<div class="popup" id="popup-subscribe">
<div id="close-subscribe" class="close-button"></div>
<div class="popup-title">Subscribe</div>
<form method="post" name="subscribe" action=""> <span class="label" style="margin-right: 5px">Name: </span>
<input type="text" placeholder="Name" name="name" />
<br /> <span class="label" style="margin-right: 5px">Email: </span>
<input type="text" placeholder="Email" name="email_subscribe" />
<br />
<div class="errors" id="subscribe-errors"></div>
<div onclick="validateSubscribeForm()" class="button-medium">Sign me up!</div>
</form>
</div>
</body>
answered Jun 24, 2013 at 3:52
hjpotter92
81.1k36 gold badges148 silver badges188 bronze badges
Sign up to request clarification or add additional context in comments.
2 Comments
Josh
This fixed the issue. Do you have any ideas as to why this would happen now? I've had all the scripts on the bottom of the page before but now it just started messing up. The only thing I can think of that I changed recently was the version of jQuery being used. And the jQuery library is being included with PHP. I always thought it was better to leave the scipts at the bottom of the page too.
hjpotter92
JavaScript functions need to be declared first before they can be called (like so many other languages) @Josh .
Your missed Jquery here. Include Jquery library.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
answered Jun 24, 2013 at 3:50
MACMAN
1,9712 gold badges22 silver badges37 bronze badges
Comments
lang-js
$jQuery included ?? either use ready() or wrap it in an anonymous function