Как отключить кнопку отправки формы, если имя пользователя уже существует в базе данных? (js, ajax, php (laravel))

Question

Я новый ученик, и я пытаюсь создать форму.в форме, которую я хочу проверить, уже введено или нет введенное имя пользователя, и я сделал это с помощью контроллера 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 =>

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

И URL выглядит как =>

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
    }
  });
}