当两个日期选择器字段具有值时,激活按钮 [英] Activate button when two datepickers fields have values
问题描述
我的问题来自这篇文章
我想禁用一个提交按钮,直到用日期选择器填充两个输入.使用标准文字输入时,我没有遇到任何麻烦,但它不适用于我的日期选择器.我强烈怀疑这与日期选择器ID有关.
首先是我想做的一个示例(没有日期选择器).那我想用日期选择器做什么.
使用文本输入(有效):
身体:
<form method=post>
<input type="text" id='first_name'>
<input type="text" id='second_name'>
<input type="submit" value="Submit" id="submit" disabled>
JQuery:
<script>
$(':text').keyup(function() {
if($('#first_name').val() != "" && $('#second_name').val() != "") {
$('#submit').removeAttr('disabled');
} else {
$('#submit').attr('disabled', true);
}
});</script>
使用日期选择器(不起作用):
头:
<script>
$(function() {
$( "#datepicker1" ).datepicker({ dateFormat: 'dd/mm/yy' , minDate: new Date(2016, 04 - 1, 21), maxDate : new Date(2016, 05 - 1, 04)});
$( "#datepicker2" ).datepicker({ dateFormat: 'dd/mm/yy' , minDate: new Date(2017, 04 - 1, 21), maxDate : new Date(2017, 05 - 1, 04)});
</script>
身体:
<form method=post>
<input type="text" id='datepicker1'>
<input type="text" id='datepicker2'>
<input type="submit" value="Submit" id="submit" disabled>
JQuery:
<script>
$(':text').keyup(function() {
if($('#datepicker1').val() != "" && $('#datepicker2').val() != "") {
$('#submit').removeAttr('disabled');
} else {
$('#submit').attr('disabled', true);
}
});</script>
我猜问题出在keyup
上.通常,当您从日期选择器中选择一个日期时,不会调用keyup
.
当您在日期选择器文本字段中手动插入日期时,它将起作用.尝试将change
与keyup
事件一起使用
<script>
$(':text').on('change keyup', function() {
if($('#datepicker1').val() != "" && $('#datepicker2').val() != "") {
$('#submit').removeAttr('disabled');
} else {
$('#submit').attr('disabled', true);
}
});
</script>
希望这对您有帮助...
My Question derivate from this post
I would like to disable a submit button until two input are filled in with a datepicker. I have no trouble doing it with standart text input but it's not working with my datepickers. I strongly suspect it's about the datepickers id's.
First is an example of what I want to do (without datepickers). Then what I'm trying to do with datepickers.
With text input (working) :
Body :
<form method=post>
<input type="text" id='first_name'>
<input type="text" id='second_name'>
<input type="submit" value="Submit" id="submit" disabled>
JQuery :
<script>
$(':text').keyup(function() {
if($('#first_name').val() != "" && $('#second_name').val() != "") {
$('#submit').removeAttr('disabled');
} else {
$('#submit').attr('disabled', true);
}
});</script>
With the datepickers (not working) :
Head :
<script>
$(function() {
$( "#datepicker1" ).datepicker({ dateFormat: 'dd/mm/yy' , minDate: new Date(2016, 04 - 1, 21), maxDate : new Date(2016, 05 - 1, 04)});
$( "#datepicker2" ).datepicker({ dateFormat: 'dd/mm/yy' , minDate: new Date(2017, 04 - 1, 21), maxDate : new Date(2017, 05 - 1, 04)});
</script>
Body :
<form method=post>
<input type="text" id='datepicker1'>
<input type="text" id='datepicker2'>
<input type="submit" value="Submit" id="submit" disabled>
JQuery :
<script>
$(':text').keyup(function() {
if($('#datepicker1').val() != "" && $('#datepicker2').val() != "") {
$('#submit').removeAttr('disabled');
} else {
$('#submit').attr('disabled', true);
}
});</script>
I guess problem is with keyup
.Normally when you select a date from datepicker keyup
is not called.
It will work when you manually insert a date in datepicker text field. Try using change
with keyup
event as
<script>
$(':text').on('change keyup', function() {
if($('#datepicker1').val() != "" && $('#datepicker2').val() != "") {
$('#submit').removeAttr('disabled');
} else {
$('#submit').attr('disabled', true);
}
});
</script>
Hope this helps...
这篇关于当两个日期选择器字段具有值时,激活按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!