フォーム変数をonsubmitフィールドに渡しますか？

Question

フォームを送信する前に内容を確認しようとしています。基本的には、フォームの数値を使って正しい範囲内に収まるようにしています。問題は、それを渡すアイテムがNaN（私はそれを解析している）だと考えるかどうかを確認しようとしているJavaScriptです。

変数（「サイズ」）が「HTMLInputEleMent」を参照していることがわかりました。実際にはNaNです（実際はどういうわけかはわかりませんが）。私は問題は、onSubmitが "size"というフィールドに名前を付けて渡したいと思っているものを渡していないということだと思っています。

おそらくあなたは、フォーム内から、それがフィールドを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; 
} 

ありそこに他の関数への参照がありますが、彼らはに関連していませんこれは、私が思う。アラートはデバッグ目的のものです...

ありがとうございます！

Answer 1

入力（曜日、月、年、サイズ）ごとにいくつかのID（名前属性と同じ値を使用できます）を与え、document.getElementById（ "some id"）という値を取得できます。あなたのgoodForm（）関数内の値。

Answer 2

このようなものですか？

の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は"「= IDとしてHTMLで指定されたアイテムに取り付けられています。 myForm "ドキュメント上のgetElementByIdメソッドを使用して、このIDを持つアイテムをルックアップできます。 getElementByID（IDとID）をしないように注意してください。フォームを提出すると、このメソッドが呼び出され、あなたはあなたの方法になります。

次に、フォームを検索したのと同じ方法で、ページ上の項目を参照して値を取得できます。 id = "size"のようなIDを与えれば、それを見ることができます。

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

alert(document.myForm.size.value); 

または

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

を...しかし、私は、少なくとも、いくつかのブラウザはそれを嫌って、しばらく前に、以来離れてそのメソッドから宿泊しました。たぶん、今より良い、よりパフォーマンスが良い、私は分からない。

Answer 3

まず、このような（onsubmitを使用した）インライン検証は悪い形式です。通常はイベントバインディングを行いたいが、jQueryを使ってサンプルコードを含めるつもりだが、他のメソッドも使うことができる。

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

次に、検証方法が必要なフィールドについて「知る」ことをお勧めします。ケースでは、jQueryのを使用したくない

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

Answer 4

：

あなたは彼らにIDを与えて試してみて、良い形の関数内で自分のIDでそれらを取得するには、パラメータを渡す必要はありません。

function goodForm() { 
    var size= document.getElementById("size").value; 
    if(size...){ 
    ... 
    } 

}