将选定单选按钮中的值传递到另一个输入

Question

I currently have a data table, with data coming from the database as stated below:

<table id="vehicle" class="display" cellspacing="0" width="100%" style="text-align: center;">
    <thead>
        <tr>
            <th>Reg No</th>
            <th>Make</th>
            <th>Colour</th>
            <th>Chasis No</th>
            <th>Mileage</th>
            <th>Quantity</th>
            <th>Unit Price</th>
            <th>Actions</th>
        </tr>
    </thead>  
    <tbody>
        <?php
            $vquery = "SELECT * FROM vehicle ORDER BY arrival_date ASC"; // query the person
            $data = perform_query($db, $vquery);
            foreach ($data as $d) {
                $vid = $d['vid'];
                $regNumber = strtoupper($d['reg_no']);
                $model = ucfirst($d['make']);
                $unit_price = $d['purchase_price'];
                $colour = ucfirst($d['colour']);
                $vin_no = strtoupper($d['chasis_no']); ?>
                <tr>
                    <td><?php echo $regNumber; ?></td>
                    <td><?php echo $model; ?></td>
                    <td><?php echo $colour; ?></td>
                    <td><?php echo $vin_no; ?></td>
                    <td><input type="text" name="quantity" style="width: 100%;"></td>
                    <td>
                        <select name="">
                            <option selected>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                        </select>
                    </td>
                    <td>
                        <input type="text" id="unit_price" name="unit_price" value='<?php echo "£" . $unit_price; ?>' style="width: 100%;">
                    </td>
                    <td><input type="radio" name="selectedVehicle"/></td>
                </tr>
            <?php 
            }
        ?>
    </tbody>
</table>

Upon the user selecting the radio button stated above, the selected vehicle alongside the unit price should automatically copy into an input field in another div with a table below:

    <h4 class="panel-title">Payment Information</h4>
</div>
<div class="panel-body">
    <div class="table-responsive">
        <table class="pay-table table-bordered ">
            <tbody>
                <tr>
                    <td><font color='red'>Sub Total (*):</font></td>
                    <td><input type="text" id="sub_total" name="sub_total" style="width: 100%;" value="<?php echo $selected_vid  ?>"></td>
                </tr>
                <tr>
                    <td><font color='red'>Vehicle Reg NO (*):</font></td>
                    <td><input type="text" id="extras" name="extras" style="width: 100%;" readonly></td>
                </tr>

I have a script that goes through the radioboxes and check which is selected and it alerts the user with the selected vehicle reg no, however I want upon selecting a radio box it should copy the unit price into the Subtotal field.

<script>
    rdoBoxes = document.getElementsByName("selectedVehicle"); 
    for (var i = 0; i < rdoBoxes.length; i++) {
        var rdoBox = rdoBoxes[i];
        rdoBox.onclick = function() {
            var currentRow = this.parentNode.parentNode;
            var secondColumn = currentRow.getElementsByTagName("td")[0];

            alert("You have selected Vehicle Reg No: " + secondColumn.textContent );
        };
    } 
</script>

Any tips and help will be highly appreciated. Here is the JSfiddle http://jsfiddle.net/follypimpz/d5xsq1b5/

Answer 1

You can do as below:

DEMO HERE

$('input[type="radio"]').on('change',function(){
    var parent=$(this).parents('tr'); //get the parent tr
    var vehicleNo=parent.find('td:first').text(); //get the vehicle number which is first td

    var qty=parseInt(parent.find('td select option:selected').text()); //get the quantity
    var unitPrice=parseInt(parent.find('td:nth-child(7) input').val());//get the unitPrice
    var total=qty*unitPrice;//multiply the figures

    $('#sub_total').val(total);//assign it to respective contents
    $('#extras').val(vehicleNo);
});