0

I'm having problem with the following code,

The submit button is not binding to the jQuery script and the console is not printing anything. I can't figure out what the problem is..

<html>

<head>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script>
</head>

<body>

<script>
// Variable to hold request
var request;

// Bind to the submit event of our form
$("#show").submit(function(event){

    console.log ("Im here");

});

</script>
    <!--form action="getVehiclePosition.php" method="GET"-->
    <!--Name: <input type="text" name="name"><br>-->
    <form id="show">
        <input type="submit" value="Send">
    </form>

</body>
</html>
Satpal
  • 132,252
  • 13
  • 159
  • 168
lukieleetronic
  • 623
  • 7
  • 10
  • 23

3 Answers3

4

You code is not working as at the time the script is interpreted and executed, the form does not exist in the DOM. Wrap your code in document-ready handler.

Specify a function to execute when the DOM is fully loaded.

Use

 $(function () {
    //Your code
 })

OR, You can place the script tag below the form element

Satpal
  • 132,252
  • 13
  • 159
  • 168
1

It is a silly mistake and the only thing that you have to change is to wrap the whole code in $(document).ready(function(){}); .

The updated code is :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<script>
$(document).ready(function(){
var request;
$("#show").submit(function(event){
    console.log ("Im here");
});
});
</script>
    <!--form action="getVehiclePosition.php" method="GET"-->
    <!--Name: <input type="text" name="name"><br>-->
    <form id="show">
        <input type="submit" value="Send">
    </form>

</body>
nrvarun
  • 93
  • 8
-2

May be you can modify id form to "show123" and run again. if it's work => duplicate id show in page. Glad help for you.

hungitk46
  • 1
  • 1