CODEWITHSUNDEEP
javascriptjqueryhtmlformsdom
Nicsoft
Nicsoft

Reputation: 3712

Javascript function not triggered

On JQuerys's page (http://api.jquery.com/submit/) I am trying out one of their examples. It's pure copy paste but (except, html, body, etc.) Still it doesn't work. What is the problem: 

<body>
<html>
<head>
<script>

$('#target').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});

</script>

</head>

<form id="target" action="get_input_values.html">
  <input type="text" value="Hello there" />
  <input type="submit" value="Go" />
</form>
<div id="other">
  Trigger the handler
</div>

</body>
</html>

I just want to have a function that can be triggered when I submit a form. Next step I will need to get the values from the input fields.

Thanks in advance!

Upvotes: 0

Views: 2080

Answers (7)

Fender
Fender

Reputation: 3055

Your HTML is wrong. It should be sequenced as:

<html>
<head>
</head>
<body>
</body>
</html>

But your JavaScript is not working because you have to put it inside

$(document).ready(function(){
//your code
});

and additionally you have to include jQuery at the beginning:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Upvotes: 0

Talha Ahmed Khan
Talha Ahmed Khan

Reputation: 15433

Try to put the <script>...</script> in the end. Or wrap the submit function on ready() function like:

$(document).ready(function(){
  $('#target').submit(function() {
    alert('Handler for .submit() called.');
    return false;
  });
});

This way the submit will be bind to the form after the whole page is been loaded.

Upvotes: 0

abhijit
abhijit

Reputation: 1968

add this

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

and wrap it inside document.ready or like below

<script>
$(function(){
$('#target').submit(function() {
 alert('Handler for .submit() called.');
 return false;
});
});

</script>

Upvotes: 0

Mihai Iorga
Mihai Iorga

Reputation: 39704

Did you load the jQuery?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Upvotes: 1

Quentin
Quentin

Reputation: 943586

There is no element with the id target in the DOM at the time the script runs. As a result, zero elements have the submit event handler attached.

Move the script to the end of the document (just before </body>)

Upvotes: 3

Alnitak
Alnitak

Reputation: 339816

You haven't wrapped your script in a 

$(document).ready(function() {
    ...
});

block, so the element #target can't be found when your code is run.

Upvotes: 4

Jamie Dixon
Jamie Dixon

Reputation: 53989

You'll want to attach the submit event to the form once the form has loaded on the page.

To do this you can wrap the whole thing in a $(document).ready():

$(document).ready(function(){
   $('#target').submit(function() {
      alert('Handler for .submit() called.');
      return false;
   });
});

This is basically saying that once the document has finished loading, go and find the form and attach a submit event to it. Trying to do this the way you did it runs the risk that the form on the page won't have loaded by the time your Javascript tried to find it.

Here's a working example of your code: http://jsfiddle.net/MmMa8/

Upvotes: 1

Related Questions