我有以下HTML表单:
<form id="ChartsForm">
<div id="dateoptions">
<p>Until date: <input type="date" name="until_date" value="Until date"></p>
<p>Since date: <input type="date" name="since_date" value="Since date"></p>
</div>
<div class="insightsoptions">
<input id="newLikes" class="insightsbuttons" type="submit" name="submit" value="Daily new likes">
<input id="unlikes" class="insightsbuttons" type="submit" name="submit" value="Daily unlikes">
</div>
</form>
以及以下JQuery脚本:
$(function () {
$("#newLikes").one('click', function () {
$.ajax({type:'GET', url: 'newLikes.php', data:$('#ChartsForm').serialize(), success:
function(response) {
alert(response);
$("#dailyNewLikes").html(response);
}});
return false;
});
$("#newLikes").on('click', function(){
$(this).toggleClass('green');
$('#dailyNewLikes').toggle();
});
如何在第一个位置检查输入“until_date”和“since_date”是否为空,如果它们为空以在执行ajax调用之前停止脚本,则提醒用户有关错误然后继续如果输入不再是空的。我必须使用.one()
。我尝试使用。blur()
函数但没有效果......
答案 0 :(得分:4)
您可以在成功时删除处理程序,而不是使用one()
。如果您之后只需要删除一个函数,则可以使用namespaced events(或命名函数而不是匿名函数)。你可以这样做:
$("#newLikes").on('click', function () {
var until = $('#dateoptions input[name="until_date"]').val();
var since = $('#dateoptions input[name="since_date"]').val();
if (until == "" || since == "") {
alert('Error; until date or since date is missing.');
return;
}
$.ajax({
type:'GET',
url: 'newLikes.php',
data: $('#ChartsForm').serialize(),
success: function(response) {
$("#dailyNewLikes").html(response);
$("#newLikes").off('click');
}
});
});
答案 1 :(得分:1)
<script type="text/javascript">
if (document.forms["form_name"]["date_field_name"].value == "" || document.forms["form_name"]["date_field_name"].value == "1970-01-01")
{
alert('you missed to give date.');
return false;
}
</script>
在这种情况下,您需要为表单命名
答案 2 :(得分:0)
终于搞定了
$(function() {
$( "input[name^=datepicker]" ).datepicker({
onSelect: function(dateText, inst) {
if ($("input[name='datepicker_end']").val()!=""){
if($("input[name='datepicker']").val()>$("input[name='datepicker_end']").val()){
alert("invalid date");
}
}
}
});
})
&#13;
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" name="datepicker"></p>
<p>Date: <input type="text" id="datepicker_end" name="datepicker_end"></p>
</body>
</html>
&#13;