[英]Java Script Drop Down Menu Validation
Ok I have a drop down menu that is dynamically generated by PHP and populated with data fetched from database. 好的,我有一个下拉菜单,该菜单由PHP动态生成,并填充有从数据库中获取的数据。 Frontally this works vert well, The problem that I am having is with a JS validation, am not so good with JavaScript ('Dislike it'), but for the purposes of my mini project I have to work with it anyway....
从正面来看,它的工作效果很好,我遇到的问题是JS验证,而不是JavaScript(“不喜欢它”),但是对于我的迷你项目,我还是必须使用它。
The problem is that with JS I am checking if a user has selected one of the options available in drop down menu is so the form can be submitted else display a warning. 问题是使用JS,我正在检查用户是否选择了下拉菜单中的可用选项之一,以便可以提交表单,否则显示警告。
So what I am trying to do is this.....Give a value="f" to the first option which displays "PLEASE SELECT workshop" so if at the submission of the form the value of this drop down menu == f return false else submit the form. 所以我想做的是.....给第一个显示“ PLEASE SELECT workshop”的选项赋值=“ f”,所以如果在提交表单时此下拉菜单的值== f返回false,否则提交表单。
now if at the submission the value ==f the error is displayed but if the value is not == f and i select one of the values from drop down menu i cannot proceed with the submission its does not allow me 现在,如果在提交时值== f,则会显示错误,但如果值不是== f,并且我从下拉菜单中选择值之一,则我无法继续提交,它不允许我
PHP code: PHP代码:
function getForex($link){
$timestamp = date("Y-m-d");
$sql = "SELECT id, course, status, endingDate, schedule FROM courses WHERE course LIKE '%Forex%' OR course LIKE '%forex%' AND status=5";
$query = mysqli_query($link, $sql);
$option='<select id="Forex" name="workshop">';
$option.='<option id="fx" value="Forex">Select Forex Workshop</option>';
$option.='';
while($result = mysqli_fetch_assoc($query))
{
if($timestamp < $result['endingDate'])
{
$option.='<option id="'.$result['id'].'" value='.$result['endingDate'].'>'.$result['course']." ".$result['schedule'].'</option>';
}
}
$option.='</select>';
return $option;
}
JS CODE: JS代码:
var sel=document.getElementById('fx').value="Forex";
if(sel.match("Forex")){
document.getElementById('error').innerHTML = "Choose Forex Workshop Date";
document.getElementById('fx').style.borderColor = "red";
return false;
}else{
document.getElementById('fx').style.borderColor = "green";
}
OK guys combination of many very helpful answers have helped but when I add another drop down menu like 好的,很多非常有用的答案的组合对您有所帮助,但是当我添加另一个下拉菜单时
PHP code: PHP代码:
function getBinary($link){
$timestamp = date("Y-m-d");
$sql2 = "SELECT id, course, status, endingDate, schedule FROM courses WHERE course LIKE '%Binary%' OR course LIKE '%binary%' AND status=5";
$query2 = mysqli_query($link, $sql2);
$option2='<select id="Binary" name="workshop">';
$option2.='<option id="bi" value="Binary">Select Binary Workshop</option>';
$option2.='';
while($result2 = mysqli_fetch_assoc($query2))
{
if($timestamp < $result2['endingDate'])
{
$option2.='<option id="'.$result2['id'].'" value="'.$result2['endingDate'].'">'.$result2['course']." ".$result2['schedule'].'</option>';
}
}
$option2.='</select>';
return $option2;
}
JS Code: JS代码:
var selbi=document.getElementById('Binary').value;
if(selbi.match("Binary")){
document.getElementById('error').innerHTML = "Choose Binary Workshop Date";
return false;
}
The problem becomes that The Inner HTML message displays only for forex and get twisted around ie if forex is not selected it shows the message choose forex workshop if i choose the forex workshop it then shows choose binary workshop :D 问题是,内部HTML消息仅显示外汇,并且出现扭曲,即,如果未选择外汇,则显示消息选择外汇工作坊;如果我选择外汇工作坊,则显示选择二进制工作坊:D
You are not using select id use select id 您没有使用选择ID使用选择ID
var sel=document.getElementById('Forex').value;
if(sel.match("Forex")){
document.getElementById('error').innerHTML = "Choose Forex Workshop Date";
document.getElementById('fx').style.borderColor = "red";
return false;
}else{
document.getElementById('fx').style.borderColor = "green";
}
我已经完成了javaScript下拉验证。当下拉值中的值是“ select one”时,会给您消息“请选择您的值”。我在github中的Hole项目。项目链接是Javascript下拉值验证
您必须使用下拉ID'Forex'来获得选定的下拉而非选项ID的值,如下所示
var sel = document.getElementById('Forex').value;
Html Code HTML代码
<form id="send" name="myfrom" action="confrimationPage.php" method="POST" onsubmit="return validateForm(this);" >
<p>
<label for="company">Gender</label>
<select id="gender" name="gender">
<option value="Select One">Select One</option>
<option>Male</option>
<option>Female</option>
</select>
</p>
<p>
<label for="country">Postal Code</label>
<input id="Country" type="text" name="postalCode" />
</p>
<p>
<button id="submit" type="submit">Submit</button>
</p>
</form>
* JavaScript * * JavaScript *
<script type="text/javascript">
function validateForm(form)
{
// Gender empty or not
var selectGender=document.getElementById('gender').value;
if(selectGender=="Select One")
{
alert("Please Select gender");
return false;
}
//Postal code empty or not
if(form.postalCode.value=="")
{
alert("Filled the Postal Code Field");
form.postalCode.focus();
return false;
}
}
</script>
Check It
var sel=document.getElementById('Forex').value;
var binary=document.getElementById('Binary').value;
if(sel.match("Forex")){
document.getElementById('error').innerHTML = "Choose Forex Workshop Date";
document.getElementById('Forex').style.borderColor = "red";
return false;
}else{
document.getElementById('error').innerHTML = "";
document.getElementById('Forex').style.borderColor = "green";
}
if(binary.match("Binary")){
document.getElementById('error').innerHTML = "Choose Forex Workshop Date";
document.getElementById('Binary').style.borderColor = "red";
return false;
}else{
document.getElementById('error').innerHTML = "";
document.getElementById('Binary').style.borderColor = "green";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.