Passing a form-variable into the onsubmit field?

Question

I am trying to verify the contents of a form before sending it. Basically, I'm trying to work with the numbers in the form and ensure they are within the correct range. The problem is that the JavaScript I have which is trying to verify it thinks that the item being passed to it is NaN (I have been parsing it).

A little work revealed that the variable ("size") is referring to an "HTMLInputEleMent", which I guess is, indeed, NaN (although I am not quite sure what it actually is). I think that the problem is that the onSubmit is not passing what I want it to be passing, even though I named the field "size" and I passed onSubmit "size" too.

I tried putting it in quotation marks, but that just turns it into a string...

I am wondering if perhaps you are unable to pass a variable from WITHIN the form to it's onSubmit field? Is that so? If so, how should I do this?

Here is the form:

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

And here is the function, from 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;
}

There are references to other functions in there, but they aren't relevant to this, I think. The alerts were/are for debugging purposes...

Thanks in advance!

Answer 1

Is something like this what you mean?

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>

Elaboration:

The onsubmit function is attached to an item whose id is "myForm" specified in the HTML as id="myForm". You can lookup the item with this ID using the method getElementById on the document. Careful not to do getElementByID (Id vs ID). When you submit the form, this method will get called and you'll be on your way.

Then you can lookup items on the page to get their value the same way you looked up the form. Just give them an ID like id="size" and you can look it up.

You can also do something like:

alert(document.myForm.size.value);

or

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

...but I've stayed away from that method since, a while ago at least, some browsers hated it. Maybe it's better and more performant now, I'm not sure.

Answer 2

You can try giving each one of the Inputs (day, month, year, size) to id (you can use the same value as your name attribute). Get the value by id within your goodForm() function.

<input type="text" name="day" id="day"> <-- set

document.getElementById("some id").value <-- get