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

时间:2015-06-09 12:05:13

标签: javascript php jquery html

我目前有一个数据表,数据来自数据库,如下所述:

<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>

当用户选择上述单选按钮时,所选车辆和单价一起应自动复制到另一个div的输入栏中,并带有下表:

    <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>

我有一个脚本通过无线电控制器并检查选择了哪个,它会通过选择的车辆注册号警告用户,但是我想在选择一个无线电盒时应该将单价复制到小计字段中。

<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>

任何提示和帮助都将受到高度赞赏。这是JSfiddle http://jsfiddle.net/follypimpz/d5xsq1b5/

1 个答案:

答案 0 :(得分:0)

您可以执行以下操作:

<强> 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);
});