Get HTML tag values with Javascript
In this article you will learn Javascript interaction with HTML. Throughout this article you will get following question’s answers.
What is Javascript?
What is use of Javascript (JS)?
How to enable Javascript?
How to comment in javascript?
Why javascript validation (client side) required?
How to pass the parameter into javascript function?
How to get and set HTML element value in javascript?
<p>, <div> and <input type=”????”/>
Sample Member Form
What is Javascript?
Javascript is weakly typed, object oriented and dynamic language. Its lightweight and all modern browser built in javascript engine.
JS is shortcut / short name of Javascript.
What is use of Javascript (Js) ?
Js is used for interacting and manipulation with DOM (Document Object Model) elements. Js mostly used for interaction with client side object. You can get and set the value of DOM object. Beauty of JS is there is no addition plugin or extension required to implement or uses for JS.
How to enable Javascript?
Mostly in <head> section or other section of html or web document just write <script> tag, javascript is ready to use. Nowadays visual studio also provide intellisense for javascript (js).
Example:
<html>
<head>
<script type="text/javascript">
//commenting single line
/* Multi line comment.
document.write("this will not execute.")
document.write("this will not execute.")
*/
</script>
<script>
//Javascript can also run only writing SCRIPT tag.
</script>
</head>
<body>
</body>
</html>
You can start coding in javascript by just adding <script> tag or <script type=”text/javascript”>
How to comment in javascript?
Majority all languages having two types of comments:
1. Single line comment.
2. Multi-line comment.
1. Single line comment: This will comment your single line of code with help of //
Two forward slash.
Example:
//Javascript can also run only writing SCRIPT tag.
2. Multi-line comment: This will comment your multi-line of code with help of /* */
Two forward slash.
/* Multi line comment.
document.write("this will not execute.")
document.write("this will not execute.")
*/
 |
| Asp.net MVC C# training tutor in malad mumbai |
Why javascript validation (client side) required?
Javascript(js) is client side scripting language which run on client browser. (those things run on user browser that called CLIENT SIDE). Using client side validation that reduce load on server side and reduce unnecessary round-trip.
You can validate all types of DOM object with javascript.
Example:
 |
| Asp.net MVC C# training tutor in malad mumbai |
Above can validate with javascript clientside with following points.
Name field textbox: 1. User entered or not in textbox.
2. Can put restriction only alphabet characters allowed in textbox.
3. Minimum Length requirement.
Mobile field textbox: 1. User entered or not in textbox.
2. Can put restriction only numeric character allowed in textbox.
3. Minimum length requirement.
Birth-Date field textbox: 1.Valid date entered or not in textbox.
2.Date format restriction.
Gender dropdownlist: 1. User selected or not.
2. Hide or display item.
How to pass the parameter into javascript function?
Parameter is value which useful inside the function to do the processing. Passing the parameter(s) to javascript function is very simple. In sample code your will come to know.
Function without Parameter
Syntax:
function <function name>
{
}
Example:
function setclass()
{
}
Function with Parameter
Syntax:
function <function name>(parameter1 , parameter2 . .. . .)
{
}
Example:
function SumVal(val1, val2)
{
return val1 + val2 ;
}
How to get and set HTML element value in javascript?
<h1>, <p>, <div> and other content tag
To change contents of H1, P and DIV and content tags can be possible through (innerText, innerHtml).
innerText : To get and set change text of element.
innerHTML: To get and set change text of element.
NOTE:
My suggestion content elements content (inner text) can be get/set with help of INNERTEXT , INNERHTML.
FORM control element value can be get/set with help of VALUE.
Change the content of <H1> tag: In this we are going to change the contents of <H1> tag with help of innerText of javascript.
<h1 id="title">Welcome To Tutorials</h1>
To get Value of H1 Tag:
Alert(document.getElementById("title").innerText);
To set Value of H1 Tag:
document.getElementById("title").innerText = "Welcome to Javascript";
We had called click event of button, go through sample code.
CODE:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sum Example</title>
<script type="text/javascript">
function CalcAdd() {
document.getElementById("title").innerText = "Welcome to Javascript";
}
</script>
</head>
<body>
<h1 id="title">Welcome To Tutorials</h1>
<br/>
<br/>
<input type="button" name="clickbtn" value="On Click Title Will Change" onClick="CalcAdd()"/>
</body>
</html>
OUTPUT:
ON LOAD VIEW:
 |
| Asp.Net Training Tutor in Malad Mumbai |
AFTER CLICKED ON BUTTON
 |
| Asp.Net Training Tutor in Malad Mumbai |
Change the content of <P> tag: In this we are going to change the contents of <P> tag with help of innerHTML of javascript.
<p id="para">First paragraph element of page.</p>
document.getElementById("para").innerHTML = "<b><i>Updated value of first paragraph </i></b>";
CODE:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>P Tag Example</title>
<script type="text/javascript">
function CalcAdd() {
//to set the P tag contents
document.getElementById("para").innerHTML = "<b><i>Updated value of first paragraph </i></b>";
}
</script>
</head>
<body>
<p id="para">First paragraph element of page.</p>
<br />
<br />
<input type="button" name="clickbtn" value="On Click Title Will Change" onClick="CalcAdd()" />
</body>
</html>
OUTPUT:
ON LOAD VIEW:
 |
| Asp.Net Training Tutor in Malad Mumbai |
AFTER CLICKED ON BUTTON
 |
| Asp.Net Training Tutor in Malad Mumbai |
Change the content of <div> tag: In this we are going to change the contents of <P> tag with help of innerHTML of javascript.
<p id="para">First paragraph element of page.</p>
document.getElementById("para").innerHTML = "<b><i>Updated value of first paragraph </i></b>";
OUTPUT:
ON LOAD VIEW:
 |
| HTML CSS Training Tutor in Malad Mumbai |
AFTER CLICKED ON BUTTON
 |
| HTML5 CSS3 Training Tutor in Malad Mumbai |
Now we focus more on FORM CONTROL of HTML
Member Form CODE
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Membership Form Example</title>
<script type="text/javascript">
function CalcAdd() {
//to set the DIV tag contents
document.getElementById("pMemberName").innerText= document.getElementById("txtMemberName").value;
document.getElementById("pMemberMobile").innerText = document.getElementById("txtMemberMobile").value;
document.getElementById("pMemberBirthDate").innerText = document.getElementById("txtMemberBirthDate").value;
document.getElementById("pMemberGender").innerText = document.getElementById("ddlGender").options[document.getElementById("ddlGender").selectedIndex].text;
document.getElementById("pMemberMarried").innerText = document.querySelector('input[name = marry]:checked').value;
}
</script>
<style>
#tbl{
border-collapse: collapse;
border: 1px solid black;
}
</style>
</head>
<body>
<h1 id="mainTitle">Member Detail</h1>
<br />
<table>
<tr>
<td>
Member Name
</td>
<td>
<input id="txtMemberName" type="text" />
</td>
</tr>
<tr>
<td>Mobile</td>
<td><input id="txtMemberMobile" type="text" /></td>
</tr>
<tr>
<td>Birth Date</td>
<td><input id="txtMemberBirthDate" type="text" /></td>
</tr>
<tr>
<td>Gender</td>
<td>
<select id="ddlGender">
<option>Male</option>
<option>Female</option>
</select>
</td>
</tr>
<tr>
<td>Married</td>
<td>
<input type="radio" name="marry" value="Yes Married">Yes<br>
<input type="radio" name="marry" value="Not Married" checked>No<br>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="clickbtn" value="Submit" onClick="CalcAdd()" style="font-size:19px;" />
</td>
</tr>
</table>
<br />
<br />
<table id="tbl" >
<tr>
<td>
<b> Member Name -----></b>
</td>
<td>
<p id="pMemberName"></p>
</td>
</tr>
<tr>
<td><b>Mobile -----></b></td>
<td><p id="pMemberMobile"></p></td>
</tr>
<tr>
<td><b>Birth Date -----></b></td>
<td><p id="pMemberBirthDate" > </p></td>
</tr>
<tr>
<td><b>Gender -----></b></td>
<td><p id="pMemberGender"></p></td>
</tr>
<tr>
<td><b>Married Status -----></b></td>
<td><p id="pMemberMarried"></p></td>
</tr>
</table>
</body>
</html>
OUT PUT ON LOAD:
 |
| C#, SQL Server Training Tutor in Malad Mumbai |
OUTPUT AFTER SUBMIT:
 |
| PHP MySql Training Tutor in Malad Mumbai |
Happy Coding…
I provide HTML, CSS and Dot Net (.NET), Asp.Net, PHP Training in Malad and western suburbs of Mumbai and on-line training.
HTML CSS Javascript tutor tutor classes in mumbai, HTML CSS Javascript tutor in kandivali,HTML CSS Javascript tutor in malad, HTML CSS Javascript tutor in borivali, HTML CSS Javascript tutor in surat, HTML CSS Javascript tutor in jaisalmer, HTML CSS Javascript tutor in jaipur, HTML CSS Javascript tutor in bikaner, HTML CSS Javascript tutor in pune, HTML CSS Javascript tutor in jogeshwari, HTML CSS Javascript tutor in bandra, HTML CSS Javascript tutor in nashik, HTML CSS Javascript tutor in indore, HTML CSS Javascript tutor in ratlam, HTML CSS Javascript tutor in phalodi, HTML CSS Javascript tutor in bardoa, HTML CSS Javascript tutor in vadodara, HTML CSS Javascript tutor in thane, HTML CSS Javascript tutor in kalyan, HTML CSS Javascript tutor in dadar, HTML CSS Javascript tutor in kota, HTML CSS Javascript tutor in jodhpur, HTML CSS Javascript tutor in kolhapur, HTML CSS Javascript tutor in aurangabad, HTML CSS Javascript tutor in shirdi, HTML CSS Javascript tutor in pali, HTML CSS Javascript tutor in hydrabad, HTML CSS Javascript tutor in palanpur, HTML CSS Javascript tutor in mehsana, HTML CSS Javascript tutor in marward, HTML CSS Javascript tutor in ajmer, HTML CSS Javascript tutor in navsari, HTML CSS Javascript tutor in haridwar, HTML CSS Javascript tutor in haldwani, HTML CSS Javascript tutor in noida, HTML CSS Javascript tutor in delhi, HTML CSS Javascript tutor in merrut, HTML CSS Javascript tutor in nanital, HTML CSS Javascript tutor in ranikhet, HTML CSS Javascript tutor in bhilwara, HTML CSS Javascript tutor in nathdawara, HTML CSS Javascript tutor in mavali, HTML CSS Javascript tutor in barmer, HTML CSS Javascript tutor in pokaran, HTML CSS Javascript tutor in mira road, HTML CSS Javascript tutor in bhayandar, HTML CSS Javascript tutor in vasai, HTML CSS Javascript tutor in virar, HTML CSS Javascript tutor in palghar, HTML CSS Javascript tutor in vapi, HTML CSS Javascript tutor in valsad, HTML CSS Javascript tutor in amritsar, HTML CSS Javascript tutor in ludhiana, HTML CSS Javascript tutor in shri ganganagar, HTML CSS Javascript tutor in kalva, HTML CSS Javascript tutor in dombivali, HTML CSS Javascript tutor in igatpuri, HTML CSS Javascript tutor in karjat, HTML CSS Javascript tutor in kasara, HTML CSS Javascript tutor in chennai, HTML CSS Javascript tutor in nadiad, HTML CSS Javascript tutor in anand, HTML CSS Javascript tutor in maninagar,
Asp.Net training institute in mumbai, Asp.Net training institute in malad, Asp.Net training institute in kandivali, Asp.Net training institute in borivali, Asp.Net training institute in andheri, Asp.Net tutor in mumbai, Asp.Net training institute in vasai, Asp.Net training institute in virar, Asp.Net training institute in nalasopara, Asp.Net tutor in vasai, Asp.Net tutor in virar, Asp.Net tutor in nalasopara, Asp.Net training institute in jodhpur, Asp.Net training institute in phalodi, Asp.Net training institute in jaisalmer, Asp.Net training institute in bikaner, Asp.Net tutor in jodhpur, Asp.Net tutor phalodi, Asp.Net tutor in jaisalmer, Asp.Net tutor in bikaner, Asp.Net training institute in mumbai, Asp.Net training institute in andheri, Asp.Net training institute in vileparle, Asp.Net training institute in santacruz, Asp.Net training institute in khar, Asp.Net tutor in mumbai, Asp.Net training institute in bandra, Asp.Net training institute in mahim, Asp.Net training institute in matunga, Asp.Net tutor in andheri, Asp.Net tutor in vileparle, Asp.Net tutor in santacruz, Asp.Net training institute in surat, Asp.Net training institute in ahmedabad, Asp.Net training institute in jaipur, Asp.Net training institute in sikar, Asp.Net tutor in pune, Asp.Net tutor surat, Asp.Net tutor in valsad, Asp.Net tutor in kanpur
No comments:
Post a Comment