locked
Multiple Java script functions on buttons client click RRS feed

  • Question

  • User1052662409 posted

    Hi All,

    I am having a <asp:Button... /> control on my form.

     <asp:Button ID="btnDirectSubmit" OnClientClick="return GetSelectedTextValue()" OnClick="btnDirectSubmit_Click" runat="server" CssClass="btn aqua block bottom15" Text="Confirm" />

    On OnClientClick I am calling some predefined function GetSelectedTextValue()". 

    Now I also want to open a modal popup on button click. Below is my Jquery code to open popup.

      <script type="text/javascript">
                $(function () {
                    $('#btnDirectSubmit').click(function () {
                        $('#myModal').modal('show');
                    });
    
                    $('#btnSave').click(function () {
                        var value = $('input').val();
                        $('h1').html(value);
                        $('#myModal').modal('hide');
                    });
                });
    
            </script>

    But popup doesn't come. I assume that this occurs because I am calling two function on button's client click.

    How can I achieve this?

    Please suggest.

    Monday, April 1, 2019 12:44 PM

Answers

  • User839733648 posted

    Hi demoninside9,

    As the above community members have explained, asp:Button will always cause postback.

    After you click the asp:Button, the modal should show.

    Then the control causes the page post back, you will find that the page reloads, so the modal will close.

    To prevent this, you could try to return false in the javascript method.

    Best Regards,

    Jenifer

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

All replies

  • User475983607 posted

    A modal is client side code and the OnClick is a server side handler.  The approach will not work because the button click causes a postback which refreshes the entire page.

    Can you explain the problem you are trying to solve with this approach?

    Monday, April 1, 2019 1:33 PM
  • User-943250815 posted

    OnClientClick should return "true". Other than OnClick will not be fired.
    It is similar to a Delete button with javascript confirm('Are you sure?')

    Monday, April 1, 2019 8:28 PM
  • User1052662409 posted

    Can you explain the problem you are trying to solve with this approach?

    I want to preview all details in a popup modal before submitting it finally.

    Whatever fields I have field and try to submit by clicking on button it should show all filled information in modal popup. And once I confirmed then button should execute the server side code.

    This is what I need.

    Thanks

    Tuesday, April 2, 2019 3:23 AM
  • User-2054057000 posted

    You are using asp:Button to open a Bootstrap Modal in your site. You should remember that an asp:Button will always bring postback. So in order to prevent the postback on the button's click you should return false from the JavaScript method.

    The below code will do your work:

    $('#btnDirectSubmit').click(function () {
        $('#myModal').modal('show');
        return false;
    });

    Tuesday, April 2, 2019 5:38 AM
  • User839733648 posted

    Hi demoninside9,

    As the above community members have explained, asp:Button will always cause postback.

    After you click the asp:Button, the modal should show.

    Then the control causes the page post back, you will find that the page reloads, so the modal will close.

    To prevent this, you could try to return false in the javascript method.

    Best Regards,

    Jenifer

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