从一个表单 PHP 中涉及的许多选择框中获取至少一个值

我的代码有许多选择框，它们通过while循环PHP以不同的值动态生成。无论盒子的数量如何，它们都涉及一个表单，只有一个提交按钮（我知道如何分别获取它们的值）。

我想做的是，强制用户在继续下一页之前至少选择一个值。

<?php
$items = mysql_query("SELECT * FROM table where column='$var'" ) or die  ('mysql_error');
echo '<form action="myform.php" method="post">';
while ($item = mysql_fetch_array($items))
     {
      $id = $item ['id'];
      $number = $item ['number'];
      echo '<select name="number['.$id.']" class="number234">';
      echo '<option value="">0</option>';
      for ($i = 1; $i <= $number; $i++)
          {
          echo '<option value="'.$i.'">' . $i . '</option>' . "n";
          }               
      echo '</select>';
     }
    echo '<input type="submit" class="link"  name="book" value="book" />';
 echo '</form>';
 ?>

我已经搜索了很多关于这个，我刚刚找到了一个我仍然无法应用于我的代码的解决方案。看来我需要将PHP代码纳入javascript中，而我不够聪明，无法做到这一点。
这是链接 http://jsfiddle.net/rj5Gw/

我假设这就是你想要的。

http://jsfiddle.net/6hhnw9bd/1/

$("#mybutton").click(function(e){
    var flag = 0;
    $(".selectgroup").each(function(){
     if($(this).val() != ""){
            flag = 1;
     }
    });
    if(flag == 1){
     alert("Valid");
    } else {
     alert("Select an option");
     e.preventDefault();
    }
});

您可以使用 onbeforeupload 事件来检查是否选择了某个选项

var formSubmitting = false;
$(document).ready(function () {
		$('.myform').submit(function(e){
			e.preventDefault();
      formSubmitting = true;
    });
    $('.myform').validate({ // initialize the plugin
        rules: {
            Input1: {
                require_from_group: [1, ".selectgroup"]
            },
            Input2: {
                require_from_group: [1, ".selectgroup"]
            }
        },
        groups: {
            group: "Input1 Input2"
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });
});
 $(window).on('beforeunload', function(){
  if (formSubmitting) {
    return undefined;
  }
  if($('#input1').val() == '' && $('#input2').val() == '' ){
    return "Select an option";
  } 
 });

#docs {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Form</title>
</head>
<body>
 <form class="myform">
    <select name="Input1" id="input1" class="selectgroup">
        <option value="">please select...</option>
        <option value="DO0" opt_numAdults="2" opt_numChilds="0">0</option>
        <option value="DO1" opt_numAdults="2" opt_numChilds="0">1</option>
        <option value="DO2" opt_numAdults="2" opt_numChilds="0">2</option>
        <option value="DO3" opt_numAdults="2" opt_numChilds="0">3</option>
        <option value="DO4" opt_numAdults="2" opt_numChilds="0">4</option>
        <option value="DO5" opt_numAdults="2" opt_numChilds="0">5</option>
    </select>
    <br/>
    <select name="Input2" id="input2"  class="selectgroup">
        <option value="">please select...</option>
        <option value="FP0" opt_numAdults="2" opt_numChilds="1">0</option>
        <option value="FP1" opt_numAdults="2" opt_numChilds="1">1</option>
        <option value="FP2" opt_numAdults="2" opt_numChilds="1">2</option>
        <option value="FP3" opt_numAdults="2" opt_numChilds="1">3</option>
        <option value="FP4" opt_numAdults="2" opt_numChilds="1">4</option>
        <option value="FP5" opt_numAdults="2" opt_numChilds="1">5</option>
    </select>
    <br/>
    <button type="submit" id="mybutton">Go</button>
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
 <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
</body>
</html>

请注意，大多数浏览器不支持自定义消息onbeforeunload有关更多信息 https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

非常基本，但它应该可以工作。首先是一个检查是否至少有一个选择具有值的函数，然后是一个假的提交按钮，该按钮模拟按下真正的隐藏提交按钮，仅通过检查。

哦，对了，所有选择都应该有一个值为"的选项。

function anythingSelected(){
 var selects = document.getElementsByTagName('select');
 for(var i=0;i<selects.length;i++) if(selects[i].value != "") return true;
 return false;
}
function submitForm(){
 if(anythingSelected()) document.getElementById('submitButton').click();
 else alert('Select something please!');
}
...
<input type="submit" id="submitButton" hidden />
<input type="button" onclick="submitForm();" value="Send"/>

例：

function anythingSelected(){
 var selects = document.getElementsByTagName('select');
 for(var i=0;i<selects.length;i++) if(selects[i].value != "") return true;
 return false;
}
function submitForm(){
 if(anythingSelected()) document.getElementById('submitButton').click();
 else alert('Select something please!');
}

<html>
<head>
<style>
 select{ width: 100px; }
</style>
<script>
</script>
</head>
<body>
<form action="test.php">
<select><option value=""></option><option value="A">A</option></select>
<select><option value=""></option><option value="A">A</option></select>
<select><option value=""></option><option value="A">A</option></select>
<select><option value=""></option><option value="A">A</option></select>
<select><option value=""></option><option value="A">A</option></select>
<input type="submit" id="submitButton" hidden />
<input type="button" onclick="submitForm();" value="Send"/>
</form>
</body>
</html>

相关内容

最新更新

热门标签：