How to prevent page refresh when using jQuery in asp.net

Question

I am trying to implement some jQuery into my asp project and every time a function is triggered is causes the page to refresh back to its initial state. I can see the results triggered by the jQuery for a split second then the page is refreshing so I know that the jQuery is fine.

Is there a way in which this can be stopped. I have tried searching around but there is noting that really explains how to do this and I am realitvly new to the world of asp .net.

I was thinking that I somehow need to use .preventDefault() but have not managed to string anything together.

Hers my code is basically puts the value of option into textbox and shows textbox when select is clicked

 <select id="ops">
   <option>Choose Property</option>
   <option value="one">one</option>
   <option value="two">two</option> 
  </select>
 <asp:Button ClientIDMode="Static" ID="select" runat="server" Text="Select"/>

<div id="mydiv">
<asp:TextBox ClientIDMode="Static" Enabled="false" ID="textbox" runat="server" CssClass="textEntry" />
</div>



<script type="text/javascript">
       $(document).ready(function () {
           $('#mydiv').hide();
           $('#ops').click(getOps);
       });

       function getOps() {
           var choice = $(this).val();
           $('#select').click(function () {
               $('#mydiv').show();
               $('#textbox').val(choice);
           });
       }

</script>

It seems like something is submitting a form, but I don't see a form or submit input in your html — Explosion Pills
– Explosion Pills, Commented Dec 2, 2012 at 16:35
inside your #select click function, you can try returning false at the end. This also prevents submission behavior. — garromark
– garromark, Commented Dec 2, 2012 at 16:39

uadnal · Accepted Answer · 2012-12-02 16:36:47Z

2

use event.prevenDefault();

<script type="text/javascript">
       $(document).ready(function () {
           $('#mydiv').hide();
           $('#ops').click(getOps);
       });

       function getOps() {
           var choice = $(this).val();
           $('#select').click(function (event) {
                event.preventDefault(); // stops form sumission
               $('#mydiv').show();
               $('#textbox').val(choice);
           });
       }

</script>

answered Dec 2, 2012 at 16:36

uadnal

11.5k2 gold badges35 silver badges40 bronze badges

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

1 Comment

rtn Over a year ago

Hey man thanks that done the trick, I knew it was something to do with the event.preventDefault(); but just didn't know how to use it.

Collectives™ on Stack Overflow

How to prevent page refresh when using jQuery in asp.net

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related