提交表单时JavaScript不起作用[重复]答案

【问题标题】：JavaScript not working while submitting form [duplicate]提交表单时JavaScript不起作用[重复]
【发布时间】：2015-07-07 11:25:49
【问题描述】：

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

以上是我的文件。请帮忙。

编辑

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

【问题讨论】：

将您的 sn-p 包装在文档就绪处理程序中，或将其委托给文档级别或设置事件，一旦元素在 DOM 中可用，而不是之前
在 body 标记关闭之前复制了脚本。还是不行。
什么意思不工作？？？事件是否被触发？控制台出错？等等...顺便说一句，我不明白var content = $(data).find('#showprevioussubmissions'); 的目的？如果 #showprevioussubmissions 元素是数据的一部分，那么使用 $("#showprevioussubmissions") 将不起作用，因为您没有将其添加到 DOM 中，因为我可以看到它
事件未触发。

标签： javascript jquery html forms

【解决方案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>

【讨论】：

试过了，不行！！
您在 HTML 代码中使用了多个部分。多个 head 部分不是有效的 HTML。

【解决方案2】：

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

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

【讨论】：