JavaScript Program to Construct Email ID from Name

Write a JavaScript program to create email id after entering first name, middle name and surname.

Write html script that displays textboxes for accepting name, middlename, surname of the user and a submit button. Write proper JavaScript such that when the user clicks on submit button. i) all texboxes must get disabled and change the color to “red”. and with respective labels. ii) constructs the mailid as .@msbte.com and displays mail id as message. (ex. if user enters rajni as name and pathak as surname mailid will be constructed as rajni.pathak@msbte.com) .

Source Code

<html>
<head>
    <title>Construct mailID from firstname and surname</title>
    <script>
    function init()
    {
        var fname = document.getElementById("firstname");
        var mname = document.getElementById("middlename");
        var lname = document.getElementById("surname");

        // Disable input boxes
        var inputs = document.getElementsByTagName("input");
        var labels = document.getElementsByTagName("label");

        console.log(inputs.length);
        for(i=0; i<labels.length; i++)
        {
            inputs[i].style.backgroundColor = "red";
            inputs[i].disabled = true;
            labels[i].style.color="red";
        }

        var msbte_email = getMsbteMailId(fname.value, lname.value);
        alert("Your mailId: " + msbte_email);
    }
    function getMsbteMailId(fn, ln)
    {
        var id = fn.toLowerCase() + "." + ln.toLowerCase() + "@msbte.com";
        return id;
    }
    </script>
</head>
<body>
<form method="get" action="#">
<label>Firstname </label>
<input type="text" id="firstname"/><br/>
<label>Middlename </label>
<input type="text" id="middlename"/><br/>
<label>Surname</label> 
<input type="text" id="surname"/><br/>
<input type="button" value="Submit" onclick="init()" />
</form>
</body>
</html>