Автозаполнение поля ввода текста на основе значения в другом поле ввода, которое установлено только для чтения

Question

Я надеюсь, что кто-то может помочь мне с моей проблемой. Я пытаюсь автоматически заполнить поле цены (входной текст) на основе значения, которое автоматически заполняется в поле имени категории (входной текст). Я знаю, как использовать функцию onchange, так как я успешно использую ее для множества других элементов на моей странице php. Однако, это немного сложнее, потому что оба поля доступны только для чтения. Кроме того, использование кнопки не является вариантом в этой ситуации, поэтому ряд других сообщений, связанных с моей проблемой, не работает для меня.

Я пробовал следующее: Установить раскрывающееся значение на основе того, что выбрано в другом раскрывающемся списке с использованием Javascript , Событие jQuery change () не работает должным образом с входными текстовыми полями. Это, однако, работает. , Событие изменения текста в текстовом поле только для чтения , JS / jQuery: запуск обмена с отключенного / только для чтения ввода без использования кнопки и около 10 другие. К сожалению, как я уже упоминал, ни один из сценариев кода, которые я пробовал из этих постов, не работал для меня. (Например, привязка, ввод, запуск и т. Д.)

Вот код, который у меня сейчас есть (все еще не работает): PHP

echo '<td align="left" width="8%" height="25px">';
        $ddlquery4 = "SELECT * FROM dvd ORDER BY title ASC";
        $ddlresult4 = mysqli_query($dbc, $ddlquery4) or die("Bad SQL: $ddlquery4");
        echo '<select type="text" class="dropdown" name="dvdid" id="movieID" size="1" onchange="updatecat()">';
        echo '<option value=""></option>';
        while($ddlrow4=mysqli_fetch_array($ddlresult4, MYSQLI_ASSOC)){
        echo "<option value='".$ddlrow4['dvdid']."' data-categoryname='".$ddlrow4['categoryname']."'>" . $ddlrow4['title'] . "</option>";
        } //End while statement

        echo "</select>";
        echo '</a></td>';
        echo '<td align="left" width="5%">';
        echo '<input style="font-size:20px; border:0px; background:none; box-shadow:none;" type="text" id="catName" name="categoryname" readonly="readonly" onchange="popprice()">';

    echo '<td align="left" width="4%">';
        '<input type="text" id="catprice" name="price" readonly="readonly">';

JS / JQuery

<script>
$('#movieID').change(function() {
    selectedOption = $('option:selected', this);
    $('input[id=catName]').val( selectedOption.data('categoryname') );
 });
</script>

<script>
$('#catName').bind('change', function() {
   if (document.getElementById('catName').value == 'Regular')
    document.getElementById('catprice').value = '.50';
      else if (document.getElementById('catName').value == 'Popular')
        document.getElementById('catprice').value = '1.00';
      else if (document.getElementById('catName').value == 'Current Release')
        document.getElementById('catprice').value = '1.50';
      else if (document.getElementById('catName').value == 'Current Hit')
        document.getElementById('catprice').value = '2.00';
});
</script>

МАЛЕНЬКИЙ ОБРАЗЕЦ МНОГИХ ДРУГИХ СЦЕНАРИЙ, КОТОРЫЕ Я ПРОБОВАЛ:

<script>
$(document).ready(function() {
$('popprice').change(function() {
    selectedOption = $('option:selected', .data('categoryname');
    if $(categorynameValue).val('Regular') {
        ('#catprice').val('.50');
        }
    else if $(categorynameValue).val('Popular') {
        ('#catprice').val('1.00');
        }
    else if $(categorynameValue).val('Current Release') {
        ('#catprice').val('1.50');
        }
    else if $(categorynameValue).val('Current Hit') {
        ('#catprice').val('2.00');
        }
    else ('#catprice').val("");
});
});
</script>

С добавлением popprice к функции изменения updatecat в строке выбора, например:

echo '<td align="left" width="8%" height="25px">';
        $ddlquery4 = "SELECT * FROM dvd ORDER BY title ASC";
        $ddlresult4 = mysqli_query($dbc, $ddlquery4) or die("Bad SQL: $ddlquery4");
        echo '<select type="text" class="dropdown" name="dvdid" id="movieID" size="1" onchange="updatecat(); popprice();">';
        echo '<option value=""></option>';
        while($ddlrow4=mysqli_fetch_array($ddlresult4, MYSQLI_ASSOC)){
        echo "<option value='".$ddlrow4['dvdid']."' data-categoryname='".$ddlrow4['categoryname']."'>" . $ddlrow4['title'] . "</option>";
        } //End while statement

И я попытался скомбинировать операторы ififif в функции изменения #movieID следующим образом и оставил только onchange = "updatecat ();" в элементе select:

<script>
$(document).ready(function() {
$('#movieID').change(function() {
    selectedOption = $('option:selected', this);
    $('input[id=catName]').val(selectedOption.data('categoryname') );

    var selectedOption = $('option:selected', .data('categoryname') );
    if $(categorynameValue).val('Regular') {
        ('#catprice').val('.50');
        }
    else if $(categorynameValue).val('Popular') {
        ('#catprice').val('1.00');
        }
    else if $(categorynameValue).val('Current Release') {
        ('#catprice').val('1.50');
        }
    else if $(categorynameValue).val('Current Hit') {
        ('#catprice').val('2.00');
        }
    else ('#catprice').val("");
});
});
</script>

Я также пробовал это в скрипте функции изменения movieID ...

if ('#catName' = 'Regular') {
        document.getElementByID("catprice".innerHTML = ".05"
    } else if ('#catName' = 'Popular') {
        document.getElementByID("catprice".innerHTML = "1.00"
    } else if ('#catName' = 'Current Release'){
        document.getElementByID("catprice".innerHTML = "1.50"
    } else if ('#catName' = 'Current Hit'){
        document.getElementByID("catprice".innerHTML = "2.00"

Любой совет очень ценится, и я заранее благодарю вас за ваше время и за то, что вы поделились своими знаниями.