动态HTML表单输入取决于SQL查询结果

Question

我有一个HTML表单，允许用户输入昵称并选择要连接的性别。

代码

  <form class="form-horizontal" role="form" action="start" method="post">
  <fieldset>

    <!-- Text input-->
    <div class="form-group">
      <label class="col-sm-2 control-label" for="nickname">Nickname</label>
      <div class="col-sm-10">
        <input id="nickname" name="nickname" type="text" class="form-control" required="required">
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label" for="gender">Gender</label>
      <div class="col-sm-10">
        <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-default btn-lg">
            <input type="radio" name="username" value="Female" id="username"> <i class="fa fa-female"></i> Female
          </label>
          <label class="btn btn-default btn-lg">
            <input type="radio" name="username" value="Male" id="username"> <i class="fa fa-male"></i> Male
          </label>
        </div>
      </div>
    </div>

    <!-- Button -->
    <div class="form-group">
      <label class="col-sm-2 control-label" for="button"></label>
      <div class="col-sm-offset-2 col-sm-10">
        <button id="button" class="btn btn-lg btn-primary" type="submit">Enter</button>
      </div>
    </div>

  </fieldset>
  </form>

截图

问题

用户完成nickname输入字段后，我想运行SQL查询：

SELECT COUNT(u.id) FROM users u WHERE u.nickname = **value_of_input_field**

如果SQL结果为>0：

然后password输入字段应该神奇地显示在nickname和gender字段之间。

我怎么能做到这一点？

我不知道在哪里开始寻找或寻找什么，所以任何指针，建议等都非常受欢迎，但代码示例会更好。

Answer 1

免责声明：我没有对此进行测试，但我认为如果它不起作用，它就足以让你走了。

你会有一个css类

.hiding{
    display: none;
}

你的html代码段看起来像这样：

<form method="post">
    <input name="nickname" type="text" id="nickname">
    <input name="password" type="text" id="password" class="hiding">
    <input> <!-- other buttons and form elements -->
</form>

js看起来像这样（假设你已经包含了jquery）

<script type="text/javascript">
    $(document).ready(function(){
        //other jquery/js stuff

        $("#nickname").change(function(){
            var nick = $(this).val();
            $.ajax({
                type: "POST",
                data: {
                    nickname: nick
                },
                url: "actions/validate.php",
                dataType: "text",
                success: function(data){
                    if(data>0){
                        $("#password").removeClass("hiding");
                    }
                }
            });
        });
    });
</script>

并且php看起来像这样

<?php
    //connect to db

    $nickname= $_POST["nickname"];

    $sql = "SELECT COUNT(u.id) FROM users u WHERE u.nickname = '".$nickname."'";
    $result = mysql_query($sql);
    $numRows = mysql_num_rows($result);
    echo $numRows;

    //disconnect to db
?>