Woh!! So, like I said on my twitter timeline earlier, I'll be posting a number of tutorial, tips for aspiring, beginning and maybe even intermediate programmers on this blog. And for starters, I'll make this first post a super simple one.
I'll show you how to get the value typed in an html textbox using javascript.
Now, if you are very good with javascript or you're are already an experienced programmer, you can look the other way as this tutorial is not meant for you.
I'm going to use the sample html code below:
I'll show you how to get the value typed in an html textbox using javascript.
Now, if you are very good with javascript or you're are already an experienced programmer, you can look the other way as this tutorial is not meant for you.
I'm going to use the sample html code below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <title>Trying Javascript</title> </head> <body> <form> <input type="text" name="username" id="username" placeholder="Input your Username"> <br> <input type="text" name="email" id="email" placeholder="email@example.com"> <button type="button" onclick="showDetails()">Show Details</button> </form> </body> <script> function showDetails(){ var username = document.getElementById('username'); var email = document.getElementById('email'); alert('Your username is: ' + username.value + '\n\ And Your email is: ' + email.value); } </script> </html> |
I'll go through what's happening in the code above now
From line 1-13, I did the normal html stuff, but two things you need to pay attention to here are the id attributes of input element and the onclick attribute of the button element.
Assigning an id to any html element makes it possible for our javascript code to find that element and use it comfortably.
The onclick attibute makes sure that out the button responds when it is clicked on. When the button is clicked, the showDetails() function will be executed.
From line 15 - 20, we defined our showDetails() function, and inside the function, we firstly retrieve the two input elements using their respective IDs. (remember the id we set earlier in out html).
Now, we can do anything with the values of those elements, in this example, i chose to pop up an alert when the button is clicked. The values can be used for just about anything you want, e.g for validation, for sending to a server script using ajax, or just saving in cookie.
Now, that's all from me for now. If anything seem unclear, do not hesitate to let me know
Take care!!
From line 1-13, I did the normal html stuff, but two things you need to pay attention to here are the id attributes of input element and the onclick attribute of the button element.
Assigning an id to any html element makes it possible for our javascript code to find that element and use it comfortably.
The onclick attibute makes sure that out the button responds when it is clicked on. When the button is clicked, the showDetails() function will be executed.
From line 15 - 20, we defined our showDetails() function, and inside the function, we firstly retrieve the two input elements using their respective IDs. (remember the id we set earlier in out html).
Now, we can do anything with the values of those elements, in this example, i chose to pop up an alert when the button is clicked. The values can be used for just about anything you want, e.g for validation, for sending to a server script using ajax, or just saving in cookie.
Now, that's all from me for now. If anything seem unclear, do not hesitate to let me know
Take care!!
0 comments:
Post a Comment
Say something...