Chuyển biểu mẫu biến vào trường onsubmit?

Question

Tôi đang cố gắng xác minh nội dung của biểu mẫu trước khi gửi. Về cơ bản, tôi đang cố gắng làm việc với các con số trong biểu mẫu và đảm bảo chúng nằm trong phạm vi chính xác. Vấn đề là JavaScript tôi đang cố gắng xác minh nó nghĩ rằng mục được chuyển đến nó là NaN (tôi đã phân tích nó).

Một công việc nhỏ tiết lộ rằng biến ("size") đề cập đến một "HTMLInputEleMent", mà tôi đoán là, thực sự, NaN (mặc dù tôi không hoàn toàn chắc chắn nó thực sự là gì). Tôi nghĩ rằng vấn đề là onSubmit không phải là đi qua những gì tôi muốn nó được đi qua, mặc dù tôi đặt tên cho lĩnh vực "kích thước" và tôi đã thông qua onSubmit "kích thước" quá.

tôi đã cố gắng đặt nó trong dấu ngoặc kép, nhưng điều đó chỉ biến nó thành một chuỗi ...

Tôi tự hỏi nếu có lẽ bạn không thể vượt qua một biến từ bên trong các hình thức để nó lĩnh vực onSubmit? Là vậy sao? Nếu vậy, tôi nên làm như thế nào?

Dưới đây là hình thức:

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

Và đây là chức năng, từ 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; 
} 

Có tham chiếu đến các chức năng khác trong đó, nhưng họ không liên quan đến điều này, tôi nghĩ vậy. Các cảnh báo là/dành cho mục đích gỡ lỗi ...

Cảm ơn bạn trước!

Answer 1

Bạn có thể thử cung cấp cho mỗi một trong các đầu vào (ngày, tháng, năm, kích thước) một số id (bạn có thể sử dụng cùng giá trị với thuộc tính tên của bạn) và nhận giá trị document.getElementById ("some id"). giá trị trong hàm goodForm() của bạn.

Answer 2

Có phải điều gì đó giống như ý bạn?

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> 

Lập:

Chức năng onsubmit được gắn vào một mục mà id là "myForm" quy định trong HTML như id =" hình thức của tôi". Bạn có thể tra cứu mục bằng ID này bằng phương thức getElementById trên tài liệu. Cẩn thận không làm getElementByID (Id vs ID). Khi bạn gửi biểu mẫu, phương thức này sẽ được gọi và bạn sẽ thực hiện theo cách của mình.

Sau đó, bạn có thể tra cứu các mục trên trang để nhận giá trị giống như cách bạn tra cứu biểu mẫu. Chỉ cần cung cấp cho họ một ID như id = "size" và bạn có thể tra cứu nó.

Bạn cũng có thể làm điều gì đó như:

alert(document.myForm.size.value); 

hoặc

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

... nhưng tôi đã ở lại đi từ phương pháp mà từ đó, một thời gian trước ít nhất, một số trình duyệt ghét nó . Có lẽ nó tốt hơn và hiệu quả hơn bây giờ, tôi không chắc chắn.

Answer 3

Trước tiên, thực hiện xác thực nội tuyến như thế này (thông qua tiện ích con) là biểu mẫu không hợp lệ.Thông thường bạn sẽ muốn làm ràng buộc sự kiện, tôi sẽ bao gồm mã mẫu bằng cách sử dụng jQuery, nhưng bạn cũng có thể sử dụng các phương thức khác.

Trước tiên, cung cấp cho biểu mẫu của bạn một thuộc tính ID duy nhất cho trang. Tôi giả sử <form id="MyForm"...

Tiếp theo, bạn có thể muốn phương thức xác thực của mình "biết" về các trường cần thiết.

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

Trong trường hợp bạn không muốn sử dụng JQuery:

Bạn không cần phải vượt qua các thông số, cố gắng đem lại cho họ một id và nhận được chúng bằng id của họ bên trong hàm hình thức tốt .

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

}