JavaScript not run on onsubmit event

StackOverflow https://stackoverflow.com/questions/17621179

  •  03-06-2022
  •  | 
  •  

题

To learn about web programming, I'm trying a simple html/javascript/php "product search" page. Here is the index.php file:

<html>
    <head>
        <title>Product Search</title>
        <script type="text/javascript">
            function mySubmit() {
                alert("submitting...");
                var product_type = $('product_type').value;
                $.post('product_search.php', { product_type: product_type }, function (data) {
                    alert("result = " + data); 
                    $('body').html(data);
                }
                return false;
            }
        </script>
    </head>
    <body id="body">
        <script type="text/javascript">
            mySubmit();
        </script>
        <form class="form" id="myform" method="post" onsubmit="javascript:return mySubmit();">
            Product Type:
            <input id="product_type" type="text" name="product_type"/>
            <br/><br/>
            <input id="submit" type="submit" value="Submit"/>
        </form>
    </body>
</html>

and the product_search.php file is very small:

<?php


$product_type = $_POST["product_type"];
echo "<h1>$product_type</h1>";

?>

The problem is that it seems like the onsubmit event is never called for the form. I thought it was a JavaScript problem (as in, not allowed to run), but if I run an alert instead of calling mySubmit() when the onsubmit event is called, it works!

Also, am I wrong in thinking that the JavaScript just under the <body id="body"> should be run? It is never run either.

So, for those who didn't read all that: why is my JavaScript function not being run when the onsubmit event is fired?

有帮助吗？

解决方案

I get the following parsing errors when I run your code:

Uncaught SyntaxError: Unexpected token return

Uncaught ReferenceError: mySubmit is not defined

You are missing the closing ) on your $.post call, which is breaking the parser. Once you fix that, you'll get the $ is undefined error until you reference jQuery.

http://jsfiddle.net/Z6hJK/

其他提示

<script type="text/javascript">
            mySubmit();
        </script>

above function is called but when it is called, even document.getElementById('product_type').value gives error (which might not be enabled on your browser to catch) as it product_type turn out to be null as javascript in body gets executed before browser has fully rendered the page. The moment it is getting called, product_type is not yet rendered.

On click also your function is getting called, but this time may be it is failing as you do not have reference to Jquery. include one.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top