Error saying that function is not defined
Question
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
solution1
2 ACCPTED 2013-06-24 03:52:19
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>
solution2
1 2013-06-24 03:50:51
Your missed Jquery here. Include Jquery library.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.