JavaScript provides a useful function getElementById for finding and reading the required filed
This function also allow us to change or set the value in a text field. We will learn about it in the second half of this post.
Also note that getElementById function should be written in camel case as it is otherwise it will not work. For example getElementById is correct and GetElementByID is invalid
Suppose we've included an email field in a form, and you've made it a required field.The form has a submit button that the user clicks to submit the information that he's entered in the form.
This is the markup that creates the form. I've simplified it, omitting any form action and other attributes, including line breaks, that don't bear on what you're learning here.
<form>
Email:
<input type="text">
<input type="submit" value="Submit">
</form>
1. The text "Email"
2. The text field for the user's email address
3. The submit button
Now we are going to give the email field an id.
<form>
Email:
<input type="text" id="email">
<input type="submit" value="Submit">
</form>
Next, we are going to add an event-handler, using the keyword onSubmit.
<form onSubmit="checkAddress('email');">
Email:
<input type="text" id="email">
<input type="submit" value="Submit">
</form>
Now, when the user clicks the submit button, the function checkAddress executes. Note
that, even though the action is a click on the submit button, the onSubmit event handler is in
the form tag, not in the submit button tag. That's because the submission is an event that
applies to the whole form, not the submit button.
Here's where things get interesting. When the form is submitted, the function checkAddress looks to see if the user has entered anything in the email field. If not, the function displays an alert reminding the user that the email address is required. In order to do this, the function needs a way to read what's in the email field. This is
where the id that I added to the field comes in. Here's the code for the function.
function checkAddress(fieldId)
{
if (document.getElementById(fieldId).value === "")
{
alert("Email address required.");
}
}
If there's no value in the email field, an alert displays telling the user that an email address is required.
This is the sequence you need to memorize:
1. The keyword document, followed by...
2. a dot, followed by...
3. the keyword getElementById, followed by...
4. the parameter, in parens, received from the calling code, fieldId,followed by...
5. another dot, followed by...
6. the keyword value...
Note that getElementById must be in strict camel Case. If you do what comes naturally
and write getElementByID, with a cap "D," it won't work.
Some coders prefer to put the value found in the field into a variable, like this.
function checkAddress(fieldId)
{
var val = document.getElementById(fieldId).value;
if val === "")
{
alert("Email address required.");
}
}
The above code is implemented in below example. When Email field is left blank and clicked on Submit button it generates a message that Email field is required. This example demonstrates how JavaScript can read and use the value of text field.
and alert message will be displayed if user clicks on submit and text field is empty.
Screen shot is attached
