12

送信前にフォームの内容を確認しようとしています。基本的に、私はフォーム内の数値を操作して、それらが正しい範囲内にあることを確認しようとしています. 問題は、それを検証しようとしている私が持っているJavaScriptが、渡されたアイテムがNaNであると考えていることです(私はそれを解析しています)。

ちょっとした作業で、変数 (「サイズ」) が「HTMLInputEleMent」を参照していることが明らかになりました。これは実際には NaN であると思います (ただし、それが実際に何であるかはよくわかりません)。フィールドに「サイズ」という名前を付け、onSubmitに「サイズ」も渡しましたが、onSubmitが渡したいものを渡していないことが問題だと思います。

引用符で囲んでみましたが、文字列になってしまいます...

フォームの WITHIN から onSubmit フィールドに変数を渡すことができないのではないでしょうか? そうですか？もしそうなら、どうすればいいですか？

フォームは次のとおりです。

        <form onsubmit="return goodForm(size, day, month, year)" action="http://localhost:8080/pomper_servlet/CostCalc" method="GET">              
            The day of the month must be entered as a number (ex: 1,22)
            <input type="text" name="day"><br>
            The month of the year must be entered as a number (ex: Jan.=1, etc.)
            <input type="text" name="month"><br>
            The year must be entered as a 4 digit number (ex: 2008, 2017)
            <input type="text" name="year"><br>
            Please Choose a tour-length, in accordance with the chart below:
            <input type="TEXT" name="length"><br>
            How many people will be in your group? (No More than 10 allowed!)
            <input type="text" name="size"><br>                
            Please select a tour:<br>
            <input type="RADIO" name="tour" value="Gardiner Lake">
            Gardiner Lake<br>
            <input type="RADIO" name="tour" value="Hellroaring Plateau">
            Hellroaring Plateau<br>
            <input type="RADIO" name="tour" value="The Beaten Path">
            The Beaten Path<br>
            <input type="SUBMIT" value="Submit">
        </form>

そして、ここに functions.js からの関数があります:

function goodForm(gSize, day, month, year) {
"use strict";
window.alert("goodFrame(): "+gSize);
var groupSize1 = parseInt( gSize.replace(/^"|"$/g, ""), 10);
window.alert("goodFrame(): "+groupSize1);
var sizeInt = parseInt(groupSize1);
if(groupSize(sizeInt) && goodDate(day, month, year)){
    window.alert("true");
    return true;
}
else{
    window.alert("false")
    return false;
}

そこには他の関数への参照がありますが、これには関係ないと思います。アラートはデバッグ目的でした/現在です...

前もって感謝します！

4

4 に答える 4

7

このようなものですか？

JavaScript:

 document.getElementById("myForm").onsubmit = function() {
     alert(document.getElementById("size").value);
 }

HTML:

<form name="myForm" id="myForm">
    <input type="text" name="size" id="size">
    <input type="submit">
</form>

詳細:

onsubmit 関数は、id="myForm" として HTML で指定された "myForm" という id を持つアイテムに関連付けられます。ドキュメントでメソッド getElementById を使用して、この ID を持つアイテムを検索できます。getElementByID (ID 対 ID) を実行しないように注意してください。フォームを送信すると、このメソッドが呼び出されます。

次に、フォームを検索したのと同じ方法で、ページ上のアイテムを検索してその値を取得できます。id="size" のような ID を与えるだけで、調べることができます。

次のようなこともできます。

alert(document.myForm.size.value);

また

alert(document.forms["myForm"].size.value);

...しかし、少なくとも少し前までは一部のブラウザーがこの方法を嫌っていたので、私はその方法を避けてきました。たぶん、今の方がパフォーマンスが向上しているかもしれませんが、わかりません。

于 2013-07-10T19:53:12.433 に答える
4

まず、このように (onsubmit を介して) インライン検証を行うのは悪い形式です。通常はイベント バインディングを行います。ここでは jQuery を使用したサンプル コードを含めますが、他の方法も使用できます。

まず、フォームにページの一意の ID 属性を与えます。私は仮定している<form id="MyForm"...

次に、検証メソッドが必要なフィールドについて「認識」する必要があるでしょう。

//this function is executed when the page's dom is loaded
// assumes jQuery is loaded already
$(function(){

    //binds the myFormOnSubmit method below to run as part of your form's onsubmit method
    $('#MyForm').submit(myFormOnSubmit);

    //runs when the form is trying to submit
    function myFormOnSubmit(event) {
        var f = $(this);

        // note, you have to match on attribute selectors
        //  you may want to give each of these fields an id=".." attribute as well to select against #IdName
        var size = f.find('[name=size]').val();
        var day = f.find('[name=day]').val();
        var month = f.find('[name=month]').val();
        var year = f.find('[name=year]').val();
        var tour = f.find('[name=tour]:checked').val(); //selected radio button's

        var isValid = validDate(year,month,day) && validSize(gSize) && validTour(tour);

        if (!isValid) {
            event.preventDefault(); //stop submit
        }
    }

    function validTour(tour) {
        return !!tour; //will be false if it's an empty string, ex: no selected value
    }

    function validSize(size) {
        var s = parseInt(size); //get integer value for size

        if (s <= 0 || s > 10) return false; //not in range
        if (s.toString() !== size) return false; //doesn't match input, invalid input
        return true; //true
    }

    function validDate(year, month, day) {
        //coerce the values passed into numbers
        var y = +year, m = +month, d = +day;

        //convert to an actual date object
        var dtm = new Date(y, --m, d);

        //compare the values
        if (!dtm) return false; //invalid input
        if (dtm.getFullYear().toString() !== year.toString()) return false; //year doesn't match input
        if ((dtm.getMonth() + 1).toString() !== month.toString()) return false; //month doesn't match input
        if (dtm.getDate().toString() !== day.toString()) return false; //day doesn't match input

        var now = new Date(); console.log(now);
        var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

        //entered date is before today, invalid
        if (dtm <= today) return false;

        //passed checks
        return true;
    }
});
于 2013-07-10T20:08:42.030 に答える
2

JQuery を使用したくない場合:

パラメータを渡す必要はありません。ID を指定して、適切なフォーム関数内の ID で取得してみてください。

function goodForm() {
    var size = document.getElementById("size");
    if(null != size){
       // do something with size.value
    }

}
于 2013-07-10T20:50:45.567 に答える