javascript - “onsubmit”未运行 javascript 函数

Question

过去一个小时左右我一直在试图解决这个问题，但没有成功。我什至无法让它运行。

<form action='Summary2.php' method='post' id='summary2Form' onsubmit='return validateSummaryForm(this);'>
    <table  id='jobTable' align='center'>
        <tr>
            <div name='jobDiv'>
                <td>
                    <p><font size='4'>Select Job Name: </font></p>
                </td>
                <td>
                    <select id="jobNameSelect" name="jobNameSelect">
                        <?php
                            print '<option></option>';
                            foreach($jobNumArray as $jobNum) {
                                print '<option>'.$jobNum.'</option>';
                            }
                        ?>
                    </select>
                </td>
            </div>
        </tr>
        <tr>
            <td></td>
            <td>
                <div type="submit" id="summaryNext">
                    <input type="submit" id="summaryNext">
                </div>
            </td>
        </tr>
    </table>
</form>

function validateSummaryForm(test) {
    var e = document.getElementById(test.id);
    var strUser = e.options[e.selectedIndex].text;
    alert(strUser);
    if(strUser == ""){
        $("Table").effect("shake");
        return false;
    }
    return true;
 }

上面的 html 甚至不会运行位于外部文件中的 javascript 函数。我的导入声明如下:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="../jQuery.js"></script>
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

../jQuery.js 是 javascript 函数所在的位置。该文件还包含大量 jQuery，它们都适用于不同的网页。 javascript 函数只是位于 jQuery 的末尾。我从代码中删除了大部分 PHP 内容。如有任何帮助，我们将不胜感激。

Answer 1

当您使用effect()时方法，它是 jQueryUI 的一部分，您需要包含 jQuery.js脚本之后 jquery-ui.min.js 。试试这个:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jQuery.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

我还强烈建议您重命名 jQuery.js文件为其他名称，因为这是一个非常具有误导性的名称。

你的验证逻辑也有缺陷； e.options[e.selectedIndex]至少会导致错误。假设您试图确保 option已选择您只需查看 val()家长的select 。当您使用 jQuery 时，使用它来附加事件处理程序而不是过时的 on* 也是更好的做法。属性:

<form action='Summary2.php' method='post' id='summary2Form'>

$('#summary2Form').submit(function(e) {
    if ($('#jobNameSelect').val() == '') {
        $("table").effect("shake");
        e.preventDefault();
    }
 });

最后是 HTML。 div元素没有 type属性，并且您给它相同的 id作为input 。 id属性在文档中必须是唯一的，否则您的 HTML 将无效。

<div>
    <input type="submit" id="summaryNext">
</div>

此外，<div name='jobDiv'>不能是 tr 的直接子代，它需要超出table ，或在 td 内，以及name属性应该被删除，因为它在 div 上也是无效的。 .

为了将来引用，您可以通过按 F12 检查开发人员工具控制台来快速诊断此类错误