如何从表单调用外部JavaScript方法？ [英] how to call an external javascript method from a form?

问题描述

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

I want to submit a form. But before that I wanna validate it. The validation is a javascript method. everything is ok as long as the javascript method is in the same .jsp file as the form.

但我想将它放到外部javascript文件中，方法永远不会被召唤。为什么？

But I want to put it to an external javascript file, and the method gets never called. Why?

此部分应包含javascript到.jsp文件。

this part should include the javascript into .jsp file.

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

这是我要提交的表格：

<form name="articleAnswerForm" action="answer.html"
        action="answer.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文件中，它可以正常工作。）

The Validate.js is in the same directory as the .jsp file. here is the Validate.js (but it works fine, if it is in the .jsp file.)

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文件中，如下所示

so far the only thing that works is if I put everything into one .jsp file like below

    <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="answer.html"
        action="answer.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>

推荐答案

这就是你所需要的。您无需创建实例即可使用验证功能。

This is all you need. You don't need to create an instance to use the Validation function.

脚本：

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

HTML表格：

<form name="articleAnswerForm" action="answer.html"
    action="answer.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即可。如果您发现它不起作用，则可能是文件未正确加载，在这种情况下检查文件是否在正确的目录中并且文件大小写正确，因为某些文件系统区分大小写。

So when you are moving Javascript to an external file. You don't need to do anything special to access it. There is no instantiation required. Just use the javascript as you would if it was included in the file itself. If you find it doesn't work, it's likely the file isn't loading properly, in which case check the file is in the right directory and the case of file is correctly set, as some file system are case sensitive.

这篇关于如何从表单调用外部JavaScript方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！