Form submit event is not capturing OnSelectedIndexChanged?

Question

I have a button and a dropdownlst

enter image description here

And I have this script :

$("form").submit(function (e)
    {
        $('#divOverlay').show();
        });

My Goal :

When a form submits , I need to show a "loading div" :

Question :

When I press the button it does show me the div (the gray div which blinks for a second):

enter image description here

But when I change index on the dropdownlist :

<asp:DropDownList runat="server" OnSelectedIndexChanged="OnSelectedIndexChanged" AutoPostBack="True">
    <asp:ListItem Value="a"> a</asp:ListItem>
        <asp:ListItem Value="b">b</asp:ListItem>
</asp:DropDownList>

It does submit bUt I dont see the div :

enter image description here

Why does the $("form").submit(function (e) does not capture this postback which occurs after selected index change ? ?

NB :

Fiddler shows both events (pressing the button && changing index) as a POST command

What is the structure of the file ? ( psuedo) :

<html  >
<head>
 ...     
</head>
<body>
    <div id='divOverlay'>  
       ...
    </div>

        <form id="form1" runat="server"  >
            <asp:Button runat="server" Text="sssssss"/>
        <asp:DropDownList runat="server" OnSelectedIndexChanged="OnSelectedIndexChanged" AutoPostBack="True">
            ...
        </asp:DropDownList>

        </form>


        <script type="text/javascript">
            $(function()
                {
                    $("form").submit(function (e)
                    {
                            $('#divOverlay').show();
                    });
                });

        </script>
</body>
</html>

Can you show the difference between both requests which sent to the server ? **Yes.**

The right side is when index is changed and the left pane is for button press

enter image description here

Maybe this will help: http://stackoverflow.com/questions/2073384/jquery-form-submitfn-does-not-work-with-asp-net — Johan, Aug 26 '13 at 14:17
@Johan Tried with both document.ready and without - and it still doesn't work — Royi Namir, Aug 26 '13 at 14:19
This seems to be related: http://stackoverflow.com/questions/1230573/how-to-capture-submit-event-using-jquery-in-an-asp-net-application Maybe that helps? — michael81, Aug 26 '13 at 14:27

score 2 · Accepted Answer · answered Aug 27 '13 at 10:02

2

There is an ASP.NET's method: ClientScript.RegisterOnSubmitStatement, that lets you run a JavaScript statement each time the HtmlForm is submitted

ClientScript.RegisterOnSubmitStatement(this.GetType(), "divOverlayShow", "$('#divOverlay').show();");

answered Aug 27 '13 at 10:02

Oleg Grishko

4,132
2
38
52

This is working. thank you !I will investigate what JS it generates behind. – Royi Namir Aug 27 '13 at 10:04
Strange , but `$("form").attr('onsubmit', 'alert(1);');` does work. while attaching JS event handler is not working.... – Royi Namir Aug 27 '13 at 11:11

score 1 · Answer 2 · answered Aug 26 '13 at 14:32

1

I guess the autopostback behaviour is to submit the form through javascript and a call to __doPostBack(), which does not trigger the submit event.

You may try :

<asp:DropDownList onchange="$('#divOverlay').show();" runat="server" OnSelectedIndexChanged="OnSelectedIndexChanged" AutoPostBack="True">

answered Aug 26 '13 at 14:32

jbl

15,179
3
34
101

submit is a javascript method of the form object. It is also an event triggered when the form is submitted by the user. But it is not triggered when the form is submitted through code. see http://stackoverflow.com/q/645555/1236044 – jbl Aug 26 '13 at 14:51

score 0 · Answer 3 · answered Aug 26 '13 at 14:32

0

not sure, sounds like the postback of the DDL and of the form r apart of different.

anyways i would advice u to simply solve by dropping the autopostback from the DDL and add a client-side onchange where there u can either show the grey div and then manually postback the server-side onselect like this: http://bresleveloper.blogspot.co.il/2012/05/force-updatepanel-postback.html or just $("form").submit()

answered Aug 26 '13 at 14:32

bresleveloper

5,940
3
33
47

The whole purpose is to add a script which will show a div for a **given site** which means - not to touch the html and solve it with pure JS. and your solution requires to change functionallity/code for every page – Royi Namir Aug 26 '13 at 14:34
i think i missed something here Royi, ur doing anyways this $("form").submit(function (e) { $('#divOverlay').show(); });, why cant u just add there some line? sorry for the ignorance m8 – bresleveloper Aug 26 '13 at 15:54
this is done on a seperate JS file (js file) .p.s. i already found a solution. tomorrow ill update. – Royi Namir Aug 26 '13 at 16:53

score 0 · Answer 4 · answered Aug 27 '13 at 02:05

Not sure if this would help but this worked for me. I can show the overlay div in both events.

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">
        $(document).ready(function () {
            $("form").submit(function (e) { 
                alert("Submit");
            });
            $("#dropdown").change(function (e) {
                alert("Hi");
            });
        });

    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:Button runat="server" ID="submitbutton" Text="submit"/>
    <asp:DropDownList ID="dropdown" ClientIDMode="Static"  runat="server" AutoPostBack="True"  OnSelectedIndexChanged="OnSelectedIndexChange"/>
</asp:Content>

Form submit event is not capturing OnSelectedIndexChanged?

4 Answers4