How can I keep the same position on the form once a user selects a value from the drop down?

Question

I have a drop down field on my form. When I select a value from the drop down it immediately resets the focus to the top of the form.

To be clearer I have an image at the top of the screen and several input fields. The user would have to scroll down to the actual drop down field in order to select it. Once they select the value the page scrolls back to the top.

My drop down is setup as:

   <div class="form-group">
        <div class="dropdown">
            <button class="btn btn-default form-control dropdown-toggle" type="button" id="ddState" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                State
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" id="ulState" aria-labelledby="ddState">
                <li><a href="#" data-value="action">Action</a></li>
                <li><a href="#" data-value="another action">Another action</a></li>
                <li><a href="#" data-value="something else here">Something else here</a></li>
                <li><a href="#" data-value="separated link">Separated link</a></li>
            </ul>
        </div>
    </div>

My javascript is setup as:

$("#ulState li").on("click", function () {
    $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
    $(this).parents(".dropdown").find('.btn').val($(this).data('value'));

    $("#ulState").focus();
});

If you comment out `$("#ulState").focus();` and run it, does it still jump to the top of the page? — neilsimp1, Jun 16 '16 at 18:31

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

In your page directive <%@ Page... add this

MaintainScrollPositionOnPostback="true"

if this doesn't work for you have a look at this article here or here

Hope this will work for you

edited May 23 '17 at 12:22

Community

1
1

answered Jun 16 '16 at 18:25

Sharique Ansari

1,458
1
12
22

He said he's using MVC. I thought that this was a WebForms only kinda thing. – neilsimp1 Jun 16 '16 at 18:29
Yes this is an MVC project. – John Doe Jun 17 '16 at 11:04

score 0 · Accepted Answer · answered Jun 17 '16 at 12:01

The solution is is to replace the href attribute with the data-target attribute.

    // This will correct the behavior and keep the page focused.
    <li><a data-target="#" data-value="something else here">Something else here</a></li>

    // This will cause the page to jump
    <li><a href="#" data-value="separated link">Separated link</a></li>

How can I keep the same position on the form once a user selects a value from the drop down?

2 Answers2