Passing a form-variable into the onsubmit field?
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
First, doing inline validation like this (via onsubmit) is bad form. Usually you will want to do event binding, I'm going to include sample code using jQuery, but you can use other methods as well.
First, give your form a unique ID attribute for the page. I'm assuming <form id="MyForm"...
Next, you will likely want your validation method to "know" about the fields it needs.
//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;
}
});
In case you don't want to use JQuery:
You don't need to pass the parameters, try giving them an id and get them by their id inside the good form function.
function goodForm() {
var size = document.getElementById("size");
if(null != size){
// do something with size.value
}
}
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.