troubleshooting Question

Display Data from form using Javascript

Avatar of djphillovesyou
djphillovesyou asked on
JavaScript
4 Comments1 Solution187 ViewsLast Modified:
Users are able to select which product they want and how many of each as well from my products page. The total is automatically calculated for the users. I was wondering how i can display the items that the users select and totals price of those items and display that at the top of my order form page(which is just a form asking for name, address and payment information).

Products page form:

<form name="orderform" id="orderform" onsubmit="javascript: orderform.action='order.htm';">
<legend>Posters</legend>
<fieldset id="products">
<table>
    <tr>
        <th><label for="photo1"><b>MLK Assassination</b></label></th>
        <th><label for="photo2"><b>Sleepy Doggy</b></label></th>
        <th><label for="photo5"><b>Big Fish</b></label></th>
    </tr>

    <tr>
        <td><img src="images/photo1.jpg" width="200" height="200"/></img></td>
<td><img src="images/photo2.jpg" width="200" height="200"/></img></td>
    <td><img src="images/photo5.jpg" width="200" height="200"/></img></td>
</tr>
<tr>
    <td>price: $35<input type="hidden" id="photo1_price" value="35.00"><br/>
    how many? <select id="photo1_quantity" name="photo1_quantity" size="1">
        <option value="5">5</option>
        <option value="4">4</option>
        <option value="3">3</option>
        <option value="2">2</option>
        <option value="1">1</option>
        <option value="0" selected>0</option>
    </select>
    </td>
    <td>price: $23<input type="hidden" id="photo2_price" value="23.00"><br/>
    how many? <select id="photo2_quantity" name="photo2_quantity" size="1">
        <option value="5">5</option>
        <option value="4">4</option>
        <option value="3">3</option>
        <option value="2">2</option>
        <option value="1">1</option>
        <option value="0" selected>0</option>
    </select>
    </td>
    <td>price: $27<input type="hidden" id="photo5_price" value="27.00"><br/>
    how many? <select id="photo5_quantity" name="photo5_quantity" size="1">
        <option value="5">5</option>
        <option value="4">4</option>
        <option value="3">3</option>
        <option value="2">2</option>
        <option value="1">1</option>
        <option value="0" selected>0</option>
    </select>
    </td>
</tr>
<tr>
    <td class="fierce" id="photo1_subtotal"></td>
    <td class="fierce" id="photo2_subtotal"></td>
    <td class="fierce" id="photo5_subtotal"></td>
</tr>

<tr>
    <th><label for="photo1"><b>MLK Assassination</b></label></th>
    <th><label for="photo2"><b>Sleepy Doggy</b></label></th>
    <th><label for="photo6"><b>The Heavens</b></label></th>
</tr>

<tr>
    <td><img src="images/photo3.jpg" width="200" height="200"/></img></td>
    <td><img src="images/photo4.jpg" width="200" height="200"/></img></td>
    <td><img src="images/photo6.jpg" width="200" height="200"/></img></td>
</tr>
<tr>
    <td>price: $34<input type="hidden" id="photo3_price" value="34.00"><br/>
    how many? <select id="photo3_quantity" name="photo3_quantity" size="1">
        <option value="5">5</option>
        <option value="4">4</option>
        <option value="3">3</option>
        <option value="2">2</option>
        <option value="1">1</option>
        <option value="0" selected>0</option>
    </select>
    </td>
    <td>price: $17<input type="hidden" id="photo4_price" value="17.00"><br/>
    how many? <select id="photo4_quantity" name="photo4_quantity" size="1">
        <option value="5">5</option>
        <option value="4">4</option>
        <option value="3">3</option>
        <option value="2">2</option>
        <option value="1">1</option>
        <option value="0" selected>0</option>
    </select>
    </td>
    <td>price: $14<input type="hidden" id="photo6_price" value="14.00"><br/>
    how many? <select id="photo6_quantity" name="photo6_quantity" size="1">
        <option value="5">5</option>
        <option value="4">4</option>
        <option value="3">3</option>
        <option value="2">2</option>
        <option value="1">1</option>
        <option value="0" selected>0</option>
    </select>
    </td>
</tr>
<tr>
    <td class="fierce" id="photo3_subtotal"></td>
    <td class="fierce" id="photo4_subtotal"></td>
    <td class="fierce" id="photo6_subtotal"></td>
</tr>
<tr id="tablefoot"><td>Total:</td><td id="ftotal"></td>
</tr>
</table>

</fieldset>
<p>
<input id="submit" type="submit" value="Place Order" />
<input id="reset" type="reset" value="Clear Order"/>
</p>

</form>

products.js

function Totals() {
var photos = ['photo1_', 'photo2_', 'photo3_', 'photo4_', 'photo5_', 'photo6_'];
var prices = 'price';
var quantities = 'quantity';
var subtotals = 'subtotal';
var total = 0;
for (var i = 0; i < photos.length; i++) {
    var price = document.getElementById(photos[i] + prices).value;
    var quantity = document.getElementById(photos[i] + quantities).value;
    document.getElementById(photos[i] + subtotals)
        .innerHTML = parseInt(price) * parseInt(quantity);
    total += price * quantity;
}
document.getElementById("ftotal").innerHTML = total;
}

function setup() {

var theForm = document.getElementById("orderform");

var amounts = document.getElementsByTagName("select");
for(var i = 0; i < amounts.length; i++){
    amounts[i].onchange = Totals;
}

}

window.onload = setup;
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros