<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <form id="form1" runat="server">
        Username: <asp:TextBox ID="txtUserName" runat="server" /></br>
        OTP: <asp:TextBox ID="txtOTP" runat="server" /></br>
        <asp:TextBox ID="OtpHiddenField" runat="server" /></br>
        <asp:Button ID="btnValidate" runat="server" onclick="btnValidate_Click" Text="Validate" /></br>
</form>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
<h2>Fake OTP Simulation</h2>
Enter "John"
</br>
Enter OTP
<script type='text/javascript'>
    var pass = String(getRandomInt(0, 9)) + String(getRandomInt(0, 9)) + String(getRandomInt(0, 9)) + String(getRandomInt(0, 9));
    document.write(pass);
    document.getElementById('<%= OtpHiddenField.ClientID %>').value = pass;
</script>

<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" Runat="Server">
    <form id="form1" runat="server">
        Username: <asp:TextBox ID="txtUserName" runat="server" /><br/>
        OTP: <asp:TextBox ID="txtOTP" runat="server" /><br/>
        <asp:Button ID="btnValidate" runat="server" onclick="btnValidate_Click" Text="Validate" /><br/>
        <asp:HiddenField ID="OtpHiddenField" runat="server" />
</form>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" Runat="Server">
<h2>Fake OTP Simulation</h2>
Enter "John"
<br/>
Enter OTP
<script type='text/javascript'>
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    var pass = String(getRandomInt(0, 9)) + String(getRandomInt(0, 9)) + String(getRandomInt(0, 9)) + String(getRandomInt(0, 9));
    document.write(pass);
    document.getElementById('<%= OtpHiddenField.ClientID %>').value = pass;
</script>
</asp:Content>