I have patients information in database, now I want to access one's information in another form in Laravel Project

Question

I have patients information in database, now I want to access one's information in another form. When I will input patient's ID the patient name field need to be filled/loaded automatically. I have my Patient model also.

This is the from...

<form method="post" class="" action="" >
    @csrf
    <div class="input-field col s3">
        <input name="patient_id" id="id" type="text" class="validate">
        <label class="active" for="id">Patient ID</label>
    </div>

    <div class="input-field col s9">
        <input name="patient_name" id="name" type="text" class="validate">
        <label class="active" for="name">Patient Name</label>
    </div>

    <div class="input-field col s12">
        <select name="room">
            <option value="" disabled selected>Select Room</option>
            <option value="2001">ROOM 2001 - Non AC - 500</option>
            <option value="4001">ROOM 4001 - AC -800</option>
            <option value="301">CABIN 301 - AC - 1700</option>
        </select>
    </div>

    <div class="input-field col s12 text-center">
        <button class="btn waves-effect waves-light" type="submit" name="action">Assign Room</button>
    </div>
</form>

Answer 1

You can

1. create the json object in the blade template, which may be a little messy if special characters are present. Also, i don't see this as a good solution if you have tons of records.

2. I would use a library, like https://select2.org/ , what you'll be looking for is here https://select2.org/data-sources/ajax ... i personally use this one https://semantic-ui.com/modules/search.html#/examples ... but i think select2 is more straight.

At the bottom of https://select2.org/data-sources/ajax you can see how an object with the full data can be passed while querying the server.

Since the name is just for searching the id ( I Assume)

You could also adjust your controller so it looks in CONCAT(id,name) so the user can type the id or name and find the patient.

Answer 2

Pass the patient details to the view through the compact and use the values of the patient collection accordingly in the input fields.

controller

public function edit($id){
   $patient = Patient::find($id);
   return view('patients.edit, compact('patient'))
}

In the view

<input value="{{ old('name') ? old('name') : $patient->name }}" name="name" type="text" class="form-control" required>

Answer 3

you can try this.

Execute a JavaScript when a you Enter patient id in input field:

here is the example -> https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_oninput

HTML

 <input name="patient_id" id="id" type="text" class="validate" oninput="myFunction()">

Javascript

function myFunction() {
   var p_id = document.getElementById("id").value;
   $.ajax({
       url: '{{URL::to('get_patient_name')}}'+ '/'+p_id,
       type: "get",
       success: function (data) {

       }
   });
}

Now make one route :

Route::get('get_patient_name/{p_id}', 'PatientController@getPatientName'});

In controller get the name of the patient

public function getPatientName($id)
{
    return ModelName::where('patient_id',$id)->value('patient_name');
}

and finally, print patient name in the name input field.

in the javascript success function

success: function (data) {
        $('#name').val(data);
}

Answer 4

<input name="patient_id" onkeydown="getInfo(this)" id="id" type="text" class="validate">

<script type="text/javascript">

function getInfo(input){

var xhr = new XMLHttpRequest();
            xhr.open("GET", 'your/url/to/get/info/from/db/'+input.value, true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send();
            xhr.onload = function() {
                var data = JSON.parse(this.responseText);
                document.getElementById('name').value = data.name;
                document.getElementById('room').innerHTML= '<option value="'+ 
data.room +'">'+data.room +'</option>';
data.name
                               }}

Answer 5

If you want to do it without using jquery, here is vanilla js

dont forget to change request url!

document.querySelector("#id").addEventListener("change", function () {
        let xml = new XMLHttpRequest(),
            token = document.querySelector("input[name=_token]").value,
            id = document.querySelector("#id").value,
            name = document.querySelector("#name");

        xml.open("get", "get/" + id); // change url
        xml.setRequestHeader("X-CSRF-TOKEN", token);
        xml.onreadystatechange = function () {
            if (xml.readyState === 4) {
                var response = JSON.parse(xml.responseText);
                if (xml.status === 200 ) {
                    name.value = response
                } else {
                    console.log('something bad happened');
                }
            }
        };
        xml.send()
    })

Then in your controller find patient and send back

public function getPatient($id){

   $patient = Patient::find($id);

   return response()->json($patient->name);
}