如何从窗体调用外部javascript方法

how to call an external javascript method from a form?

本文关键字：外部 javascript 方法 调用 窗体      更新时间：2023-09-26

我想提交一个表单。但在此之前我想验证它。验证是一个javascript方法。只要javascript方法与表单.在同一.jsp文件中，一切都可以

但我想把它放在一个外部javascript文件中，并且该方法永远不会被调用。为什么？

这部分应该将javascript包含到.jsp文件中。

  <script type="text/javascript" src="Validate.js">
    var val = new Validate();
    var result= val.validateArticle();
</script>

这是我想提交的表格：

<form name="articleAnswerForm" action="answerswer.html"
        action="answerswer.html" onsubmit="return result" method="post">
        Was is der Artikel?<br> <select name="art">
            <option>???</option>
            <option>der</option>
            <option>die</option>
            <option>das</option>
        </select> <input type="hidden" name="richtig" value="${selected.article}">
        <h1>${selected.german}</h1>
        <input type="submit" value="Antworten">
    </form>

Validate.js与.jsp文件位于同一目录中。这是Validate.js（但如果它在.jsp文件中，它工作得很好。）

function validateArticle() {
    var a = document.forms["articleAnswerForm"]["art"].value;
    var richtig = document.forms["articleAnswerForm"]["richtig"].value;
    if (a == null || a == "" || a != richtig) {
        alert("Nein " + a + " ist falsch");
        return false;
    }
}

到目前为止，唯一有效的方法是将所有内容放入一个.jsp文件中，如下面的

    <script type="text/javascript" >
function validateArticle() {
    var a = document.forms["articleAnswerForm"]["art"].value;
    var richtig = document.forms["articleAnswerForm"]["richtig"].value;
    if (a == null || a == "" || a != richtig) {
        alert("Nein " + a + " ist falsch");
        return false;
    }
}
</script>


    <form name="articleAnswerForm" action="answerswer.html"
        action="answerswer.html" onsubmit="return validateArticle()" method="post">
        Was is der Artikel?<br> <select name="art">
            <option>???</option>
            <option>der</option>
            <option>die</option>
            <option>das</option>
        </select> <input type="hidden" name="richtig" value="${selected.article}">
        <h1>${selected.german}</h1>
        <input type="submit" value="Antworten">
    </form>
    <form:form method="post" action="word.html">
        <input type="submit" value="nächste Wort">
    </form:form>
</c:if>

首先，不能在一个script标记中混合src-ref和本地代码。

<script type="text/javascript" src="Validate.js"></script>
<script type="text/javascript">
    var val = new Validate(); // 'new Validate' won't work.
    var result= val.validateArticle();
</script>

在HTML中，onsubmit="return result"可能不会达到预期效果。您希望在提交时进行验证，不是吗？因此，您必须调用validateArticle()函数，而不是在页面加载时调用。并且不需要设置Validate对象。

onsubmit="return validateArticle()"

这就是您所需要的。您不需要创建实例就可以使用Validation函数。

脚本：

<script type="text/javascript" src="Validate.js"></script>

HTML表单：

<form name="articleAnswerForm" action="answerswer.html"
    action="answerswer.html" onsubmit="return validateArticle()" method="post">
    Was is der Artikel?<br> <select name="art">
        <option>???</option>
        <option>der</option>
        <option>die</option>
        <option>das</option>
    </select> <input type="hidden" name="richtig" value="${selected.article}">
    <h1>${selected.german}</h1>
    <input type="submit" value="Antworten">
</form>

因此，当您将Javascript移动到外部文件时。你不需要做任何特殊的事情来访问它。不需要实例化。只需使用javascript，就像它包含在文件本身中一样。如果你发现它不起作用，很可能是文件加载不正确，在这种情况下，请检查文件是否在正确的目录中，并且文件的大小写设置正确，因为有些文件系统区分大小写。

相关文章：