表单进度条
Form Progress Bar
本文关键字:表单 更新时间:2023-09-26
我希望设置一个带有进度条的表单,同时用户填写输入字段。我已经设置了我从教程和在线中知道的所有内容,但它不起作用。
如果有人能弄清楚为什么它不起作用,请查看。
它保存在这里 -> http://jsfiddle.net/VbP4w/
这是示例 JS 代码
$("#form input").keyup(function() {
var numValid = 0;
$("#form input[required]").each(function() {
if (this.validity.valid) {
numValid++;
}
});
var progress = $("#progress"),
progressMessage = $("#message");
if (numValid == 0) {
progress.attr("value", "0");
progressMessage.text("Please Enter Student ID.");
}
if (numValid == 1) {
progress.attr("value", "10");
progressMessage.text("Please Enter the First Name.");
}
if (numValid == 2) {
progress.attr("value", "20");
progressMessage.text("Please Enter the Last Name.");
}
if (numValid == 3) {
progress.attr("value", "30");
progressMessage.text("Please Enter Your E-mail");
}
if (numValid == 4) {
progress.attr("value", "40");
progressMessage.text("Please Enter a Password.");
}
if (numValid == 5) {
progress.attr("value", "50");
progressMessage.text("Please Re-Enter a Password.");
}
if (numValid == 6) {
progress.attr("value", "60");
progressMessage.text("Please Enter A Street Address.");
}
if (numValid == 7) {
progress.attr("value", "70");
progressMessage.text("Please Enter a City.");
}
if (numValid == 8) {
progress.attr("value", "80");
progressMessage.text("Please Enter a ZipCode.");
}
if (numValid == 9) {
progress.attr("value", "100");
progressMessage.text("Please Pick a State and Submit the Form.");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){ // do not forget to add this too
$("#form input").keyup(function() {
var numValid = 0;
$("#form input[required]").each(function() {
if (this.validity.valid) {
numValid++;
}
});
.
.
.
.
.
.
});
}); // and the closing braces
</script>
PS:请注意两个不同的<script>
标签。它们需要分开。另外,不要忘记将keyup
函数包装在$(function(){});
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 如何使用WCF服务和javascript表单post上传.doc文件
- Javascript生成的表单未提交
- 如何使用javascript或html下载PDF格式的填写表单
- HTML表单提交时未执行外部函数
- 如何将输入(type=text)从html表单传递到javascript函数
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- Ajax发布表单序列化,发布引号'
- 多级HTML表单
- 后焦点更改为IE 11中的地址栏,而不是转移到表单中的下一个控件
- 在验证和发送邮件后更改联系人表单的 html
- jQuery表单添加不适用于下拉列表
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- 如何从pdftron webviewer获取表单数据
- JS验证ajax返回的html中的表单数据
- Javascript更新孙窗口中的表单元素
- 解析javascript表单验证器
- 阻止表单元素提交
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- Jquery提交表单而不刷新