Jquery: Prevent reloading page when pressing input type=submit

Question

I have the following code in a MVC 3 (Razor) project:

<div class="user_info" id="id_user_info">
   <script type="text/ecmascript"  >
      $(function () {
         $('#buttonClear').live('submit', function (e) { return false; });
         $('#buttonClear').bind('click', function () {
            $('username').value = "";
            $('password').value = "";
         });
   </script>
   @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "loginForm" }))
   {
      <label for="username">Enter:</label>
      <input name="username" id="username" type="text" value="" /><br />
      <input name="password" id="password" type="password" value="" /><br />
      <input name="rememberMe" id="rememberMe" type="checkbox" value="true" />
      <label for="rememberMe">Remember me?</label><br />
      <input id="buttonLogin" type='submit' value="Login" />
      <input id="buttonClear" type='submit' value="Clear" />
   }
</div>

I need to keep the "buttonClear as type sumbit because of the style, but i need to disable/avoid/prevent it from reloading the page once pressed.

Is there a way to remove the "submit event" from "buttonClear"?

Thanks Ricardo

kinakuta · Accepted Answer · 2011-07-15 08:47:11Z

8

$('#buttonClear').click(function(e){
  // do whatever actions you need here
  e.preventDefault();
});

answered Jul 15, 2011 at 8:47

kinakuta

9,0371 gold badge41 silver badges48 bronze badges

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

1 Comment

Ricardo Over a year ago

Thank you, i had to change the actions to: $('#username').val(""); $('#password').val("");

James Allardice · Accepted Answer · 2011-07-15 08:46:28Z

3

I would suggest removing the handler you're binding to the submit event, and instead using preventDefault in the click event handler:

$('#buttonClear').bind('click', function (e) {
   e.preventDefault();
   $('username').value = "";
   $('password').value = "";
});

The submit event approach you have tried will not work because submit events can only be bound to form elements, not the buttons that submit the form.

answered Jul 15, 2011 at 8:46

James Allardice

166k22 gold badges335 silver badges316 bronze badges

1 Comment

Ricardo Over a year ago

Thank you, i had to change the actions to: $('#username').val(""); $('#password').val("");

Vivek · Accepted Answer · 2011-07-15 08:48:34Z

2

try e.preventDefault();

   $('#buttonClear').bind('click', function (e) {
       e.preventDefault();
       $('username').value = "";
       $('password').value = "";
    });

answered Jul 15, 2011 at 8:48

Vivek

11k15 gold badges51 silver badges68 bronze badges

1 Comment

Ricardo Over a year ago

Thank you, i had to change the actions to: $('#username').val(""); $('#password').val("");

Matt B · Accepted Answer · 2012-08-02 17:47:55Z

1

While I realize this post is a little older, I wanted to provide this answer for the record as well.

<input id="buttonClear" type='submit' value="Clear" />

Normally you would not have multiple submit buttons for one form. Additionally, since you don't actually want submit functionality it wouldn't be accurate to use this type. Finally you are looking for a "Clear" or "Reset" functionality. Your button should be:

<input id="buttonClear" type="reset" value="Clear" />

answered Aug 2, 2012 at 17:47

Matt B

6,3621 gold badge23 silver badges27 bronze badges

Comments

Tom Troughton · Accepted Answer · 2011-07-15 09:03:31Z

0

Why not just

$('#buttonClear').click(function() {
    return false;
});

answered Jul 15, 2011 at 9:03

Tom Troughton

4,4555 gold badges48 silver badges92 bronze badges

Collectives™ on Stack Overflow

Jquery: Prevent reloading page when pressing input type=submit

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related