ASP.Net submit button click event not working after dropdown list index change in JavaScript

Question

I have an asp.net application. I am displaying a confirmation popup alert when the selected index changes to a specific value ("Cancelled") in dropdown list.

<asp:DropDownList ID="ddlStatus" runat="server" CssClass="selectstyle" DataTextField="Name" DataValueField="ID" onchange="GetSelectedItem(this)" />

The dropdown has 4 values - "Pending", "Fixed", "Responded" and "Cancelled"

So when user selects "Cancelled" value, I am displaying a confirmation popup box. Depending on the user selection from the confirmation box, I am modifying the UI of the page and update the changes (submit button works).

function GetSelectedItem(x) {
        if (x.value == 4) {
            if (confirm("Are you sure you want to cancel support ticket ?") == true) {
                document.getElementById("lbl_CancellationReason").style.display = 'block';
                document.getElementById("tbx_CancellationReason").style.display = 'block';
            }
        }
        else {
            document.getElementById("lbl_CancellationReason").style.display = 'none';
            document.getElementById("tbx_CancellationReason").style.display = 'none';
            //document.getElementById('<%= btnSubmit.ClientID %>').click();
            $('btnSubmit').trigger('click'); 
        }
    }

But when user selects any other value from the dropdown list ("Pending", "Fixed", "Responded") or makes any other changes in the page, my submit button (update) is not working. It does not give any error but nothing happens on my page.

Here is my cancellation reason and update button,

<td class="label" align="right">
    <div id="lbl_CancellationReason" runat="server" style="display:none">
     Cancellation Reason :
     </div>
</td>
<td>
     <div id="tbx_CancellationReason" runat="server" style="display:none">
       <asp:TextBox ID="tbxCancellationReason" runat="server" CssClass="selectstyle" TextMode="MultiLine" Width="400" Height="50">  </asp:TextBox>                                       
       <asp:RequiredFieldValidator ErrorMessage="Please enter cancellation reason." ValidationGroup="CancellationReason" ControlToValidate="tbxCancellationReason" runat="server" />
    </div>
</td>

<asp:Button ID="btnSubmit" runat="server" Text="Update Details" Style="display: inline; margin-left: 15px;" OnClick="btnUpdate_Click" CssClass="selectstyle" UseSubmitBehavior="false" ValidationGroup="CancellationReason"/>

Not sure what to do.

Answer 1

Use selector by id, not by name

$('#btnSubmit').trigger('click');

--or--

$('#btnSubmit').click();

jquery selector not working, why?

PS

Additionally you check for ValidationGroup="CancellationReason" and even the textbox is not visible, the form is not valid and you cannot submit it. To solve it,

• either add a value to tbxCancellationReason (so that the validation will pass)

   $('#tbxCancellationReason').val("-"); $('#btnSubmit').click(); 

• or do not use asp.net validation but use jquery/javascript to check it

• or disable validation from javascript - Disable requiredfieldvalidator with javascript
• or use conditional check - asp:RequiredFieldValidator validation based on conditions