如何在未从下拉列表中选择任何值后显示错误消息？
我正面临一个问题。我想在未从下拉框中选择任何值后显示警告消息： -
在这里你可以看到这里的图像开放时间将会显示当用户没有从下拉列表中选择任何值时，OK用户将继续。如果用户从星期一首次下拉菜单中选择值，但未从第二个下拉菜单中选择任何值，请点击保存并继续我想要显示提醒消息请以正确的方式选择营业时间。这对周二和其他日子来说是一样的。谁能帮我。
这是我的HTML代码： -
enter code here
<?php
$from =array("6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23");
$days = array("Monday", "Tuesday", "Wednesday", "Thursday","Friday","Saturday","Sunday");
$to =array("7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22"); ?>
<div class="col-md-12 col-sm-12 col-xs-12 fitness-time">
<div class="row">
<div class="additional">
<div class="form-group">
<span class="fitness-hours">
<h4>Opening Hours</h4>
</span>
<div>
<div class="info_user_detail">
<table class="table_info1 table-striped">
@foreach($days as $key=> $alldays)
<tr>
<td>
<div class="checkbox no-margin">
<label>
<input name="days[]" value="{{ $alldays }}"type="checkbox">{{ $alldays }}
</label>
</div>
</td>
<td>
<div class="time-class">
<select name="from[]"class="select-class from">
<option value="">Select</option>
@foreach($from as $froms)
<option>{{ $froms }}</option>
@endforeach
</select>
</div>
</td>
<td>
<div class="time-class">
<select name="to[]"class="select-class to">
<option value="">Select</option>
@foreach($to as $to)
<option>{{ $froms }}</option>
@endforeach
</select>
</div>
</td>
</tr>
@endforeach
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-save">
<button id="CheckImageCount" type="submit" class="btn btn-info">Save And Coutinue </button>
</div>
Jquery代码： -
//enter code here
$('#CheckImageCount').on('click',function(){
var value;
$(".from").on('change',function(){
value= $(this).val();
});
if(value != ""){
var hoursvalue = $('.from').parents('td:first').next().find('.to').val();
if(hoursvalue == ""){
alert("PLease select opening hours in right way!"); return false;
}else{
alert("success"); return false;
}
}else{
return true;
}
});
任何人都可以编写JavaScript或jquery代码来实现此功能。在此先感谢：）
3 个答案:
答案 0 :(得分：1)
$(document).ready(function(){//page is ready
alert("loading");
var elems=[];
$('#form').on('submit',function(){// if form is submitted (please add the id form to your form)
var value=elems.length;// if theres an unfinished answer elem, ret false
if(value!=0){
alert(value+" unfinished days ...");
return false;
}
return true;
});
$(".from").on('change',function(){
var val=0;
var elem=$(this).parent().parent().parent(); //the day
elem.find("input", function(){
if($(this).val()){
val++;//found a value
}
});
alert("elem has:"+val) ;
if(val==1){//this day is unfinished, add to array
if(elems.indexOf(elem)<0){//not added yet
elems.push(elem);//add to unfinished answer elems
}
}else{
//answer complete remove from waiting
var index=elems.indexOf(elem);
if(index>=0){
elems.splice(index,1);//remove from answer elems
}
}
});
});
答案 1 :(得分：1)
我正在使用jQuery遍历方法来解决您的问题，请检查一下。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$( document ).ready(function() {
$('#CheckImageCount').on('click',function(){
// traverse tr element
var error='false';
$('.table_info1 tbody tr').each(function(){
var from = $(this).find('td .from').val(); //find from class
var to = $(this).find('td .to').val(); //find to class
// Check if "to" is empty and "from" is selected
if(from!="" && to==""){
error='true';
return 0;
}
// Check if "from" is empty and "to" is selected
if(to!="" && from==""){
error='true';
return 0;
}
});
if(error=='true'){
console.log("PLease select opening hours in right way!");
}else{
console.log('Suceess');
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="additional">
<div class="form-group">
<span class="fitness-hours">
<h4>Opening Hours</h4>
</span>
<div>
<div class="info_user_detail">
<table class="table_info1 table-striped">
<tbody>
<tr>
<td>
<div class="checkbox no-margin">
<label>
<input name="days[]" value="Monday" type="checkbox">Monday </label>
</div>
</td>
<td>
<div class="time-class">
<select name="from[]" class="select-class from">
<option value="">Select</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
</td>
<td>
<div class="time-class">
<select name="to[]" class="select-class to">
<option value="">Select</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox no-margin">
<label>
<input name="days[]" value="Tuesday" type="checkbox">Tuesday </label>
</div>
</td>
<td>
<div class="time-class">
<select name="from[]" class="select-class from">
<option value="">Select</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
</select>
</div>
</td>
<td>
<div class="time-class">
<select name="to[]" class="select-class to">
<option value="">Select</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox no-margin">
<label>
<input name="days[]" value="Wednesday" type="checkbox">Wednesday </label>
</div>
</td>
<td>
<div class="time-class">
<select name="from[]" class="select-class from">
<option value="">Select</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
</select>
</div>
</td>
<td>
<div class="time-class">
<select name="to[]" class="select-class to">
<option value="">Select</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox no-margin">
<label>
<input name="days[]" value="Thursday" type="checkbox">Thursday </label>
</div>
</td>
<td>
<div class="time-class">
<select name="from[]" class="select-class from">
<option value="">Select</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>
</div>
</td>
<td>
<div class="time-class">
<select name="to[]" class="select-class to">
<option value="">Select</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox no-margin">
<label>
<input name="days[]" value="Friday" type="checkbox">Friday </label>
</div>
</td>
<td>
<div class="time-class">
<select name="from[]" class="select-class from">
<option value="">Select</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
</select>
</div>
</td>
<td>
<div class="time-class">
<select name="to[]" class="select-class to">
<option value="">Select</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox no-margin">
<label>
<input name="days[]" value="Saturday" type="checkbox">Saturday </label>
</div>
</td>
<td>
<div class="time-class">
<select name="from[]" class="select-class from">
<option value="">Select</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
</select>
</div>
</td>
<td>
<div class="time-class">
<select name="to[]" class="select-class to">
<option value="">Select</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox no-margin">
<label>
<input name="days[]" value="Sunday" type="checkbox">Sunday </label>
</div>
</td>
<td>
<div class="time-class">
<select name="from[]" class="select-class from">
<option value="">Select</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
</select>
</div>
</td>
<td>
<div class="time-class">
<select name="to[]" class="select-class to">
<option value="">Select</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
</select>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="btn-save">
<button id="CheckImageCount" type="submit" class="btn btn-info">Save And Coutinue </button>
</div>
答案 2 :(得分：-1)
添加＆＃34;必需＆＃34;在select标签＆＃34;选择名称=＆＃34;来自[]＆＃34; class =＆＃34; select-class from＆＃34;所需＆＃34 ;.它会对你有所帮助。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？