提交表单后禁用选择选项

Question

我已经尝试了一段时间。感谢您的帮助。

我有一个包含两个字段的表单。 1- 用户名。 2- 城市。

用户可以从城市选择选项中选择自己的城市（城市来自数据库）。

但是，如果用户没有找到他/她的城市，他/她可以选中复选框以启用文本输入以输入他/她的城市（同时选择选项将被禁用）。

问题是，如果用户写新城市，选择选项将被禁用（这很好），但是当用户提交表单时出现验证问题（例如：空用户名！），表单将返回以下内容：

城市选择选项将启用！！

城市文本输入将被禁用（用户输入的粘性城市名称）！！

那么，我怎样才能让文本输入中的城市名称与值保持一致，并使城市选择选项禁用？？

这是我的代码：

<title> Form </title>
<link rel="icon" type="image/png" href="images/icon/anta_ana.png">

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->

<div id="page-wrapper">

        <?php
            if ($_SERVER['REQUEST_METHOD'] == 'POST'){
                $username = $_POST['username'];
                $city_name = $_POST['city_name'];

                //errors handling :
                $error = array();
                if(empty($username)) $error[]= "<div class='alert alert-danger alert-dismissible input-sm' role='alert' dir='rtl' style='padding-top: 5px; padding-right: -5px; padding-bottom: 0px; padding-left: 0px'>
                                                                                    <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
                                                                                    <span aria-hidden='true'>&times;</span>
                                                                                    </button>
                                                                                    <strong style='color: #e62e00;'>Warning!</strong> Please write your name!
                                                                                    </div>";
                if($city_name == 'all') $error[]= "<div class='alert alert-danger alert-dismissible input-sm' role='alert' dir='rtl' style='padding-top: 5px; padding-right: -5px; padding-bottom: 0px; padding-left: 0px'>
                                                                                    <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
                                                                                    <span aria-hidden='true'>&times;</span>
                                                                                    </button>
                                                                                    <strong style='color: #e62e00;'>Warning!</strong> Please selects a city!
                                                                                    </div>";
                if(empty($error)) {
                    include("dbc.php");
                    $q = "INSERT INTO users (username,
                                                                    city_name) VALUES
                                                                    ('$username',
                                                                    '$city_name')";
                    $r = mysqli_query($dbc, $q);
                    if($r){
                        echo "<script>window.open('successfully_registered.php', '_self')</script>";
                    }
                    else{
                        echo "error";
                    }
                }
                else{
                    foreach ($error as $err){
                        echo $err;
                    }
                }
            }
        ?>

        <form action="question.php" method="POST" name="" dir="rtl">

            <!-- Userame -->
            <div class="form-group">
                <label class="control-label" style="float: right;"> Username </label>
                <input type="text" class="form-control" placeholder="Username" name="username" value =
                <?php if(isset($_POST['username'])) echo $_POST['username'] ?>>
            </div>

            <!-- City -->
            <div class="form-group">
                <label style="float: right;">City </label>
                <?php
                    include("dbc.php");
                    $qm = "SELECT DISTINCT city_name FROM cities ORDER BY city_name";
                    $rm = mysqli_query($dbc,$qm);
                    while ($row = mysqli_fetch_array($rm)){
                        $cities_array[] = $row['city_name'];
                    }
                    echo '<select class="form-control border-input" name="city_name" id="city_name">';
                    echo '<option value="all"> All </option>';
                    foreach($cities_array as $cities){
                        $selected = '';
                        if($_POST['city_name'] == $cities) {
                            $selected = 'selected="selected"';
                        }
                        echo '<option value="'.$cities.'"'.$selected.'>'.$cities.'</option>';
                    }
                    echo '</select>';
                ?>
            </div>

            <!-- Another City? -->
            <div class="form-group">
                <i class="fa fa-pencil-square-o" aria-hidden="true"></i> Didn't find you city? Check this box to enter your city: <input type="checkbox" id="another_city"/>
                <input placeholder="Write your city here" class="form-control" type="text" name="new_city" id="new_city" disabled value =
                "<?php if (isset($_POST['new_city'])) echo $_POST['new_city']; ?>" >
                <script>
                    document.getElementById('another_city').onchange = function() {
                        document.getElementById('new_city').disabled = !this.checked;
                        if(document.getElementById('new_city').disabled){
                            $("#city_name").prop('disabled', false);
                        }
                        else{
                            $("#city_name").prop('disabled', true);
                        }
                    };
                </script>
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-info btn-fill form-control" name="submit" value="Send"><i class="fa fa-paper-plane"></i> Send </button>
            </div>

        </form>

</div>

Answer 1

如果您想禁用 Select 只需使用此代码

 $('select').attr('disabled','disabled');

Answer 2

首先：您的代码（主要）易受 sql 注入攻击， http://php.net/manual/de/security.database.sql-injection.php

second：原因很简单，你提交表单，在 BACKEND 中检查并重定向。启用选项和禁用文本框的原因仅仅是因为页面被重新加载，这是您的默认设置。您可以在您的 url 中传递一个指示失败的参数（例如 err=wrongArgument）或其他），并在这种情况下使用 javascript 禁用选项框。

Answer 3

如果问题只是因为验证而出现，您可以先通过 ajax 请求提交表单详细信息。验证它，如果没有错误，则提交它们。如果您使用的是 jquery，那么您可以执行类似的操作

$("#form-id").submit(function(e){
    e.preventDefault();
    $.ajax({
                method: 'POST',
                url: 'validate.php',
                data: $(this).serialize(),
                success: function(res){
                    if(res == "success") {
                        $(this).submit();
                    } else { // error }
                },
                fail: function(){
                    // error
                }
            })
})

您可以做的另一件事是，如果您在验证失败后重定向到当前页面，并在末尾传递一个查询字符串，表示用户是否选中了复选框。您必须为此复选框命名，以便在您提交表单时也将其提交。

if(isset($_POST['another_city']) and $_POST['another_city'] == "on") {
    // header("Location: ...") redirects the page to the provided location
    header("Location: question.php?checked=1"&city=".$city_name);
}

一旦你这样做了，你将不得不添加代码来检查$_GET['checked']和$_GET['city']是否被设置。如果它们已设置，那么您可以使用 js 在表单中设置提供的值，例如：

php:

$checked = "";
$city = "";
if(isset($_GET['checked']) and $_GET['checked'] == 1) {
    $checked = "checked";
}
if(isset($_GET['city'])) {
    $city= $_GET['city'];
}

html:

 <div class="form-group">
     <i class="fa fa-pencil-square-o" aria-hidden="true"></i> Didn't find you city? Check this box to enter your city: <input type="checkbox" <?php echo $checked?> id="another_city"/>
     <input placeholder="Write your city here" class="form-control" type="text" name="new_city" id="new_city" disabled value = "<?php echo $city; ?>" >