Laravel - check if a data exists in database within javascript

Question

I am building a form with Laravel 7. First, the users need to choose one of the items in the input box with datalist, and corresponding detailed info will be shown once chosen("blur" the input box). The users can also add a customised items to the list. A database is used to store all the items, if a user add a customised one, it will be stored in the database so that it'll be shown. So, since it's an input box, the user can type. I want it to not show any info if the input does not exist in the database, until the user hit the add button to add the customised item to the database as well as the input dropdown, then a default info will be shown.

But how to decide if the input exists in the database?

The form is like this, I use Jquery to hide/show div upon which item is chosen.

<form action"/send" method="post">
  <div id="info1">
    <!-- info about first item -->    
  </div>

  <div id="info2">
    <!-- info about second item -->
  </div>

  <div id="info_default">
    <!-- if customised item is chosen, show this one -->  
  </div>

  <div id="info_does_not_exist">
    <!-- if cannot find the input item in database, show this one -->  
  </div>

  <button type="submit">submit</button>
</form>

Answer 1

You have to use something like AJAX to check your database for user input value then make the proper decision to display nothing until add or display what in the database.

so the workflow will be as follow: user input => ajax take user input and submit to a controller function to check the database for value existence => depending on the returned value from this controller function => display the proper value to the user

Answer 2

For the simple approach, I recommend you use Ajax of jQuery, with this you don't have to change to much, add one more route for API, checking data in database and several JavaScript lines of code. You can try the following way:

Controller :

use Your\Namespace\Path\Of\Model Model
Class ABC {
    ...
    public function checkExist(){
        $data = request()->get('data'); // get data to check
        $model = new Model();
        $where = ['id' => $data]; // passing your where condition to check
        return $model->where($where)->get()->count() > 0;
    }
}

Route file (web.php/api.php):

Route::get('checkExist', 'ABC@checkExist');

View

<form action"/send" method="post">
  <div id="info1">
    <!-- info about first item -->    
  </div>

  <div id="info2">
    <!-- info about second item -->
  </div>

  <div id="info_default">
    <!-- if customised item is chosen, show this one -->  
  </div>

  <div id="info_does_not_exist">
    <!-- if cannot find the input item in database, show this one -->  
  </div>

  <button type="submit">submit</button>
</form>
...
<script>
  $(function(){
    // every time input change, check value existence in database
    $('.info2 input').change(function(){
      let input_value = $(this).val();
      $.ajax({
        url: "{{ route('checkExist') }}",
        method: "GET",
        data: {"id": input_value},
        success: function(response){
          // process if/else to show div '.info_default' / '.info_does_not_exist'
          if (response) {
            // show '.info_default' and hide '.info_does_not_exist'
          } else {
            // show '.info_does_not_exist' and hide '.info_default'
          }
        }
      });
    })
  })
</script>

This is not actual runable code, just an idea, according to this, you can adjust it depend on your further desire. Hope this would help