Passing form variable to onsubmit?

Question

I am trying to verify the contents of a form before submitting it. Basically, I am trying to work with numbers in the form and ensure that they are in the correct range. The problem is that the JavaScript I'm trying to test thinks that the element passed to it is NaN (I parsed it).

A little work showed that the variable ("size") refers to the "HTMLInputEleMent", which I think is really NaN (although I'm not quite sure what it really is). I think the problem is that onSubmit does not convey what I want it to pass, even if I called the field "size" and I also passed "Size".

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

I am wondering, maybe you can’t pass the variable from WITHIN of the form to the onSubmit field? This is true? If so, how do 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 links to other functions there, but they are not related to this, I think. Warnings were / are for debugging purposes ...

Thanks in advance!

Answer 1

You can try to specify each of the inputs (day, month, year, size) of some id (you can use the same value as your name attribute) and get the value document.getElementById ("some id"). value within your goodForm () function.

Answer 2

Firstly, doing a built-in check like this one (via onsubmit) is bad. Usually you need to bind events, I'm going to include sample code using jQuery, but you can also use other methods.

First, give your form a unique attribute identifier for the page. I assume <form id="MyForm"...

Next, you will most likely want your verification method to “know” about the fields it needs.

 //this function is executed when the page dom is loaded // assumes jQuery is loaded already $(function(){ //binds the myFormOnSubmit method below to run as part of your form 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 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 &lt= today) return false; //passed checks return true; } }); 

Answer 3

Something like this, what do 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> 

Development:

The onsubmit function is bound to an element with the identifier "myForm" specified in HTML as id = "myForm". You can find an element with this identifier using the getElementById method in the document. Be careful not to get getElementByID (Id vs ID). When you submit the form, this method will be called and you will be on the way.

You can then search for elements on the page to get their meaning just as you were looking for a form. Just give them an ID, for example id = "size", and you can see it.

You can also do something like:

 alert(document.myForm.size.value); 

or

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

... but I stayed away from this method, although at least some time ago some browsers hated it. Maybe now it's better and better, I'm not sure.

Answer 4

If you do not want to use jQuery:

You do not need to pass parameters, try to give them an identifier and get them by their identifier inside a function of good shape.

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