jquery ajax load

<html>
<head>
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var textBoxes = $('input[type="text"]');
            textBoxes.focus(function () {
                var helpDiv = $(this).attr('id') + 'HelpDiv';
                $('#' + helpDiv).load('Help.html #' + helpDiv);
            });

            textBoxes.blur(function () {
                var helpDiv = $(this).attr('id') + 'HelpDiv';
                $('#' + helpDiv).html('');
            });
        });
    </script>
</head>
<body style="font-family:Arial">
    <table>
        <tr>
            <td>First Name</td>
            <td><input id="firstName" type="text" /></td>
            <td><div id="firstNameHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><input id="lastName" type="text" /></td>
            <td><div id="lastNameHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input id="email" type="text" /></td>
            <td><div id="emailHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Income</td>
            <td><input id="income" type="text" /></td>
            <td><div id="incomeHelpDiv"></div></td>
        </tr>
    </table>
</body>
</html>

Help.html
<div id="firstNameHelpDiv">
    Your fisrt name as it appears in passport
</div>

<div id="lastNameHelpDiv">
    Your last name as it appears in passport
</div>

<div id="emailHelpDiv">
    Your email address for communication
</div>

<div id="incomeHelpDiv">
    Your annual income
</div>

Comments

Popular posts from this blog

Drag and Drop multiple File upload using jQuery AJAX in ASP.Net using C# and VB.Net

jQuery dynamic menu from database in asp.net

Automatically send Birthday email using C#.Net