Tukukkk

I've set up my input as listed below, which the question to fill in input for if is only prompted on either $client_chargeBy is either == "Square Foot" or "Room"

 <div class="col-md-12 p0 ">

     <div class="col-md-6 PL0 p0_smresp">

         <div class=" form-group "><label for="enjoy_style" class="optional">How are your rates charged by?</label>

             <select name="client_chargeBy" id="client_chargeBy" value="{{$client_chargeBy}}" class="form-control ">

                <option value="Square Foot">Square Foot</option>

                <option value="Room">Room</option>

                <option value="View">View</option>

                <option value="Hour">Hour</option>

            </select>

        </div>

     </div>

     <div class="col-md-6 PR0 p0_smresp">

         <div class=" form-group "><label for="client_chargeRate" class="optional">What is your rates?</label>

             <input type="text" name="client_chargeRate" id="client_chargeRate" value="{{$client_chargeRate}}" class="form-control" autocomplete="off" placeholder="List your charge rate" aria-required="true">

         </div>

     </div>

 </div>

 <div class="col-md-12 p0 ">

     <div class="col-md-6 PL0 p0_smresp">

         @if($client_chargeBy == "Room")

             input days for Room

         @elseif($client_chargeBy == "Square Foot")

             input days for SF

         @endif

     </div>

 </div>

However the approach I used will only display the input when I've submitted the form first. I want to make it such that "input days for Room" or "input days for SF" prompt will display right after i change the select option without having to save it first.

In order to handle this live on document change, you can do it via Javascript since PHP is only used for server side rendering where variables are set prior to the HTML document render. I suggest changing your HTML document a little to cater to easy Javascript element handling;

 <div class="col-md-12 p0 ">

     <div class="col-md-6 PL0 p0_smresp">

     input days for <span id="textToChange">SF</span>

     </div>

 </div>

And your Javascript would be

var selectElement = document.getElementById('client_chargeBy');

    selectElement.addEventListener('change', function() {

        let selectedIndex = selectElement.selectedIndex;

        var optionValue = selectElement[selectedIndex].value;

        var spanText = document.getElementById('textToChange');

        var updateValue = 'SF';

        switch(optionValue) {

            case 'Room':

         	updateValue = 'Room';

            break;

            case 'Square Foot':

          	updateValue = "SF";

            break;

        } 

        spanText.innerHTML = updateValue;

    });

Also, I would recommend you to read up more on the concept on live update on a webpage as @Banujan suggested. It will be very useful in the long run as a developer.

First of all PHP is a server site script. It runs on the server then return the results. Thats all. There is nothing else between your browser and server after get the response.

Every time when you run a .PHP the page will be loading and waiting for server's response. You can't do anything on page before site loaded. So if you want get real time update from server (Without refresh/reload site) You should make a background connection (Web-Socket) Or you should ask server for any updates frequently in background (AJAX)

So here you should make a background connection to server using Javascript. Its a client side, It will connect client and server.

This is a very basic concept.. Refer this links to learn

Ajax request Websoket