Lets take the help of the below code:
- <html>
- <head>
- <title>JavaScript Tutorial using focus(), substring(), indexOf() methods</title>
- <script type="text/javascript">
- function getMainAndDomainParts() {
- var fullEmailId = document.getElementById("txtFullEmailId").value;
- if (fullEmailId == "") {
- alert("Please Enter a Valid Email ID having \"@\" symobol");
- document.getElementById("txtFullEmailId").focus();
- }
- else {
- document.getElementById("txtMainPart").disabled = true;
- document.getElementById("txtDomainPart").disabled = true;
-
- var mainPart = fullEmailId.substring(0, fullEmailId.indexOf("@"));
- var domainPart = fullEmailId.substring(fullEmailId.indexOf("@") + 1);
-
- document.getElementById("txtMainPart").value = mainPart;
- document.getElementById("txtDomainPart").value = domainPart;
- }
- }
- </script>
- </head>
- <body>
- <form id="form1">
- <div>
- <table style="border: 2px solid blue; font-family: 'Comic Sans MS'">
- <h3 style="text-align: center">Email ID Parts Splitter</h3>
- <tr>
- <td>Enter full EmailID : </td>
- <td>
- <input id="txtFullEmailId" type="text" />
- </td>
- <td>
- <input id="btnFetch" type="button" value="Fetch" onclick="getMainAndDomainParts();"
- style="font-family: 'Comic Sans MS'" />
- </td>
- </tr>
- <tr>
- <td>Main Part : </td>
- <td>
- <input id="txtMainPart" type="text" />
- </td>
- </tr>
- <tr>
- <td>Domain Part : </td>
- <td>
- <input id="txtDomainPart" type="text" />
- </td>
- </tr>
- </table>
- </div>
- </form>
- </body>
- </html>
In the above example, We want the user to enter a valid email id in the textbox and when the button is clicked, it splits the main part of email id and the domain part into different textboxes. To achieve this, We have included a JavaScript and some HTML elements that works with that script. Now, let's have a deep look at them.
- We have take 3 input textbox. One is for User input and other two are used to display the answer.
- A button is used to implement the javascript code.
JavaScript Explanation:
- We have created a user defined function 'getMainAndDomainParts()'. A variable 'fullEmailId' is declared which fetches and saves the data from the textbox 'txtFullEmailId'.
- Now, first we want to check that whether the input box is empty.
- If it is empty, so it should show an alert. We have used 'focus()' method to transfer the focus control to textbox 'txtFullEmailId' which helps the user to identify that which textbox is required to input email id.
- If it is not empty, 'txtMainPart' and 'txtDomainPart' textboxes are disabled to make them uneditable.
- The substring method takes two parameters i.e. 'start' and 'end'. The start specifies the value of a string from the index location 0 and end specifies the value upto which the string should be fetched. The end parameter does not include index location specifies in it. If end parameter is not specified, then the string is fetched till last.
- So, in this, we have fetched the value from the 0 location till the index value of "@" symbol and saves that value in the variable 'mainPart'.
- Now, we have to fetch the value after the "@" symbol which is the domain part. So, we have used substring method with its starting value as index value of "@" symbol and added 1 to it, so that it will not show "@" symbol in the answer and saves its value in the variable 'domainPart'.
- Now, we have assigned the mainPart and domainPart variables values to the textboxes txtMainPart and txtDomainPart respectively.
- At last, the function is called on the 'onclick' event of the button control.
HTML used is very simple and straight forward. So, I think its explanation is not required.