Javascript in PHP to get the value of a selected option

Question

I am trying to make a textbox update depending on the value of the quantity they type in, times the rate between 2 games. The rate I set in the backend, I've made it check the rate depending on the game input and output.

I'm trying to do javascript in PHP so I can Pull a mysqli row depending on what option is selected.

My error is that my php code that's calling the javascript is not working.

My full code is :

<input type="text" class="form-control" id="quantity_input" style="background: white; border-radius: 5px; float: left; width: 24%; text-align: center;" placeholder="Quantity" required="" oninput="calculateResultTrade()">

<select id="tradable_have" class="form-control" style="border-radius: 5px; float: left; width: 24%; text-align: center; margin-left: 15px;" onchange="calculateResultTrade()">
<option>Select what you have</option>
<?php 
    while ($row = mysqli_fetch_array($query)) {
        echo "<option value=".$row['name'].">".$row['name']."</option>";
    }
?>  
</select>

<select id="tradable_want" class="form-control" style="border-radius: 5px; float: right; width: 49%; text-align: center;" onchange="calculateResultTrade()">
<option>Select what you want</option>
<?php 
    while ($row = mysqli_fetch_array($query2)) {
        echo "<option value=".$row['name'].">".$row['name']."</option>";
    }
?>  
</select>

<input type="text" class="form-control" id="quantity_trader" style="background: #B5B5B5; border-radius: 5px; width: 100%; text-align: center;" readonly disabled placeholder="What you will get" required="">


<script type="text/javascript">
    function calculateResultTrade() {
       //parse the values into float or int otherwise you'll get a concatenated string

       <?php

       $name_from = 'document.getElementById("tradable_have").value;';
       $name_to = 'document.getElementById("tradable_want").value;';

       $query_tradables = mysqli_query($con, "SELECT * FROM tradables WHERE name_from = '$name_from' AND name_to = '$name_to' LIMIT 1");

       while($row_tradable = mysqli_fetch_array($query_tradables)) {
            $rate_of_tradeable = $row_tradable['price'];
            $name_of_tradeable = $row_tradable['name_from'];
       }
            echo 'yes boy: '.$name_of_tradeable;
            echo 'var rate = '.$rate_of_tradeable.';';

       ?>

       var quantity = document.getElementById('quantity_input').value;

       var result = parseInt(quantity) * rate;

       //check if your result is a number
       if (!isNaN(result))
            $("#quantity_trader").val('$' + result);
    }
</script>

My error stands in this code not getting the selected name of the item:

$name_from = 'document.getElementById("tradable_have").value;';
$name_to = 'document.getElementById("tradable_want").value;';

Can anyone help or know of a way to do this?