Question

我的代码有很多选择框，它们通过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/

Answer 1

我假设这是你想要的。

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();
    }
});

Answer 2

您可以使用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

Answer 3

非常基本，但应该有效。首先是一个检查至少有一个Selects是否有值的函数，然后是一个伪造的提交按钮，模拟按下只有支票的真实隐藏的提交按钮。

哦，对，并且所有选择都应该有一个值为“”的选项。

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>

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

3 个答案: