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.

When you change DropDownList you call onchange="GetSelectedItem(this) but there is no call for the button. What do you mean when saying "submit button is not working"? — user2316116
– user2316116, Commented Feb 12, 2015 at 20:31
When GetSelectedItem(this) is called, I am making a label and a textbox visible, user enters something in the textbox, updates the information and then the button works at that time. But when the value is not "Cancelled" then GetSelectedItem(this) goes in the else part. After that the submit button does not get fired. — nrvbha
– nrvbha, Commented Feb 12, 2015 at 20:40
It does not get fired when user clicks on it? If true, you need to check CancellationReason - maybe it checks and does not let to submit the form. — user2316116
– user2316116, Commented Feb 12, 2015 at 20:43
No. I also added the following code, //document.getElementById('<%= btnSubmit.ClientID %>').click(); $('btnSubmit').trigger('click'); but neither option fires the click event. — nrvbha
– nrvbha, Commented Feb 12, 2015 at 20:44
Please modify your post and add code for trigger('click'); Currently it is not clear where you call it. Also either check CancellationReason or share it too as it might be the reason of the issue. — user2316116
– user2316116, Commented Feb 12, 2015 at 20:46

Community · Accepted Answer · 2017-05-23 12:12:39Z

0

Use selector by id, not by name

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

--or--

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

jquery selector not working, why?

P.S.

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

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Feb 12, 2015 at 21:16

user2316116

6,8221 gold badge24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2316116 Over a year ago

Did you include jquery?

nrvbha Over a year ago

Yes. <script src="code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related