提交表单时JavaScript无法正常工作

时间：2015-07-07 11:25:50

标签： javascript jquery html forms

我正在编写一个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>

以上是我的档案。 Plz帮助。

修改 

<!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>



</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">';

            $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>

<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>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

你需要在$（function（）{/ 代码到这里 /}）内写jQuery代码; 

    <script>
$(function(){
    $("#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>
    <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>

答案 1 :(得分：0)

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

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