asp.net jquery button click prevent postback

Question

I would like to have asp:Button and when I click it, I dont want it to do postback but add a new div into . here is my code

    <script type="text/javascript">
        $(document).ready(function (e) {
            $('#<%=btn_comment_add.ClientID %>').click(function (e) {
                $('#comments').append('<div>asd</div>');
                return false;
            });
        });
    </script>

here is the asp.net button

  <asp:Button ID="btn_comment_add" runat="server" Text="Gönder" CssClass="theme04" UseSubmitBehavior="false" />

I can see that code adds the div but it postbacks so it gets deleted. I see the new div for a second only:)

please help me to fix it so it wont postback. Thank you very much people

Would setting the type="button" not prevent the button from being a submit button? I think by default it renders as type="submit". — Nope
– Nope, Commented Feb 7, 2013 at 16:26

Ankit · Accepted Answer · 2013-02-07 16:36:04Z

5

instead of using ASP Button use simple HTML button and assign jquery function that you wish to run,

<input type="button" name="btnname" onclick="MyJueryFunction()" />

and write you jquery as

function  MyJueryFunction()
{
  $('#comments').append('<div>asd</div>');

 }

edited Feb 7, 2013 at 16:36

answered Feb 7, 2013 at 16:26

Ankit

6904 silver badges17 bronze badges

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

4 Comments

Reinstate Monica Cellio Over a year ago

Yo dawg... Why is there a click event handler inside a click event handler?

aquinas Over a year ago

You've obtrusified your unobtrusive JavaScript! :)

aquinas Over a year ago

But...no. That's not the way you write jQuery. You should use jQuery to set up your click event. Don't do "onclick=".

Ankit Over a year ago

@aquinas: Does it make a difference if i assign the onclick function initially instead of assigning at runtime? if it does, could you please help me understand.

aquinas · Accepted Answer · 2013-02-07 16:16:52Z

3

If you don't want it to postback, then why do you have an asp.net button? In any case, you can do this:

  <asp:Button ID="btn_comment_add" runat="server" Text="Gönder" CssClass="theme04" UseSubmitBehavior="false" 
OnClientClick="return false;" />

answered Feb 7, 2013 at 16:16

aquinas

23.9k5 gold badges60 silver badges82 bronze badges

5 Comments

user2011349 Over a year ago

What else can i use instead of button. i am new to this

aquinas Over a year ago

Just do <input type=button>. If you don't need it to postback, then there is no reason to make it an ASP.NET server control

SearchForKnowledge Over a year ago

What if I am using a Jquery to display a popup from the client side? I just don't want it to postback

SearchForKnowledge Over a year ago

@aquinas The button is inside a GridView. How can I use a standard HTML button which can be accessed from code-behind and front end without postback?

aquinas Over a year ago

If you need to be able to access the properties of button from the backend (e.g., visible or not, etc) then yes, you need to make it a server control.

Tim B James · Accepted Answer · 2013-02-07 16:22:21Z

2

Get rid of the UseSubmitBehavior.

When you have this set to false, ASP.NET will add a client side onclick event which will fire before/after your own javascript event, so no matter what you do within your click event to try and stop it from posting back, it will.

View the source of the page, you will see something like;

javascript:__doPostBack(&#39;btnID&#39;,&#39;&#39;)

On the button

answered Feb 7, 2013 at 16:22

Tim B James

20.4k4 gold badges77 silver badges108 bronze badges

3 Comments

user2011349 Over a year ago

But i am using btn_comment_add.clientid() and still doesnt work

Tim B James Over a year ago

What do you mean you are still using btn_comment_add.clientid()? Just remove the UseSubmitBehaviour attribute from the button and don't change anything else.

user2011349 Over a year ago

İ decided to use regular html button to get rid of the complexity. thank u very much

Shanaka Rathnayaka · Accepted Answer · 2013-12-12 05:19:36Z

1

there are several ways you can achieve this. Following is another way

    $("#<%=ButtonClick.ClientID %>").bind('click', function (e) {
         e.preventDefault();
         //Do Your work 
    });

answered Dec 12, 2013 at 5:19

Shanaka Rathnayaka

2,6921 gold badge27 silver badges23 bronze badges

Comments

Praneeth · Accepted Answer · 2015-11-03 11:11:27Z

0

IN THIS CASE ASP BUTTON HAVE TO CALL FUNCTION WITH SOME VALIDATION //ASP BUTTON

asp:Button ID="btnSave" runat="server" Text="Save" class="btn btn-success" OnClientClick="return Valid()" OnClick="btnSave_Click"

function Valid() {

        if ($("#ctl00_ContentPlaceHolder1_ddlLocation").val() == 0) {
            alert("Please select Location");
            $("#ctl00_ContentPlaceHolder1_ddlLocation").focus();
            return false;
        }

        if ($("#ctl00_ContentPlaceHolder1_txtArea").val().length == 0) {
            alert("Please Type Area");
            $("ctl00_ContentPlaceHolder1_txtArea").focus();
            return false;
        }
        return true;
    }

answered Nov 3, 2015 at 11:11

Praneeth

213 bronze badges

Collectives™ on Stack Overflow

asp.net jquery button click prevent postback

5 Answers 5

4 Comments

5 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

5 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related