HTML 输入范围 -- 禁用提交,直到某些内容发生更改
HTML INPUT RANGE -- Disable submit until something changes
我有一个表单,它有三个输入范围,如下所示:
<div class="form-style-5">
<legend><span class="number">4</span> Search by Scholarship Requirements
</legend>
<form action="search3.php" method="post" oninput="amount1.value=rangeInput1.value; amount2.value=rangeInput2.value; amount3.value=rangeInput3.value;" target="_parent">
<fieldset>
Minimum SAT:
<output for="rangeInput" name="amount1">0</output>
<input id="rangeInput1" max="2400" min="0" name="satscore" required="" type="range" value="0">
<br>
<br>
<input name="crm" type="checkbox" value="CR+M">CR+M
<input name="crm" type="checkbox" value="CR+M+W">CR+M+W
<br>
<br>Minimum ACT:
<output for="rangeInput" name="amount2">0</output>
<input id="rangeInput2" max="36" min="0" name="actscore" required="" type="range" value="0">
<br>
<br>Minimum GPA:
<output for="rangeInput" name="amount3">0</output>
<input id="rangeInput3" max="4" min="0" name="gpascore" required="" type="range" value="0">
<br>
</fieldset>
<br>
<input type="submit" value="SEARCH">
</form>
</div>
我将值默认为"0",但问题是在某些情况下,用户会选择三种输入类型中的任何一种,但我需要他们在提交之前至少选择一种。
我已经绞尽脑汁了几个小时,不知道该怎么做——有人可以帮忙吗?
我的第一个建议是为每个输入提供唯一的名称或类,以便在代码中识别它们(这样您就可以单独检查它们,而不是一次全部检查)。然后,创建一个 jQuery 代码段来处理您的验证;
$("input[type='submit']").click(function(e){
// Stop the form submitting
e.preventDefault()
if($("input[name='enterFieldNameHere']").val() != '0' || $("input[name='enterFieldNameHere2']").val() != '0' || $("input[name='enterFieldNameHere3']").val() != '0'){
// At least one value isn't 0, submit the form
return true;
}else{
// Tell the user the input is invalid
alert('Please select an option');
}
})
此代码未经测试,仅用于演示该想法。
像这样的东西?
<html>
<head>
<title>Javascript test</title>
<script src="jquery-1.11.3.min.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
var changes = false;
$(document).ready(function() {
// Prevent form submission
$("form").submit(function(event) {
if (!changes) {
event.preventDefault();
}
});
$("input").on('change', function(event) {
changes = true;
});
});
</script>
<div class="form-style-5">
<legend>
<span class="number">4</span> Search by Scholarship Requirements
</legend>
<form action="search3.php" method="post" oninput="amount1.value=rangeInput1.value; amount2.value=rangeInput2.value; amount3.value=rangeInput3.value;" target="_parent">
<fieldset>
Minimum SAT:
<output for="rangeInput" name="amount1">0</output>
<input id="rangeInput1" max="2400" min="0" name="satscore" required="" type="range" value="0">
<br>
<br>
<input name="crm" type="checkbox" value="CR+M"> CR+M
<input name="crm" type="checkbox" value="CR+M+W"> CR+M+W
<br>
<br> Minimum ACT:
<output for="rangeInput" name="amount2">0</output>
<input id="rangeInput2" max="36" min="0" name="actscore" required="" type="range" value="0">
<br>
<br> Minimum GPA:
<output for="rangeInput" name="amount3">0</output>
<input id="rangeInput3" max="4" min="0" name="gpascore" required="" type="range" value="0">
<br>
</fieldset>
<br>
<input type="submit" value="SEARCH">
</form>
</div>
</body>
</html>
请记住,这只是客户端。如果它关心,请在服务器端做功课。我的意思是,任何低技能的人都可以轻松绕过残疾。
添加禁用属性以提交按钮
<input type="submit" value="SEARCH" disabled>
JQUERY:
$("#rangeInput1,#rangeInput2,#rangeInput3").on("change", function(){
$("input[type='submit']).prop("disabled", "false");
}
相关文章:
- 如果不兼容,则隐藏范围输入
- 如何在Jasmine/Rect中测试带有范围输入的“onChange”事件
- 显示范围输入的值"无法读取属性'值'“为空”;
- HTML5范围输入重新加载
- 范围输入值检查(AngularJS)
- 更改日期范围输入组件的格式
- HTML5:如何创建一个“;范围输入类型“;具有动态值
- 如何通过javascript获取html范围输入类型的最大值
- HTML 范围输入在尝试移动时无响应
- 从范围输入(滑块)中获取值
- 在范围输入的拇指内放置一个值
- HTML5 范围输入值在引导弹出窗口中没有变化
- 重复离子范围输入的去冲突ng模型
- 如何正确设置范围输入元素的动画
- JQuery 范围输入侦听器
- 在 JS 中重置 HTML 范围输入不会移动显示的滑块
- 启用/禁用范围输入
- 在值更改时在范围输入的处理程序上显示所选值
- 如何使用类型范围输入的值来设置jQuery UI Slider的值
- 范围输入值出现意外结果