CODEWITHSUNDEEP
javascriptjqueryhtmlforms
user1299846
user1299846

Reputation: 387

Jquery submit form broken

I tried stop form refreshing the page but it refreshes page every time i submit the form.

<script>
$("#myforms").submit(function() { 

   return false; 
});
</script>

<form action="" method="post" id="myforms">
      <input id="search123" style="text-align:center" type="text" value="Enter Search..." />
    </form>

Update:

$(document).ready(function() {
    $("#myforms").submit(function() {
              runSearch123();
              return false;
        });
});

Still same problem

Upvotes: 0

Views: 346

Answers (6)

adeneo
adeneo

Reputation: 318242

A submitted form will always refresh/redirect the page, to avoid it all you have to do is:

<form action="" method="post" id="myforms" onsubmit="return false">
      <input id="search123" style="text-align:center" type="text" value="Enter Search..." />
</form>​​​​​​​​​​​​​

returning false on the submit handler will prevent the form from submitting, and the page from refreshing, and there really is no need for jQuery just to prevent a form!

To both send the form to the server and not have the page refresh will however require the use of Ajax, and jQuery has some great ajax functionality built in, but it looks like you need to read up a little on the jQuery website.

Upvotes: 0

Alex W
Alex W

Reputation: 38213

This is a common problem, and is easily solved.

Just get rid of the <form> tags and instead use:

<div id="myforms">
    <input id="search123" onKeyUp="setTimeout(submit,1000)" style="text-align:center" type="text" value="Enter Search..." />
</div>

Then create a submit() method in Javascript that performs the desired operations.

This stops the form from posting back to the page.

If you need to POST the data somewhere, use JQuery's .post() method in the submit() method:

http://api.jquery.com/jQuery.post/

Upvotes: 0

Musa
Musa

Reputation: 97672

Move the script tag to after the form or add the code to a domready event.

<form action="" method="post" id="myforms">
      <input id="search123" style="text-align:center" type="text" value="Enter Search..." />
</form>
<script>
    $("#myforms").submit(function() {
        return false;
    });
</script>

FIDDLE

<script>
    $(document).ready(function(){
        $("#myforms").submit(function() {
            return false;
        });
    });
</script>

FIDDLE

Upvotes: 0

Paul Phillips
Paul Phillips

Reputation: 6259

You need to put your code in the jQuery ready handler.

<script>
$(function(){
  $("#myforms").submit(function() {
              return false;
        });
});
</script>

Upvotes: 2

Ungureanu Liviu
Ungureanu Liviu

Reputation: 4124

You forgot some paranthesis:

$("#myforms").submit(function() {
        return false;
  });

Upvotes: 0

Conner
Conner

Reputation: 31060

You need to use ajax if you don't want to refresh the page.

Upvotes: 1

Related Questions