I am trying to just build a simple form validation function so that I can build me google chrome extension. Later on I will be finishing up a twitter API call, but need to be able to post the values that are entered in to the input fields I have.
Break Down
- Chrome will only use a html, css, and javascript
- Form will use the value from the text field and the number field
- The onsubmit I have added to the form should be posting the data in the value fields over to the javascript and having it processed
- There is one ifelse statement that I have that is checking the value of "hashtag" to make sure it is not blank
- Finally you will notice some
document.write()
that I am using to test to see where in the javascript it is not reading... nothing is working
I feel like I have gone over this a millions times. Any help would be appreciated thank you.
!DOCTYPE html>
<html>
<head>
<!-- Start javascript -->
<script type="text/javascript">
function validator(){
// variables that pull the input elements from my form
var hashtag = document.getElementById("hashtag").value;
var tweetamy = document.getElementById("tweetamt").value;
document.write(hashtag);
// validating input fails if left blank if false shows alert popup, if ture write the contents of the value (this is for testing)
if(x == "") {
// Shows a popup when the search bar is empty
alert("Error: Input is empty!");
return false;
} else {
//prints what ever was in the hashtag element in the form
document.write(hashtag);
return true;
}
}
</script>
<!-- End javascript -->
</head>
<body>
<h3> Search hashtags on twitter (ex: #winning)</h3>
<br>
<!-- The start of my form, has an "onsubmit" action-->
<form method="post" onsubmit="javascript:validator();">
<!-- Used as a search bar -->
Search:<input type="text" name="search" id="hashtag" />
<br><br>
<!-- Used to set the amount of tweets in the last hour you want to pull -->
Tweets:<input type="number" name="key_amt" min="0" max="100" value="1"id="tweetamt" />
<br><br>
<!-- Just a button -->
<input type="submit" value="Search" />
</form>
<!-- end of form -->
</body>
</html>