最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

how to call an external javascript method from a form? - Stack Overflow

programmeradmin5浏览0评论

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.

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

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>

here is the form I want to submit:

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

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;
    }
}

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>

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.

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

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>

here is the form I want to submit:

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

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;
    }
}

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>

Share Improve this question edited Sep 3, 2012 at 9:44 Sanyifejű asked Sep 3, 2012 at 9:22 SanyifejűSanyifejű 2,74010 gold badges50 silver badges76 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

First, you cannot mix a src-ref and local code in one script tag.

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

In HTML, onsubmit="return result" will probably not do what your are intended to. You want to validate on submit, won't you? So you have to call the validateArticle() function then, not on page load. And there is no need to instanciate a Validate object.

onsubmit="return validateArticle()"

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

Script:

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

HTML Form:

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

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.

发布评论

评论列表(0)

  1. 暂无评论