将表单变量传递到onsubmit字段
Passing a form-variable into the onsubmit field?
我试图在发送表单之前验证表单的内容。基本上,我试图处理表单中的数字,并确保它们在正确的范围内。问题是,我试图验证它的JavaScript认为传递给它的项是NaN(我一直在解析它)。
一项小工作表明,变量("size")指的是"HTMLInputEleMent",我猜它确实是NaN(尽管我不太确定它到底是什么)。我认为问题是onSubmit没有传递我希望它传递的内容,尽管我将字段命名为"size",我也传递了onSubmit"size"。
我试着把它放在引号里,但这只是把它变成了一个字符串。。。
我想知道您是否无法将变量从表单内部传递到它的onSubmit字段?是这样吗?如果是,我该怎么做?
这是表格:
<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>
这是函数,来自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;
}
其中引用了其他函数,但我认为它们与此无关。警报过去/现在用于调试目的。。。
提前感谢!
这样的事情是你的意思吗?
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>
细化:
onsubmit函数附加到一个id为"myForm"的项,该项在HTML中指定为id="myForms"。您可以在文档中使用getElementById方法查找具有此ID的项。小心不要执行getElementByID(Id与Id)。当你提交表单时,这个方法会被调用,你就可以上路了。
然后,你可以像查找表单一样在页面上查找项目以获取它们的值。只需给它们一个ID,比如ID="size",你就可以查找它。
你也可以做一些类似的事情:
alert(document.myForm.size.value);
或
alert(document.forms["myForm"].size.value);
但我一直远离这种方法,至少在一段时间前,一些浏览器讨厌它。也许现在它更好、更高性能了,我不确定。
您可以尝试将每个输入(天、月、年、大小)赋予id(您可以使用与name属性相同的值)。在goodForm()
函数中通过id获取值。
<input type="text" name="day" id="day">
<--设置
document.getElementById("some id").value
<--获取
首先,像这样(通过onsubmit)进行内联验证是不好的形式。通常你会想进行事件绑定,我将使用jQuery包含示例代码,但你也可以使用其他方法。
首先,为表单提供页面的唯一ID属性。我假设<form id="MyForm"...
接下来,您可能希望您的验证方法"了解"它所需的字段。
//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;
}
});
如果您不想使用JQuery:
你不需要传递参数,试着给它们一个id,然后在好的表单函数中通过它们的id来获取它们。
function goodForm() {
var size = document.getElementById("size");
if(null != size){
// do something with size.value
}
}
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 而循环只设置php中输入字段中的第一个值
- 在输入字段中将最小金额设置为
- 从Rally获取一个特定的标记,以便计算另一个字段中的值
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- JavaScript 检查隐藏字段中的值并将其设置为隐藏字段值
- 在wordpress一定时间后更改自定义字段
- 如何在HTML输入字段中添加不可删除的后缀
- Meteor-添加用户自定义字段的方法不起作用
- 互斥单选按钮和相应的输入字段
- 在IE9中的输入字段中输入焦点最近按钮
- 选中单选框时将属性添加到输入字段
- 带有验证和隐藏字段值的提交按钮
- 主干窗体隐藏字段未呈现
- 带有let的JS/EECMAScript6私有字段的模式
- OnSubmit字段中的Html Form If语句
- CakePHP省略了发送输入字段并更改onSubmit的输入值
- 将表单变量传递到onsubmit字段
- 重置表单,重置字段值,重置焦点所有的onSubmit()
- Javascript onsubmit更改字段值