On JQuerys's page (/) 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!
On JQuerys's page (http://api.jquery./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!
Share Improve this question asked Jul 18, 2011 at 10:33 NicsoftNicsoft 3,7229 gold badges43 silver badges71 bronze badges7 Answers
Reset to default 4You haven't wrapped your script in a
$(document).ready(function() {
...
});
block, so the element #target can't be found when your code is run.
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>)
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/MmMa8/
Did you load the jQuery?
<script src="http://ajax.googleapis./ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
add this
<script src="http://ajax.googleapis./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>
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.
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./ajax/libs/jquery/1.6.2/jquery.min.js"></script>