How to Print a Javascript Variable in a Table?

Question

Hello all,

In a table I'm making I have a Radio Button variable named 'cost' and I want to print the 'cost' variable in the footer of the form in a sentence like 'Make the check out for <>'

Please, can someone give be some guidance as to how to do it? Many many thanks, TEH

<table id="gradient-style" summary="Throttle Conversion">
    <thead>
        <tr>
            <th scope="col">Existing Throttle</th>
            <th scope="col">Upgrade To</th>
            <th scope="col">Additional Features</th>
            <th scope="col"></th>
            <th scope="col"></th>
            <th scope="col">Upgrade Price</th>
            <th scope="col">Select One</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td><strong><center>29 Functions</td>
            <td><strong><center>Simplex Radio</td>
            <td><strong><center>Duplex Radio</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>DT400</td>
            <td>DT402</td>
            <td><center>*</td>
            <td></td>
            <td></td>
            <td>$25.00</td>
            <td><input type="radio" name="cost" value="25"></td>
        </tr>
        <tr>
            <td>DT400</td>
            <td>DT402R</td>
            <td><center>*</td>
            <td><center>*</td>
            <td></td>
            <td>$50.00</td>
            <td><input type="radio" name="cost" value="50"></td>
        </tr>
        <tr>
            <td>DT400</td>
            <td>DT40D</td>
            <td><center>*</td>
            <td></td>
            <td><center>*</td>
            <td>$65.00</td>
            <td><input type="radio" name="cost" value="65"></td>
        </tr>
        <tr>
            <td>DT400R</td>
            <td>DT402R</td>
            <td><center>*</td>
            <td><center>*</td>
            <td></td>
            <td>$25.00</td>
            <td><input type="radio" name="cost" value="25"></td>
        </tr>
          <tr>
            <td>DT400R</td>
            <td>DT402D</td>
            <td><center>*</td>
            <td></td>
            <td><center>*</td>
            <td>$65.00</td>
            <td><input type="radio" name="cost" value="65"></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
       <td colspan="7">  Based on your selection, the conversion cost is <?php $_post["cost"]?>      </td>
        </tr>
    </tfoot>
</table>

Answer 1

This would do it:

var table = document.getElementById('gradient-style');
var inputs = table.getElementsByTagName('input');
var radios = [];
var span = document.getElementById('cost_marker');

for(var x = 0; x < inputs.length; x++) {
    if(inputs[x].type == 'radio' && inputs[x].name == 'cost') {
        inputs[x].onclick = function() {
            span.innerHTML = '$' + parseFloat(this.value).toFixed(2);
        }
    }
}

The only change you need to make to your markup is to add a span tag around the cost with an ID of 'cost_marker' so that Javascript knows where to update the cost:

<tr>
    <td colspan="7">
    Based on your selection, the conversion cost is 
    <span id='cost_marker'><?php $_post["cost"]?></span>
    </td>
</tr>

And here's an example of it at work.