locked
Show next control after filling first control using Jquery RRS feed

  • Question

  • User1052662409 posted

    Hi All,

    I just jumped into jquery to learn it and I am trying on the way to learn in.

    I have a requirement. I am using bootstrap form layout .I have many control on my form in <div> tag.

    I have <asp:TextBoxes.... /> <asp:DroprownList.../> etc.

    I just want that when I fill text box or select an item from dropdownlist then next control should appear/shown.

    Any link or reference or example?

    Thanks 

    Wednesday, March 13, 2019 11:12 AM

Answers

  • User475983607 posted

    demoninside9

    It won't work as my form also has a <select ..> element and you method only works for (':input').

    Modified the code slightly to fit your needs.  For example, check if the div contains an input element.

    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <style>
            .hidden {
                display: none;
            }
    
            .show {
                display: block;
            }
        </style>
    
    </head>
    <body>
        <div>
            <div class="wrapper">
                <div>
                    <input />
                </div>
            </div>
            <div class="wrapper">
                <div class="hidden">
                    <input />
                </div>
            </div>
            <div class="wrapper">
                <div class="hidden">
                    <select>
                        <option value="1">1</option>
                    </select>
                </div>
            </div>
            <div class="wrapper">
                <div class="hidden">
                    <input />
                </div>
            </div>
            <div class="wrapper">
                <div class="hidden">
                    <input />
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(function () {
                $('.wrapper').each(function (i, e) {
                    e.tabIndex = i + 1;
                    if ($(e).find(':input')) {
                        $(e).find(':input').prop('tabIndex', i + 1);
                    }
                    else {
                        $(e).find('select').prop('tabIndex', i + 1);
                    }
                });
    
                $('.wrapper').focus(function (e) {
                    if ($(e).find(':input')) {
                        $(this)
                            .removeAttr('tabIndex')
                            .find('.hidden')
                            .removeClass('hidden')
                            .addClass('show')
                            .find(":input").focus();
                    }
                    else {
                        $(this)
                            .removeAttr('tabIndex')
                            .find('.hidden')
                            .removeClass('hidden')
                            .addClass('show')
                            .find("select").focus();
                    }
                    
                });
            });
        </script>
    </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 2, 2019 2:10 PM

All replies

  • User-1509636757 posted

    I just want that when I fill text box or select an item from dropdownlist then next control should appear/shown.

    What does it mean when you say "next control should appear/shown" ? 

    Do you want like pressing the tab key should focus next control? If that is the case, I guess you only need to provide TabIndex property for each WebControl.

    hope that helps./.

    Wednesday, March 13, 2019 11:40 AM
  • User1052662409 posted

    Do you want like pressing the tab key should focus next control?

    No,

    I just want that when I finish from one control (after typing in a text box or selection an item from dropdown or selection a file to upload ) then it should show the next control which I make hidden by putting div's property display:none;

    like below

     <div class="form-group" id="divEstimatedCost" style="display:none;">
    
     // here is my control
    
    </div>

    I am not sure that on which event of control I should use $("#DivID").show() function of Jquery.

    Thanks
     

    Wednesday, March 13, 2019 12:40 PM
  • User475983607 posted

    The "next control" is dependent on your HTML design.  The event you choose is dependent on your requirements and what you consider "after typing" or "selection".  I recommend learning the different input events available and selecting the events that fits your approach.

    https://www.w3schools.com/tags/ref_eventattributes.asp

    For example, .change() when a select changes the selection and .blur() when a text input losses focus.

    Wednesday, March 13, 2019 1:39 PM
  • User-474980206 posted

    not too tricky. when onblur fires, the browser has already picked the next focus field.

    the easiest approach is to wrap each div with a div that can get the focus (set the tab index) when the field is hidden. when the div get the focus, you show the field and set the focus to the field, also clear tab index of the div so it will not get the focus, and thus require double tabs.

    Wednesday, March 13, 2019 3:03 PM
  • User1052662409 posted
    .
    Wednesday, March 13, 2019 5:52 PM
  • User1052662409 posted

    Thank you mgebhard Sir for your reply.

    mgebhard

    For example, .change() when a select changes

    When dropdownlist just have one item that change doesn't work, even if you click the dropdown and select the same item.

      $("#divCountry").change(function (evt) {
                        evt.preventDefault();
                        $('#divRequestfor').show(1000);
                    });

    Then what should be the approach?

    Again I have a text box and I need to fire .blur() two times, one is for checking some condition and other  one for (once it satisfy the condition) showing next control.

      $('#txtEstimateCost').blur(function () {
                     var amount = parseFloat("0" + document.getElementById("txtEstimateCostAwardProcedure").value);
                     if (amount > 0 && amount <= 8000) {
    
                         $("#txtEstimateCost").blur(function (evt) {
    
                             // show control
                             evt.preventDefault();                        
                             $('#divDirect').show(1000);
                             
    
    .................

    Then what I should do it like?

    Thursday, March 14, 2019 3:31 AM
  • User-1509636757 posted

    I just want that when I finish from one control (after typing in a text box or selection an item from dropdown or selection a file to upload ) then it should show the next control which I make hidden by putting div's property display:none;

    I am having difficulty in understanding that how system would  be able to understand that user has done with typing in a textbox without handling the tab key press?

    Thursday, March 14, 2019 4:39 AM
  • User1052662409 posted

    I am having difficulty in understanding that how system would  be able to understand that user has done with typing in a textbox without handling the tab key press?

    The very first control is not hidden. It's visible.

    Thursday, March 14, 2019 4:49 AM
  • User839733648 posted

    Hi demoninside9,

    According to your description and code, I suggest that  you could use .change() function to make your control show.

    Here is a simple demo.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#types').change(function () {
                    if ($('#types').val() !== ' ') {
                        $('#other').show();
                    }
                    else {
                        $('#other').hide();
                    }
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:DropDownList ID="types" runat="server">
                <asp:ListItem>1111</asp:ListItem>
                <asp:ListItem>2222</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="other" runat="server" style="display: none;" ></asp:TextBox>
        </form>
    </body>
    </html>
    

    result:

    Best Regards,

    Jenifer

    Thursday, March 14, 2019 6:20 AM
  • User1052662409 posted

    According to your description and code, I suggest that  you could use .change() function to make your control show.

    When dropdownlist just have one item that change doesn't work, even if you click the dropdown and select the same item.

    Thursday, March 14, 2019 6:25 AM
  • User839733648 posted

    Hi demoninside9,

    If you just have one item in dropdownlist, of course the change() event will not fire.

    If your dropdownlist already has value, I think when the dropdownlist appear then the textbox will appear at the same time.

    Best Regards,

    Jenifer

    Thursday, March 14, 2019 7:22 AM
  • User-2054057000 posted

    For your text box add the keyup event:

    $("#textboxid").keyup(function (e) { 
    //...do some code
    });

    Tutorial of jquery change event 

    For your dropdown add the change event:

    $("#ddlid").change(function () {
        //...do some code
    });

    Usage of keyup event is done when making jQuery Autocomplete feature.

    Thursday, March 14, 2019 3:45 PM
  • User-474980206 posted

    its trivial with wrappers:

      <style>
       .hidden {
         display: none;
       }
       .show {
         display: block;
       }
      </style>
    
      <div class="wrapper">
        <div >
          <input />
        </div>
      </div>
      <div class="wrapper">
        <div class="hidden">
          <input />
        </div>
      </div>
      <div class="wrapper">
        <div class="hidden">
          <input />
        </div>
      </div>
      <div class="wrapper">
        <div class="hidden">
          <input />
        </div>
      </div>
    
    <script>
    $(function(){
      $('.wrapper').each(function(i,e) {
        e.tabIndex = i+1;
        $(e).find(':input').prop('tabIndex', i+1)
      });
      $('.wrapper').focus(function() {
         $(this)
           .removeAttr('tabIndex')
           .find('.hidden')
           .removeClass('hidden')
           .addClass('show')
           .find(":input").focus();
      });
    });  
    </script>

    Thursday, March 14, 2019 9:07 PM
  • User1052662409 posted

    $(e).find(':input').prop('tabIndex', i+1)

    It won't work as my form also has a <select ..> element and you method only works for (':input').

    Thanks

    Tuesday, April 2, 2019 12:31 PM
  • User475983607 posted

    demoninside9

    It won't work as my form also has a <select ..> element and you method only works for (':input').

    Modified the code slightly to fit your needs.  For example, check if the div contains an input element.

    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <style>
            .hidden {
                display: none;
            }
    
            .show {
                display: block;
            }
        </style>
    
    </head>
    <body>
        <div>
            <div class="wrapper">
                <div>
                    <input />
                </div>
            </div>
            <div class="wrapper">
                <div class="hidden">
                    <input />
                </div>
            </div>
            <div class="wrapper">
                <div class="hidden">
                    <select>
                        <option value="1">1</option>
                    </select>
                </div>
            </div>
            <div class="wrapper">
                <div class="hidden">
                    <input />
                </div>
            </div>
            <div class="wrapper">
                <div class="hidden">
                    <input />
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(function () {
                $('.wrapper').each(function (i, e) {
                    e.tabIndex = i + 1;
                    if ($(e).find(':input')) {
                        $(e).find(':input').prop('tabIndex', i + 1);
                    }
                    else {
                        $(e).find('select').prop('tabIndex', i + 1);
                    }
                });
    
                $('.wrapper').focus(function (e) {
                    if ($(e).find(':input')) {
                        $(this)
                            .removeAttr('tabIndex')
                            .find('.hidden')
                            .removeClass('hidden')
                            .addClass('show')
                            .find(":input").focus();
                    }
                    else {
                        $(this)
                            .removeAttr('tabIndex')
                            .find('.hidden')
                            .removeClass('hidden')
                            .addClass('show')
                            .find("select").focus();
                    }
                    
                });
            });
        </script>
    </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 2, 2019 2:10 PM
  • User-474980206 posted

    bruce (sqlwork.com)

    $(e).find(':input').prop('tabIndex', i+1)

    It won't work as my form also has a <select ..> element and you method only works for (':input').

    Thanks

    the :input includes <input>, <select> and <textarea>

    Tuesday, April 2, 2019 3:46 PM