Przekazywanie zmiennej formularza do pola onsubmit?

Question

Próbuję zweryfikować zawartość formularza przed jego wysłaniem. Zasadniczo próbuję pracować z liczbami w formularzu i upewnić się, że są one w odpowiednim zakresie. Problem polega na tym, że JavaScript, który próbuję zweryfikować, uważa, że ​​przesyłany do niego element to NaN (parsowałem go).

Niewielka praca ujawniła, że ​​zmienna ("rozmiar") odnosi się do "HTMLInputEleMent", która, jak sądzę, jest rzeczywiście NaN (chociaż nie jestem do końca pewny, co to właściwie jest). Myślę, że problem polega na tym, że onSubmit nie przekazuje tego, co chcę, aby przechodził, mimo że nazwałem pole "size" i przekazałem również "Slipmit" rozmiar.

Próbowałem umieszczenie go w cudzysłowie, ale to po prostu zamienia ją w ciąg ...

Zastanawiam się, czy może jesteś w stanie przekazać zmienną z poziomu formularza, aby to pole onSubmit? Czy tak jest? Jeśli tak, jak mam to zrobić?

Oto forma:

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

I tu jest funkcja, z 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; 
} 

Są odniesienia do innych funkcji w tam, ale nie są one istotne dla to, myślę. Alerty były/są do celów debugowania ...

Z góry dziękuję!

Answer 1

Możesz spróbować podać każdemu z wejść (dzień, miesiąc, rok, rozmiar) jakiegoś id (możesz użyć tej samej wartości, co atrybut name) i uzyskać wartość document.getElementById ("some id"). wartość w ramach funkcji goodForm().

Answer 2

Czy coś takiego masz na myśli?

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> 

Opracowanie:

Funkcja onsubmit jest przymocowana do elementu, którego id to "myForm" określone w HTML jako id =” myForm ". Możesz wyszukać przedmiot o tym identyfikatorze za pomocą metody getElementById w dokumencie. Ostrożnie nie robić getElementByID (Id vs ID). Po przesłaniu formularza ta metoda zostanie wywołana i będziesz na dobrej drodze.

Następnie można wyszukiwać elementy na stronie, aby uzyskać ich wartość w taki sam sposób, w jaki sprawdzono formularz. Po prostu podaj im identyfikator, taki jak id = "size", i możesz to sprawdzić.

Można też zrobić coś takiego:

alert(document.myForm.size.value); 

lub

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

... ale ja się z dala od tej metody, ponieważ jakiś czas temu przynajmniej niektóre przeglądarki nienawidził . Może teraz jest lepiej i bardziej wydajnie, nie jestem pewien.

Answer 3

Po pierwsze, wykonywanie walidacji w ten sposób (za pośrednictwem onsubmit) jest nieprawidłowym formularzem.Zwykle będziesz chciał zrobić wiązanie zdarzeń, zamierzam dołączyć przykładowy kod za pomocą jQuery, ale możesz też użyć innych metod.

Najpierw nadaj swojemu formularzowi unikalny atrybut ID dla strony. Domyślam się, że prawdopodobnie metoda sprawdzania poprawności będzie "wiedzieć" o wymaganych polach.

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

W przypadku, gdy nie chcemy używać jQuery:

Nie trzeba przekazać parametry, spróbuj dając im identyfikator i uzyskać je przez ich id wewnątrz dobrej formy i funkcji .

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

}