使用下拉标签验证其他下拉值

时间:2017-08-21 19:18:22

标签: javascript php validation dropdown

我有两个下拉菜单:

<select name="first_value" id="first_value">
    <option value="<?php print"$sum_jan" ?>">January</option>
    <option value="<?php print"$sum_feb" ?>">February</option>
    <option value="<?php print"$sum_mar" ?>">March</option>
    <option value="<?php print"$sum_apr" ?>">April</option>
    <option value="<?php print"$sum_may" ?>">May</option>
    <option value="<?php print"$sum_june" ?>">June</option>
    <option value="<?php print"$sum_july" ?>">July</option>
    <option value="<?php print"$sum_aug" ?>">August</option>
    <option value="<?php print"$sum_sept" ?>">September</option>
    <option value="<?php print"$sum_oct" ?>">October</option>
    <option value="<?php print"$sum_nov" ?>">November</option>
    <option value="<?php print"$sum_dec" ?>">December</option>
</select>

<select name="month" id="month">
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
</select>

这些下拉列表的JavaScript:

function validateForm() {
  var a = document.forms["myForm"]["first_value"].value;
  var b = document.forms["myForm"]["month"].value;
  var c = document.forms["myForm"]["sec_value"].value;

  if (a != b) {
    alert("Month isn't Same");
    $("#month").focus();
    return false;
  } else {
    if (c == "") {
      alert("Recently sold item empty");
      $("#sec_value").focus();
      return false;
    }
  }
}

我一直在尝试为first_value添加标签(即label="January"等), 或两者兼而有之,并将.value更改为.label,或在验证脚本中使用.option,但仍然无法正常工作。即使first_value.labelmonth.label不匹配,它也会毫无错误地传递。

我的表单中需要first_value值才能发布sum_valuemonth来发布月份。

稍后在动作表单中我希望它变成这样:

$first_value=$_post['first_value'];
$sec_value=$_post['sec_value']
$final_value=$fist_value+$sec_value
$month = month

如果我没有使用验证,我认为它已经完成了,没有什么可以做的,但是 我仍然需要它与用户想要选择的月份相匹配,以便更新数据。 first_value是月中所有数据的总和,当更新过程有效时,它会真正更新正确的月份,以防有人选择错误的月份。

1 个答案:

答案 0 :(得分:0)

示例html显示如何调用validate函数,也阻止默认表单提交。

注意:您必须根据您的要求进行更改,我试图解释如何调用验证功能

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function validateForm(e) {

e.preventDefault();//change

var a = document.forms["myForm"]["first_value"].value;
var b = document.forms["myForm"]["month"].value;
var c = document.forms["myForm"]["sec_value"].value;

if (a != b) {
   alert("Month isn't Same");
   $("#month").focus();
   return false;
}else{
   if (c == "") {
   alert("Recently sold item empty");
   $("#sec_value").focus();
   return false;
    }
  }
}
</script>
$(document).ready(function(){
    $("form").submit(function(e){
        validateForm(e);// your function
    });
});
</script>
</head>
<body>

<form id="myForm" action=""><!--your form, you should add your elements in form-->
  <!--your select boxes should be placed here-->
  <input type="submit" value="Submit">
</form> 

</body>
</html>