Question

我想用至少选择一个复选框，否则它必须在同一页面显示错误。我使用php完成了它但错误显示在重定向文件中。我想在重定向之前在同一页面显示错误.I不想在其他页面中显示。如何使用jquery这样做。我在jquery中是callow。有人可以帮忙吗？

我的代码是，

  backgroundTask = application.beginBackgroundTask(withName: "Task", expirationHandler: {
                application.endBackgroundTask(self.backgroundTask!)
                self.backgroundTask = UIBackgroundTaskInvalid
            })

fselect.js

<?php
include_once "../header/header.php";
$_SESSION['user_id'];
$_SESSION['project_name']; 
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Create Test</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>    
    <!-- The below url are required for dropdown -->
    <link href="http://localhost/Performance/Test/css/fselect.css" rel="stylesheet">
    <script src="http://localhost/Performance/Test/js/fSelect.js"></script>
    <script>
    (function($) {
        $(function() { 
            $('#filename').fSelect();
        });
    })(jQuery);
    </script>

</head>
<?php
    include_once "database.php";
if(isset($_POST['submit'])){
if(empty(isset($_POST['filename']))){
    echo "error";
  }
 }  
?>

<body style="background-color: white">
    <form method="post" action="RunTest.php" autocomplete="off">
    <input style="position:fixed; top:40px; right:25px; margin-right:4cm;" class="btn btn-success col-sm-1" type="submit" name="submit"  value="Save"/>
    <!--<input style="position:fixed; top:40px; right:10px;" class="btn btn-success col-sm-1" type="submit" onclick="ClearFields();" value="Clear"/>-->
            <div>       
                <select  name="filename[]" id="filename" multiple="multiple">
                    <optgroup label="Filename">
                        <?php
                            while ($row = mysqli_fetch_array($result_fsql)) {
                                echo "<option id='file' value='".$row['script']."'>".$row['script']."</option>";
                            }
                        ?>
                    </optgroup>
                </select>
            </div><br/>
        </form> 
   </body>
</html>

Answer 1

您可以使用AJAX来实现您想要的效果。首先，我必须说我个人使用jQuery AJAX，并且通常使用jQuery表示我的JavaScript。它简单地使许多代码变得简单易读。如果您希望这样做，您将必须安装一个jQuery库并将其包含在您的文件中，就像使用任何普通的JavaScript或CSS文件一样。

AJAX功能：

function sendData()
{
    $.ajax({
        type : "POST",
        url : "some_page.php",
        data : { checkBox : $("#idOfCheckbox:checked").val() },
        success: function (html) {
            //Success handling
            if( html.includes('notCheckedError') ) {
                //Show error message in an element by id
                $("#errorContainer").html("Error! You have not checked the checkbox.")
            }
            else {
               //Perform redirect
               window.location.href="/other_page.php";
           }
        }
    })
}

我选择将AJAX函数封装到另一个可以调用onclick的函数中，或者你选择调用它。您还可以将AJAX函数放入document.ready函数中，并向其添加单击事件。我刚刚选择了这种方法，因为它易于理解。

关于Ajax函数，我们定义数据的类型。最常见的用途是POST和GET。在我们的例子中，我选择了POST。您可以找到有关这些数据类型here的更多信息。然后我们指定URL，这是我们发送数据变量的地方。然后我们指定数据。首先，在这种情况下，我们定义变量 checkBox 。然后，我们将变量设置为所选复选框的值。我们通过定位复选框的ID来获取此值。关于如何选择不同的元素，id，类，名称等，你有很多选择。

然后我们进入成功处理，我们检查html是否包含（这是我们的 some_page.php 中的html）我们定义的特定字符串。我们将echo作为PHP文件中的错误。如果PHP文件不包含字符串，那么它将继续重定向，否则它会将我们定义的错误消息从AJAX函数粘贴到错误容器中。

现在，在我们调用了我们的函数之后，我们的 some_page.php 将会收到post变量 checkBox 。所以在我们的PHP文件中，我们需要执行检查以查看POST是否实际包含值。如果值为空，那么我们抛出我们在AJAX函数中检查的错误。即 notCheckedError 。

PHP文件看起来像这样：

<?php
if(!$_POST['checkBox']) {
    echo 'notCheckedError';
}
else {
    //Everything is ok, the AJAX will perform the redirect.
}
?>

现在，我不知道你的HTML在你的复选框方面是怎样的，但它看起来像这样：

<input type="checkbox" id="idOfCheckbox" name="nameOfCheckbox" value="1">

然后你可以有一个按钮来调用AJAX函数，

<button onclick="sendData();">Send data!</button>

错误容器（可以是div或span元素等）：

<div id="errorContainer"></div>

值得注意，您可以设置您的复选框属性，默认情况下使用checked属性进行检查：

<input type="checkbox" id="idOfCheckbox" name="nameOfCheckbox" value="1" checked>

或使用jQuery：

$("#idOfCheckbox").attr('checked', true);

，或者

$("#idOfCheckbox").prop('checked');

这样，您的用户就不必主动点击它进行检查。

另一个选项是检查复选框的布尔值，以查看是否已检查。然后，您可以根据评估结果选择调用AJAX函数。

获取复选框的布尔值：

$("#idOfCheckbox").is(':checked');

然后你可以做，

if( $("#idOfCheckbox").is(':checked') ) {
    //logic for check goes here
}
else {
    //Error
}

希望这有帮助。：）

Answer 2

我已经试过了，它工作正常。

<script>
    //error showing if user does not select any uploaded jmx file.
  function validateForm() {
        var x = document.forms["myForm"]["filename"].value;  
        if (x == ''){
          jQuery('#filechoose_error').show();
          return false;             
       }
  }
</script>

在形式上，

<form name="myForm" method="post" action="RunTest.php" onsubmit="return validateForm();" autocomplete="off">
    <div>
        <div class="col-xs-5">
            <span><b>Filename</b></span>
                </div>
                <select  name="filename[]" id="filename" multiple="multiple">
                    <optgroup label="Filename">
                        <?php
                            while ($row = mysqli_fetch_array($result_fsql)) {
                            echo "<option id='file' value='".$row['script']."'>".$row['script']."</option>";
                                }
                    </optgroup>
                </select>
            <!--display error-->
        <div style="display:none; text-align:center; color:red" class="error" id="filechoose_error" >&emsp;&emsp;&emsp;  * select a file</div>
    </div>
</form>

Answer 3

$('#checkboxId').is(':checked')

这将返回true或false取决于复选框状态

验证jquery中的复选框？

3 个答案: