Hi, site is reesecodes.com. here is my javascript
[code]
[/code]I want it so that when I click the submit button #submit, it starts the function to find the information from the input field and alerts me the value. However I can’t seem to get it to work. What am I missing? It says it is undefined when it alerts
$(“news”) probably needs to be $(“**#**news”) if it’s an id
Derp, yea you are right. So now that I can find the value of the field, is there a way to pass this off to a function that validates whether or not this is a valid email address, either via PHP or jquery?
Yes, you can test the string format in JavaScript using a basic form of an email address, google “simple javascript regex email” for examples - or you can make an ajax request to the server.
You’ll want to prevent the form from submitting if you need to validate.
$("#submit").click(function(event){
...
if (invalid) {
event.preventDefault();
}
});
So I got this so far
<script type="text/javascript">
$(function(){
$("#errorMessage").hide();
$("#submit").click(function(){
var validateEmail = (".enter-information").val();
if(validateEmail==""){
$("#errorMessage").fadeIn(800);
$(".enter-information").focus();
return false;
}
};
});
</script>
This only works if the field is left blank. Why isn’t this working? It’s supposed to hide the error message when the page loads but it doesn’t. I realize I could do this in CSS but its bugging me. The goal of this is that I used to have a form that would leave the page when I submitted, so I wanted to include this jquery that returns false when there is a mistake so that it doesn’t send the form
One piece of advice: do not ever name any element using a reserved word; in this case ‘submit’. I have had this issue many times before someone pointed out to me that naming a submit button ‘submit’ confuses JS. Rename it to something like ‘submitBtn’ (and, of course, all your code for it) and see if that clears anything up.
HTH,
although, if there’s only one submit button in the form, there is no need to give the submit button a name in the first place. your server-side code should always verify the data it expects, not assuming all data are present just because some arbitrary parameter exists.
Perhaps, but I always give all form elements a name and an ID. It’s just good form, IMHO. No pun intended.
V/r,
I have a search button also. I will change the name to something more obscure. Did anyone happen to catch the error?
without knowing what the according HTML is it could be anything.
[code]
Enter your email address below to receive the latest news and articles
You need to put all your JS files before </body>. That’s where all Javscript should go (99% of it).
Your JS is executing before the HTML is even loaded. So it won’t take. Put the JS right before </body> so the HTML is loaded and it actually has code to work off of.
Off work early?
Nope, didn’t go in, I’ll explain on sunday. That makes sense though, I was lookin at my code and was like, there is nothing wrong with it, wtf. Makes sense though. Now that this can work (i assume it works, havent tried yet) I can try to use Ajax. I’m teaching myself with a tutorial. I coded this part by myself fine, jquery isn’t really all that hard once you memorize the selectors and syntax. Ajax is newish to me
Just tried doing that. still doesn’t work. here is code
<script type="text/javascript">
$(function(){
$("#submitBtn").click(function(){
var validateEmail = (".enter-information").val();
if(validateEmail==""){
$("#errorMessage").toggle();
$(".enter-information").focus();
return false;
}
};
});
</script>
Sounds good.
Your code looks right, so that’s what I theorized. Looked at your code and sure enough your JS was in <head>. Should work if you change it.
FYI you should do on submit, not on click. Not everyone will click the submit. A lot of people will jsut hit enter.
Try this. Untested. You need to prevent the initial submission. Also you were missing a $ before .enter-information. Also, I prefer putting $ before variables in jQuery to distinguish jQuery vars from regular JS variables.
<script type="text/javascript">
$(function(){
$("#submitBtn").on("submit", function(e){
e.preventDefault();
var $validateEmail = $(".enter-information").val();
if($validateEmail==""){
$("#errorMessage").toggle();
$(".enter-information").focus();
return false;
}
};
});
</script>
You forgot a parenthesis after the if statement ends. But it still doesn’t work. Also what were you talking about having a $ before .enter-information? I’m not sure what you’re talking about. I also didn’t see a reference to it in your new code
Well TBH don’t use Javascript to detect if it’s blank or not an email. That’s why you have type=“email” and the required attribute.
If the browser determines it’s an email / not blank, then you let PHP do the ACTUAL validation. So…
I changed the ID to a self-created id=“subscribe-form” and changed the JS accordingly , since you want to detect the FORMS submission.
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://reesecodes.com/" />
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>Home - ReeseCodes</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="UTF-8">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/images/favicon.ico" type="image/x-icon">
<link href="/scripts/resets.css" type="text/css" rel="stylesheet">
<link href="/scripts/styles.css" type="text/css" rel="stylesheet">
<link rel="canonical" href="http://www.reesecodes.com/index">
</head>
<body>
<div id="main">
<header>
<a href="http://www.reesecodes.com/index.html"><img id="logo" src="images/reeselogo.png" alt="ReeseCodes"></a>
<div id="rightHeader">
<div id="searchNav">
<form action="http://www.reesecodes.com/search.php">
<input type="hidden" name="search">
<button type="submit" name="submit"><img src="/images/search.jpg" height="13" alt="Search Button" title="Search"></button>
<input type="search" placeholder="Search this site..." required>
</form>
</div>
<a class="social" href="https://twitter.com/reese_of_shits"><img src="images/twitter.png" alt="Find Eric on Twitter!" title="Find Eric on Twitter!"></a>
<a class="social" href="http://www.facebook.com/ericreese20"><img src="images/facebook.png" alt="Find Eric on Facebook!" title="Find Eric on Facebook!"></a>
</div>
</header>
<nav>
<ul>
<li><a id="current" title="Blog" href="http://www.reesecodes.com/blog">Blog</a></li><li><a title="Demos" href="http://www.reesecodes.com/demos">Demos</a></li><li><a title="Hire" href="http://www.reesecodes.com/hire">Hire</a></li><li><a title="Links" href="http://www.reesecodes.com/links">Links</a></li><li><a title="Contact" href="http://www.reesecodes.com/contact.php">Contact</a></li></ul></nav>
<main id="articles">
<div class="newArticles">
<img class="article-image" src="/images/image-placeholder.jpg" title="Placeholder" alt="Placeholder">
<h1>Article Title</h1>
<span class="date">7/12/2015</span>
<p class="story">Gentrify meditation tilde, photo booth mlkshk nihil mumblecore narwhal craft beer swag Portland Chambray incidunt. Shakeboard nulla placeat, adipisicing mustache butcher chill-wave meggings. Chambray hella Austin, commodo laborum Etsy Wes Anderson. Umami Portland incididunt cronut irure. Placeat hoodie minim, anim cold-pressed leggings jean shorts sed Portland selvage. Seitan trust fund esse dreamcatcher. Wes Anderson mustache proident 3 wolf moon</p>
<a class="read-more" href="/blog/readmore.html" title="Read more">Read more</a>
</div>
<div class="newArticles">
<img class="article-image" src="/images/image-placeholder.jpg" title="Placeholder" alt="Placeholder">
<h1>Article Title</h1>
<span class="date">7/12/2015</span>
<p class="story">Gentrify meditation tilde, photo booth mlkshk nihil mumblecore narwhal craft beer swag Portland Chambray incidunt. Shakeboard nulla placeat, adipisicing mustache butcher chill-wave meggings. Chambray hella Austin, commodo laborum Etsy Wes Anderson. Umami Portland incididunt cronut irure. Placeat hoodie minim, anim cold-pressed leggings jean shorts sed Portland selvage. Seitan trust fund esse dreamcatcher. Wes Anderson mustache proident 3 wolf moon</p>
<a class="read-more" href="/blog/readmore.html" title="Read more">Read more</a>
</div>
<div class="newArticles">
<img class="article-image" src="/images/image-placeholder.jpg" title="Placeholder" alt="Placeholder">
<h1>Article Title</h1>
<span class="date">7/12/2015</span>
<p class="story">Gentrify meditation tilde, photo booth mlkshk nihil mumblecore narwhal craft beer swag Portland Chambray incidunt. Shakeboard nulla placeat, adipisicing mustache butcher chill-wave meggings. Chambray hella Austin, commodo laborum Etsy Wes Anderson. Umami Portland incididunt cronut irure. Placeat hoodie minim, anim cold-pressed leggings jean shorts sed Portland selvage. Seitan trust fund esse dreamcatcher. Wes Anderson mustache proident 3 wolf moon</p>
<a class="read-more" href="/blog/readmore.html" title="Read more">Read more</a>
</div>
<div id="news">
<div class="signup">
<h2>Newsletter Signup</h2>
<p>Enter your email address below to receive the latest news and articles</p>
<form method="post" action="#" id="subscribe-form">
<input name="Email" class="enter-information" type="email" placeholder="Email address" required>
<input type="submit" id="submitBtn" value="SUBSCRIBE" name="Submit">
</form>
<div id="errorMessage">Please enter a valid email address to continue</div>
</div>
<div class="signup">
<h2>Newest Articles</h2>
<ul>
<li><a href="http://www.reesecodes.com/articles/article1.html">Article Title</a></li>
<li><a href="http://www.reesecodes.com/articles/article1.html">Article Title</a></li>
<li><a href="http://www.reesecodes.com/articles/article1.html">Article Title</a></li>
<li><a href="http://www.reesecodes.com/articles/article1.html">Article Title</a></li>
<li><a href="http://www.reesecodes.com/articles/article1.html">Article Title</a></li>
</ul>
</div>
<div class="signup">
<h2>About Eric Reese</h2>
<img src="images/aboutme.jpg" alt="Image of Eric Reese" title="Eric Reese">
<p class="about-eric">Neutra photo booth shabby chic tote bag. Blog +1 authentic, Austin locavore next level cardigan McSweeney's Carles. Semiotics lumbersexual Bushwick tote bag flannel vegan, Tumblr selfies. Iphone fingerstache heirloom selfies. Hella hashtag YOLO salvia, sriracha selvage vegan pour-over. American Apparel polaroid roof party, actually keytar mumblecore banjo normcore Echo Park mlkshk. Tilde stumptown Neutra, mlkshk McSweeney's flexitarian sartorial ready-made listicle vegan drinking vinegar bitters.</p>
</div>
</div>
</main>
<div class="footer">
<p>Copyright 2015</p>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$("#errorMessage").hide();//hide in JS
$("#subscribe-form").on("submit", function(e){
e.preventDefault();
var $validateEmail = $(".enter-information").val();
if($validateEmail!=""){//this is not blank so it'll show an error. stupid logic
$("#errorMessage").show();
return false;
}
});
</script>
</body>
</html>
Changed up some stuff.
Still not working. I’m so confused. It hides the div, but I’m unsure if its doing anything else.[code][/code]
i tried putting alerts at sections in the code, its not recognizing the submit function I think, so I’m checking the proper syntax and making sure that is okay
Also, why do you have prevent default in there when I have the return false in there assuming that the form error message shows, that means the form shouldn’t be submitted, therefore I put the return false in there when that condition is met. What is the function of that(i know what its for, just wondering why you put it in there when I already have return false in there, i would have assumed that was fine since i have return false at the end of the function)? Just curious
Because you didn’t copy my code.
There was a reason I pasted your entire file there, and not just the jQuery.
I did say I added an ID to the form. Please go back to my code/last post and read it / use it.
WHen you submit, the HTML will already make it so the form is submitted / the default form action happens.
The jQuery won’t have time to run / won’t run. You need to prevent the default behavior for the form submission.
Your return false will only return false if the function has the ability to run. WIthout preventDefault(), the form will still submit and your return false won’t do ANYTHING to stop it.