jQuery表单,存在检查


jQuery form, exist checking

因此,我正在创建一个简单的表单,使用jQuery检查用户输入的值是否存在于我的DB中。到目前为止,一切都很顺利,但我发现自己被困在了下一部分。

为了便于解释,我只举一个例子来说明我正在努力实现的目标。对于这个例子,我将是"杂草"

在我数据库的公司表中,weeden的ID为255。

  1. 如果用户在客户端字段中键入"weeden"
  2. 在客户端字段的右侧(在web表单上),将出现文本"转发不可用"

我希望发生的情况是:"ID 255不可用"

这是相关代码。

HTML表单

<form action="addrecord.php" method="post" autocomplete="off"/>  
<div class="form-field">
  <label for="client">Client: </label>
  <input type="text" name="client" id="client" class="check-exists" data-type="client" placeholder="#">
  <span class="check-exists-feedback" data-type="client"></span>
</div>

jQuery函数

$.fn.existsChecker = function(){
  return this.each(function(){   
        var interval;
        $(this).on('keyup', function(){
            var self = $(this),
                selfType = self.data('type'),
                selfValue,
                feedback = $('.check-exists-feedback[data-type=' + selfType + ']');
            if(interval === undefined){
                interval = setInterval(function(){
                  if(selfValue !== self.val()){
                      selfValue = self.val();
                      if(selfValue.length >= 1){
                          $.ajax({
                              url: 'check.php',
                              type: 'get',
                              dataType: 'json',
                              data: {
                                    type: selfType,
                                    value: selfValue
                              },
                              success: function(data){
                                  if(data.exists !== undefined){
                                      if (data.exists === true){
                                          feedback.text(selfValue + ' is already taken.');
                                      }else {
                                          feedback.text(selfValue + ' is available');
                                      }
                                  }
                              },
                              error: function(){
                              }
                           });
                       }
                  }
              }, 1000);
          }
      });
  });
};

Check.php

$db= new PDO('mysql:host=host;dbname=mydb', 'user', 'pass');
if(isset($_GET['type'], $_GET['value'])){
$type = strtolower(trim($_GET['type']));
$value= trim($_GET['value']);
$output = array('exists' => false);

if(in_array($type,
            array('client')
            )
   ){
  switch($type){
      case 'client':
           $check = $db->prepare("
                SELECT COUNT(*) AS count
                FROM company
                WHERE name = :value
            ");
       break;
$check->execute(array('value'=> $value));
$output['exists'] = $check->fetchObject()->count ? true: false;
echo json_encode($output);

如有任何帮助/建议,我们将不胜感激。我认为自己是一个初学者,这是我第一次从事网络项目。

为了提前澄清,同一个网络表单上还有许多其他输入字段,如:电子邮件、日期、第一个、最后一个等。我希望我的问题足够清楚。感谢

您必须将查询更改为以下内容:

$check = $db->prepare("
            SELECT id, COUNT(*) AS count
            FROM company
            WHERE name = :value
        ");

我假设公司表上的主键字段命名为id

并最终将id存储在output-阵列中

$result = $check->fetchObject();
$output['exists'] = $result->count ? true: false;
$output['id'] = $result->id;

然后你可以像这样输出id:

if (data.exists === true){
  feedback.text('ID ' + data.id + ' is unavailable');
}

您可以处理查询中的所有内容

     $db= new PDO('mysql:host=host;dbname=mydb', 'user', 'pass');
     if(isset($_GET['type'], $_GET['value'])){
         $type = strtolower(trim($_GET['type']));
         $value= trim($_GET['value']);
         $output = array('exists' => false);

        if(in_array($type,array('client'))){
            switch($type){
                 case 'client':
                       $check = $db->prepare("
                    SELECT (CASE WHEN(COUNT(id)>0) THEN id ELSE FALSE END) AS count 
                    FROM company WHERE name = :value ");
                  break;
            }  
            $check->execute(array('value'=> $value));
            $output['exists'] = $check->fetchObject()->count ? true: false;
            echo json_encode($output);
       }

在Ajax的成功

      if(data.exists !== undefined){
          if (!data.exists){
                feedback.text(selfValue + ' is already taken.');
          }else {
               feedback.text(selfValue + ' is already taken.');
          }
       }