CODEWITHSUNDEEP
jquery
Peter
Peter

Reputation: 11

jquery does not focus on form field

Why does the following page not work with the form tags included (as below), but does when they are removed? (new to jquery, obviously...)

 <!DOCTYPE html>
 <head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script language="JavaScript">
      $(document).ready(function () {
            $("button").click(function () {
              $('#inputid').focus();       
            });
    });
    </script>
 <head>
 <body>

 <form>
     <input type="text" id="inputid">
     <button>Click Me</button>
 </form>

 </body>
 </html>

Upvotes: 1

Views: 105

Answers (5)

Lee Gunn
Lee Gunn

Reputation: 8656

Because the default behavior of a <button> (in the browser you are using) is submit. So, when you click the button with the form tags included, the form performs a POST.

submit: Creates a submit button. This is the default value.

http://www.w3.org/TR/html401/interact/forms.html#h-17.5

Add type="button" to the button element to stop it from POSTing the form.

To be safe, you should always specify the type of button.

Upvotes: 2

Shwet
Shwet

Reputation: 1868

i have tested it and working perfactly...

<script>
      $(document).ready(function () {
            $("#button").click(function () {
              $('#inputid').focus();  
              //return false;     
            });
    });
    </script>

and 

<form>
     <input type="text" id="inputid">
     <input id="button" type="button" value="Click"/>
 </form>

Upvotes: 2

user2028750
user2028750

Reputation:

Try this way

 <form action="#">
     <input type="text" id="inputid">
     <button>Click Me</button>
 </form>

Upvotes: 0

som
som

Reputation: 4656

$(document).ready(function () {
    $("button").click(function (e) {
        e.preventDefault();

        $('#inputid').focus();
        return false;
    });
});

When you click on button.Form performs post.

Upvotes: 1

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

Try to use button like this:

 <button type="button">Click Me</button>

Upvotes: 1

Related Questions