如果用户名已经在数据库中退出，如何禁用表单提交按钮？ （通过js，ajax，php（laravel））

Question

我是新的js学习者，并且我正在尝试构建一个表单。以表格的形式，我想检查输入的用户名是否已被使用或存在，并且已经通过laravel控制器和lil JS代码完成了此操作，但是如果数据库中已经存在输入的用户名，我想隐藏提交按钮。那我该怎么做呢？请任何人

这是我的JS代码

<script type="">

$function get_user_name(id, result) {
  var id = $(id).val();
  $.get("<?php echo e(url('home/get_user_name')) ?>/" + id,
  function (data) {
    $(result).html(data);
  });
}
</script>

控制器=>

**and 
controller =** 

public function get_user_name()
  {
     $username = request()->segment(3);
    $user = DB::table('users')
    ->select('username')
    ->where('username', $username)
    ->count();

    $nam = "username already taken";

    if ($user >0) {
      return $nam;
    }else{
    }
  }

html表格=>

    <span id="username_rs" style="color: green; font-weight: bold"></span>//showing the message here,

<input id="username" name="username"

           onchange="checkem('#username', '#username_rs')" >


<button type="submit" class="btn btn-primary">
            {{ __('Register') }}
          </button>

路线=>

Route::get('/home/get_user_name/{username}', 'HomeController@get_user_name')->name('checkun');

网址看起来像=>

http://localhost/home/get_user_name/{input username}

我的代码显示是否使用用户名，但是如果用户名已使用或数据库中存在用户名，我想隐藏提交按钮。

Answer 1

您可以这样返回：

**and 
controller =** 

public function get_user_name()
  {
     $username = request()->segment(3);
    $user = DB::table('users')
    ->select('username')
    ->where('username', $username)
    ->count();

    if ($user >0) {
      return Response::json(array("found"=>"yes", "message"=>"Username is already taken"));       
    }else{
       return Response::json(array("found"=>"no", "message"=>"Something happens wrong"));
    }
  }

您的脚本代码如下：

$function get_user_name(id, result) {
  var id = $(id).val();
  $.get("<?php echo e(url('home/get_user_name')) ?>/" + id,
  function (data) {
     if (data.found == 'yes)
     {
        $("#submit_btn").css("display","none")
     }
  });
}

HTML代码如下：

<span id="username_rs" style="color: green; font-weight: bold"></span>//showing the message here,

<input id="username" name="username"

           onchange="checkem('#username', '#username_rs')" >


<button type="submit" id="submit_btn" class="btn btn-primary">
            {{ __('Register') }}
          </button>

Answer 2

我会这样：

function get_user_name(id, result) {
  var id = $(id).val();
  $.get("<?php echo e(url('home/get_user_name')) ?>/" + id,
  function (data) {
    //check if we get the message: username already taken
    if(data) {
      $(result).html(data);
      $('input[type=submit]', this).attr('disabled', 'disabled'); //disable button
      $('form').bind('submit',function(e){e.preventDefault();}); //disable form
    } else {
      $('input[type=submit]', this).removeAttr('disabled', 'disabled'); //enable button
      $('form').unbind('submit'); //enable form
    }
  });
}