Question

Before we begin, I would like to convey that I have limited to no knowledge on the JavaScript language. The only things I’ve used is JQueryUI – and even that is copy paste.

Currently, I have a user registration page, with all the standard TextBox inputs. I would like to, however, slide down a secondary ‘Confirm email’ and ‘confirm password’ whenever a user enters text into the original text box.

I understand the community likes to help those who can prove they helped themselves, but the only thing I currently have to show is me trying to lookup solutions for this and failing.

Could someone please show me a way to do this?

Edit: Code of the password box

<div class="ctrlHolder">
    <asp:Label ID="Label9" runat="server" Font-Bold="True" Text="Password"></asp:Label>
    <asp:Label ID="Label11" runat="server" CssClass="styleLabelWatermarkWashout" Text="**********"></asp:Label>
    <br />
    <%--data-default-value="Placeholder text"--%>
    <asp:TextBox ID="txtRegisterPassword" runat="server" CssClass="textInput styleTextBoxCenter required"
        TextMode="Password" MaxLength="20"></asp:TextBox>
</div>

Answer 1

I would add a reference to jquery to the page you are working on.
Then make a new script (on the page or in a separate .js file) which attaches a new function to the onkeyup event for the textboxes. Something like this.

$(document).ready(function()
{
    $('mytextbox').bind('keyup', function() { 
        $('myCOnfirmationTextbox').slideDown();
    };
});

This will attach this function to all elements corresponding to the “mytextbox” class or ID. So if you have an input <input type="text" id="email" class="emailInput"/> then you would use $('#email') to bind the event to this particular element. Or you use $('.Emailinput') to bind to all input elements for emails.

By the way, I haven’t tested the code, but this or something very similar should work.

If you use a separate .js file, then don’t forget to reference it in your page as well.