JavaScript

From this:
<select id='$sel_cat_name' name='$sel_cat_name' onchange='return check_supplier($sel_cat_name)'>

To this:
<select id='$sel_cat_name' name='$sel_cat_name' onchange='return check_supplier(this, $sel_cat_name)'>

function check_supplier(opType) {        
    const form_ele_name = "document.form2." + op_type + ".selectedIndex";
    let tmp_sel_index = eval(form_ele_name);

    const form_sel_name = "document.form2."+op_type+".options["+tmp_sel_index+"].text";
    let sel_ven_name = eval(form_sel_name);

function check_supplier(sourceElement, opType) { 
     const tempSelectIndex = sourceElement.selectedIndex;
     const formSelectName = sourceElement.options[tempSelectIndex].text;
     let selectVendorName = eval(formSelectName); 

function timeFuncRuntime(f) { f();}

// JavaScript Document
(function() {
    window.spawn = window.spawn || function(gen) {
        function continuer(verb, arg) {
            let result;
            try {
                result = generator[verb](arg);
            } 
            catch (err) {
                return Promise.reject(err);
            }
            if (result.done) {
                return result.value;
            } else {
                return Promise.resolve(result.value).then(onFulfilled, onRejected);
            }
        }
        let generator = gen();
        let onFulfilled = continuer.bind(continuer, 'next');
        let onRejected = continuer.bind(continuer, 'throw');
        return onFulfilled();
    };

    window.showModalDialog = window.showModalDialog || function(url, arg, opt) {

        url = url || ''; //URL of a dialog
        arg = arg || null; //arguments to a dialog
        opt = opt || 'dialogWidth:300px;dialogHeight:300px'; 

        let caller = showModalDialog.caller.toString();
        let dialog = document.body.appendChild(document.createElement('dialog'));

        dialog.setAttribute('style', opt.replace(/dialog/gi, ''));
        dialog.innerHTML = '<input class="btn-primary" type="button" id="dialog-close" value="Continue" style="position: absolute; top: 2px; right: 4px; font-size: 20px; color: #000; text-decoration: none; outline: none;"><iframe id="dialog-body" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe>';

        document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
        document.getElementById('dialog-close').addEventListener('click', function(e) {
            e.preventDefault();
            dialog.close();
        });

        //if using yield
        if (caller.indexOf('yield') >= 0) {
            return new Promise(function(resolve, reject) {
                dialog.addEventListener('close', function() {
                    var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
                    document.body.removeChild(dialog);
                    resolve(returnValue);
                });
            });
        }

        //if using eval
        var isNext = false;
        var nextStmts = caller.split('\n').filter(function(stmt) {
            if (isNext || stmt.indexOf('showModalDialog(') >= 0)
                return isNext = true;
            return false;
        });

        dialog.addEventListener('close', function() {
            var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
            document.body.removeChild(dialog);
            nextStmts[0] = nextStmts[0].replace(/(window\.)?showModalDialog\(.*\)/g, JSON.stringify(returnValue));
            eval('{\n' + nextStmts.join('\n'));
        });        

    };
})();

HTTP Status:<br /><br />
Response​<br />
body: ReadableStream { locked: false }​<br />
bodyUsed: false​<br />
headers: Headers {  }​<br />
ok: true​<br />
redirected: false​<br />
status: 200​<br />
statusText: "OK"​<br />
type: "basic"​<br />
url: "<a href="http://0.0.0.0/app/msrpControllerAsync.phtml?save=1&cachebuster=1608332582325">http://0.0.0.0/app/msrpControllerAsync.phtml?save=1&cachebuster=1608332582325</a>"​<br />
<prototype>: ResponsePrototype { clone: clone(), arrayBuffer: arrayBuffer(), blob: blob(), … }<br />
msrpAsync.js:42:25

spinner.classList.remove('hide');        
spinner.classList.add('show');

const saveUrl = 'msrpControllerTest.phtml?save=1&cachebuster=' + (new Date()).valueOf();

fetch(saveUrl, { mode: 'same-origin', headers: { "Content-Type": "application/json; charset=utf-8" }})
.then(status => {
    console.log("HTTP Status: ", status);
})            
.then(function(data) {

    console.log("Request succeeded with JSON response: ", JSON.stringify(data));      

    // Shut down the spinner
    spinner.classList.remove('show');        
    spinner.classList.add('hide');

})
.catch(err => {

    // Shut down the spinner
    spinner.classList.remove('show');        
    spinner.classList.add('hide');

    console.log("Ajax error - ", err);
    alert("An error has occurred, and no error code has been written yet to debug the error")
});

ob_start();

header('Content-Type: application/json');
$jsonResult = "
{ 
    \'status\': \'202\',
    \'message\': \'No Project Number assigned\',
    \'msrp\': {
        \'bookPrice\': 0.00,
        \'finalAdd\': 0.00
    }            
}";
echo $jsonResult;

ob_end_flush();

spinner.classList.remove('hide');        
spinner.classList.add('show');

const saveUrl = 'msrp-api-async.phtml?save=1&cachebuster=' + (new Date()).valueOf();

fetch(saveUrl, { mode: 'same-origin', headers: { "Content-Type": "application/json; charset=utf-8" }})
.then(response => {

    console.log("response: ", response);                
    console.log("Request succeeded with JSON response: ", JSON.stringify(response.json));                

    // Shut down the spinner
    spinner.classList.remove('show');        
    spinner.classList.add('hide');

})            
.catch(err => {

    // Shut down the spinner
    spinner.classList.remove('show');        
    spinner.classList.add('hide');

    console.log("Ajax error - ", err);
    alert("An error has occurred, and no error code has been written yet to debug the error")
});

spinner.classList.remove('hide');        
spinner.classList.add('show');

const saveUrl = 'msrp-api-test.phtml?save=1&cachebuster=' + (new Date()).valueOf();

fetch(saveUrl, { mode: 'same-origin', method: 'POST', headers: { "Content-Type": "application/json; charset=utf-8" }})
.then(response => response.json())
.then(data => {

    console.log("Success: ", data);                

    // Shut down the spinner
    spinner.classList.remove('show');        
    spinner.classList.add('hide');

})                
.catch(err => {

    // Shut down the spinner
    spinner.classList.remove('show');        
    spinner.classList.add('hide');

    console.log("Ajax error - ", err);
    alert("An error has occurred, and no error code has been written yet to debug the error")
});