提交表单时JavaScript不工作_Javascript_Jquery_Html_Forms

提交表单时JavaScript不工作

javascript jquery html forms

提交表单时JavaScript不工作,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我正在编写一个HTML代码，其中有一个具有不同单选按钮的表单，该表单将在单击任何单选按钮时自动提交，表单数据将提交到php文件以进行数据库查询，php文件中的结果数据将显示在下面声明的空div中。问题是，javascript根本没有执行。当我通过重定向（即编写方法和操作）复制表单时，它工作正常。但是一旦使用javascript，它就不起作用了。此外，如果我编写一个简单的javascript脚本，这是可行的。但这个脚本不是 <!DOCTYPE html> <?php includ

我正在编写一个HTML代码，其中有一个具有不同单选按钮的表单，该表单将在单击任何单选按钮时自动提交，表单数据将提交到php文件以进行数据库查询，php文件中的结果数据将显示在下面声明的空div中。问题是，javascript根本没有执行。当我通过重定向（即编写方法和操作）复制表单时，它工作正常。但是一旦使用javascript，它就不起作用了。此外，如果我编写一个简单的javascript脚本，这是可行的。但这个脚本不是

<!DOCTYPE html>
<?php
include_once 'connection-script.php';
session_start();
if(!isset($_SESSION['email']))
{
    header('Location: index.php');
}
?>

<html>
<head>
    <meta charset="utf-8">
    <title>Competitions</title>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script>
$("#queryform").submit(function(event) {

                event.preventDefault();
                alert("In the query");
                var posting = $.post("previous-grades-student-script.php", $("#queryform").serialize());

                posting.done(function(data) {
                alert("In the success function");
                   var content = $(data).find('#showprevioussubmissions');
                  $("#showprevioussubmissions").html(data);
                });
            });

</script>


</head>


    <head>
            <link rel="stylesheet" type="text/css" href="css/style.css">
            <link href='//www.google.com/fonts#UsePlace:use/Collection:Bree+Serif' rel='stylesheet' type='text/css'>
    </head>

<body  style="background-color:whitesmoke;">

<div id="header" class="header" style="background-color:#6ccecb;">
    <?php
    $mail=$_SESSION['email'];
    $query="SELECT * from student where semail='$mail'";
    $result=mysql_query($query);
    $row=mysql_fetch_array($result);
    $filename=$row['studentid']."_dp";
    ?>
    <ul><p><a href="homepage_student.php">NAME</a></p>

        <?php
        if(file_exists('pictures/'.$filename.'.jpg'))
        {
            echo '<li style="margin:-3% 1% 1% 0%;"><a href="#"><img src="pictures/'.$filename.'.jpg" ><p  class="usrname">'.$row['fname'].'</p></a>';
        }
        else if(file_exists('pictures/'.$filename.'.gif'))
        {
            echo '<li style="margin:-3% 1% 1% 0%;"><a href="#"><img src="pictures/'.$filename.'.gif" ><p  class="usrname">'.$row['fname'].'</p></a>';
        }
        else if(file_exists('pictures/'.$filename.'.png'))
        {
            echo '<li style="margin:-3% 1% 1% 0%;"><a href="#"><img src="pictures/'.$filename.'.png" ><p  class="usrname">'.$row['fname'].'</p></a>';
        } 
        else
        {
            echo '<li style="margin:-3% 1% 1% 0%;"><a href="#"><img src="icons/user.png"><p  class="usrname">'.$row['fname'].'</p></a>';
        }
        ?>
        <ul>
                <li><a href="edit-profile.php">My Profile</a></li>
                <li><a href="table.php">My submissions</a></li>
        </ul>

        </li>
            <li style=" margin:-3% 1% 1% 0%;"><a href="signout-script.php">Log Out</a></li>
    </ul>
</div>



<div id="compete" class="compete" style="position:relative; top:5%;">
    <div id="table-wrapper" class="table-wrapper">
    <h2> Selct a course </h2>
     <?php 
     echo '<form id="queryform" name="queryform" action="/" method="post">';

            $result1=mysql_query("SELECT * from `student-course` WHERE studentid='$row[studentid]'");
            while($row1=mysql_fetch_assoc($result1))
            {
                $sql="SELECT * from courses where courseid='$row1[courseid]'";
                $answer=mysql_query($sql);
                $row2=mysql_fetch_assoc($answer);
                echo '<input type="radio" name="courses" value="'.$row2['courseid'].'" onchange="this.form.submit()">'.$row2['coursename'];
            }
            ?>
    </form>
</div>
</div>
<div id="showprevioussubmissions">
</div>


</body>
</html>

以上是我的档案。请帮忙

编辑

您需要在$function{/code goes here/}内编写jQuery代码

将节合并为单个元素

<head>
    <meta charset="utf-8">
    <title>Competitions</title>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>




            <link rel="stylesheet" type="text/css" href="css/style.css">
            <link href='//www.google.com/fonts#UsePlace:use/Collection:Bree+Serif' rel='stylesheet' type='text/css'>
    </head>

您正在运行代码，以便在任何表单存在之前，在页面头部添加事件处理程序。因此，$queryform将是元素的空集合，不会添加任何处理程序。您应该将代码放在正文的末尾，或者将其包装在文档中，以便在创建表单元素后执行：

<head>
    <script>
    // call the function on document ready
    $(function() {
        $("#queryform").submit(function(event) {
            // code as before
        });
    })
    </script>
</head>

一旦元素在DOM中可用，就将代码段包装到document ready handler中，或者将其委托给document level或set event，而不是在关闭body标记之前复制脚本。仍然不工作。什么是不工作？？？事件是否已触发？控制台出错？等顺便说一句，我不明白var content=$data.find'showprevioussubmissions'的用途；？如果showprevioussubmissions元素是数据的一部分，那么使用$showprevioussubmissions将不起作用，因为您没有将其添加到DOM中，因为我可以看到itevent没有启动。尝试了此操作，不起作用！！您在HTML代码中使用了多个部分。多个标题节不是有效的HTML。

<head>
    <meta charset="utf-8">
    <title>Competitions</title>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>




            <link rel="stylesheet" type="text/css" href="css/style.css">
            <link href='//www.google.com/fonts#UsePlace:use/Collection:Bree+Serif' rel='stylesheet' type='text/css'>
    </head>

<head>
    <script>
    // call the function on document ready
    $(function() {
        $("#queryform").submit(function(event) {
            // code as before
        });
    })
    </script>
</head>