CODEWITHSUNDEEP
c#javascriptasp.net
TheGeekZn
TheGeekZn

Reputation: 3914

Show confirmation textbox after entry with JavaScript

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>

Upvotes: 0

Views: 705

Answers (4)

Tieson T.
Tieson T.

Reputation: 21201

So, assuming you can create markup similar to this:

<div class="ctrlHolder">
    <asp:Label ID="PasswordLabel" 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>

<div id="confirm-password-box" class="ctrlHolder">
    <asp:Label ID="ConfirmPasswordLabel" runat="server" Font-Bold="True" Text="Confirm Password"></asp:Label>
    <asp:Label ID="Label12" runat="server" CssClass="styleLabelWatermarkWashout" Text="**********"></asp:Label>
    <br />
    <%--data-default-value="Placeholder text"--%>
    <asp:TextBox ID="txtConfirmRegisterPassword" runat="server" CssClass="textInput styleTextBoxCenter required" TextMode="Password" MaxLength="20"></asp:TextBox>
</div>

You'd want to add some CSS rules to make #confirm-password-box hidden by default. Then, add this script code somewhere on the page (preferably as close to closing </body> tag as possible):

<script>

$(function(){

    $('#<%: txtRegisterPassword.ClientID %>').on('blur', function(event){

        $('#confirm-password-box').slideToggle('slow');

    });

});

</script>

The blur event occurs when the control loses focus. You don't really want to listen for keyup, since that would require this code being called every time a user entered a character into the password box...

Note that this particular chunk of jQuery code requires jQuery 1.7 or higher, so use NuGet to update your script reference (if you're not using anything else that requires an older version of jQuery).

Upvotes: 2

yu_ominae
yu_ominae

Reputation: 2935

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.

Upvotes: 1

Narendra
Narendra

Reputation: 3117

  • Replace the controls ids in this answer as per your html.

You can show the confirm controls in the following way.

 $('#password').onfocusout(function() {   
      // This will show once you complete entering Email and Password.
      $('#confirmEmail').attr('display', 'inline');
      $('#confirmPassword').attr('display', 'inline');
    });

Let me tell how you can achieve confirm Email. Same thing can be used to achieve confirm password.

When you focus out of confirm email textbox compare the emails entered by the user in Email and Confirm Email textboxex.

This can be done in following way

$('#confirmEmail').onfocusout(function() {
  if($('#confirmEmail').val() == $('#Email').val())
{
      // Emails entered are same
}
else
{
     alert('Emails entered are not matching. Please reenter emails.');
}
});

Similarly you can check for confirm password.

Upvotes: 0

Shamis Shukoor
Shamis Shukoor

Reputation: 2515

You can use innerHTML to have a new textbox beneath the email textbox once that box is filled. I could give you the code if you can post the code over here

Upvotes: 0

Related Questions