asked on

Display Data from form using Javascript

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>

Open in new window

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;

Open in new window

Rainer Jeschor

Hi,
something like this?
http://jsfiddle.net/EE_RainerJ/wAuU8/

What I did:
Just added a div on top, adjusted your HTML to be compliant, added hidden photox_text elements for the labels and adjusted the total function to generate a dynamical HTML table and set the div innerHtml with the table.

HTH
Rainer

djphillovesyou

ASKER

Thanks for your reply. how would I display those results on the page that comes up after i hit the submit button. which is my order.htm page where the user inputs information such as name, address, payment information.

<article>
        
    <form>

            <legend>Enter The Shipping Address</legend>
        
        <fieldset id="custInfo">

            <label id="firstNameLabel" for="firstName">First Name:</label>
            <input type="text" name="fname" id="firstName"  placeholder="First Name" required/>

            
            <label id="lnameLabel" for="lname">Last Name:</label>
            <input type="text" name="lname" id="lastName" placeholder="Last Name" required/>
            
            <label id="saddressLabel" for="saddress">Street Address:</label>
            <input name="saddress" id="saddress"  required/>
            
            
            <label id="scityLabel" for="scity">City:</label>
            <input type="text" name="scity" id="scity" placeholder="Tulsa" required/>
            
            
            <label id="sstateLabel" for="sstate">State:</label>
            <select id="sstate" name="sstate" required> 
                    <option value="" selected="selected">Select a State</option> 
                    <option value="AL">Alabama</option> 
                    <option value="AK">Alaska</option> 
                    <option value="AZ">Arizona</option> 
                    <option value="AR">Arkansas</option> 
                    <option value="CA">California</option> 
                    <option value="CO">Colorado</option> 
                    <option value="CT">Connecticut</option> 
                    <option value="DE">Delaware</option> 
                    <option value="DC">District Of Columbia</option> 
                    <option value="FL">Florida</option> 
                    <option value="GA">Georgia</option> 
                    <option value="HI">Hawaii</option> 
                    <option value="ID">Idaho</option> 
                    <option value="IL">Illinois</option> 
                    <option value="IN">Indiana</option> 
                    <option value="IA">Iowa</option> 
                    <option value="KS">Kansas</option> 
                    <option value="KY">Kentucky</option> 
                    <option value="LA">Louisiana</option> 
                    <option value="ME">Maine</option> 
                    <option value="MD">Maryland</option> 
                    <option value="MA">Massachusetts</option> 
                    <option value="MI">Michigan</option> 
                    <option value="MN">Minnesota</option> 
                    <option value="MS">Mississippi</option> 
                    <option value="MO">Missouri</option> 
                    <option value="MT">Montana</option> 
                    <option value="NE">Nebraska</option> 
                    <option value="NV">Nevada</option> 
                    <option value="NH">New Hampshire</option> 
                    <option value="NJ">New Jersey</option> 
                    <option value="NM">New Mexico</option> 
                    <option value="NY">New York</option> 
                    <option value="NC">North Carolina</option> 
                    <option value="ND">North Dakota</option> 
                    <option value="OH">Ohio</option> 
                    <option value="OK">Oklahoma</option> 
                    <option value="OR">Oregon</option> 
                    <option value="PA">Pennsylvania</option> 
                    <option value="RI">Rhode Island</option> 
                    <option value="SC">South Carolina</option> 
                    <option value="SD">South Dakota</option> 
                    <option value="TN">Tennessee</option> 
                    <option value="TX">Texas</option> 
                    <option value="UT">Utah</option> 
                    <option value="VT">Vermont</option> 
                    <option value="VA">Virginia</option> 
                    <option value="WA">Washington</option> 
                    <option value="WV">West Virginia</option> 
                    <option value="WI">Wisconsin</option> 
                    <option value="WY">Wyoming</option>
            </select>

            
            
            <label id="szipLabel" for="szip">Zip Code:</label>
            <input name="szip" id="szip" placeholder="xxxxx (-xxxx)"  required/>
            

            
            

        
        </fieldset>
        
        <legend>Billing Address</legend>
        
        <fieldset id="billingInfo">
            
            <label id="baddressLabel" for="baddress">Street Address:</label>
            <input name="baddress" id="baddress"  required/>
            
            <label id="bcityLabel" for="bcity">City:</label>
            <input type="text" name="bcity" id="bcity" placeholder="Tulsa" required/>
            
            <label id="bstateLabel" for="bstate">State:</label>            
            <select id="bstate" name="bstate" required> 
                    <option value="" selected="selected">Select a State</option> 
                    <option value="AL">Alabama</option> 
                    <option value="AK">Alaska</option> 
                    <option value="AZ">Arizona</option> 
                    <option value="AR">Arkansas</option> 
                    <option value="CA">California</option> 
                    <option value="CO">Colorado</option> 
                    <option value="CT">Connecticut</option> 
                    <option value="DE">Delaware</option> 
                    <option value="DC">District Of Columbia</option> 
                    <option value="FL">Florida</option> 
                    <option value="GA">Georgia</option> 
                    <option value="HI">Hawaii</option> 
                    <option value="ID">Idaho</option> 
                    <option value="IL">Illinois</option> 
                    <option value="IN">Indiana</option> 
                    <option value="IA">Iowa</option> 
                    <option value="KS">Kansas</option> 
                    <option value="KY">Kentucky</option> 
                    <option value="LA">Louisiana</option> 
                    <option value="ME">Maine</option> 
                    <option value="MD">Maryland</option> 
                    <option value="MA">Massachusetts</option> 
                    <option value="MI">Michigan</option> 
                    <option value="MN">Minnesota</option> 
                    <option value="MS">Mississippi</option> 
                    <option value="MO">Missouri</option> 
                    <option value="MT">Montana</option> 
                    <option value="NE">Nebraska</option> 
                    <option value="NV">Nevada</option> 
                    <option value="NH">New Hampshire</option> 
                    <option value="NJ">New Jersey</option> 
                    <option value="NM">New Mexico</option> 
                    <option value="NY">New York</option> 
                    <option value="NC">North Carolina</option> 
                    <option value="ND">North Dakota</option> 
                    <option value="OH">Ohio</option> 
                    <option value="OK">Oklahoma</option> 
                    <option value="OR">Oregon</option> 
                    <option value="PA">Pennsylvania</option> 
                    <option value="RI">Rhode Island</option> 
                    <option value="SC">South Carolina</option> 
                    <option value="SD">South Dakota</option> 
                    <option value="TN">Tennessee</option> 
                    <option value="TX">Texas</option> 
                    <option value="UT">Utah</option> 
                    <option value="VT">Vermont</option> 
                    <option value="VA">Virginia</option> 
                    <option value="WA">Washington</option> 
                    <option value="WV">West Virginia</option> 
                    <option value="WI">Wisconsin</option> 
                    <option value="WY">Wyoming</option>
            </select>
            
            
            <label id="bzipLabel" for="bzip">Zip Code:</label>
            <input name="bzip" id="bzip" placeholder="xxxxx (-xxxx)" required/>
        
        
        
        </fieldset>
        
        
        <legend>Credit/Debit Card</legend>
        
        <fieldset id="CreditInfo">
            
            <label id="ccardLabel" for="ccardtype">Credit Card Type:</label>
            <select id="ccardtype" name="ccardtype" required> 
                    <option value="" selected="selected"></option> 
                    <option value="AL">Visa</option> 
                    <option value="AK">AMEX</option> 
                    <option value="AZ">Discovery</option>
                    <option value="AZ">MasterCard</option>
            </select>
            
            
            <label id="ccardnoLabel" for="ccardno">Credit Card Number:</label>
            <input name="ccardno" id="ccardno" required/>
            
            
            <label id="ccardexpLabel" for="ccardexp">Credit Card Exp. Date:</label>
            <input name="ccardexp" id="ccardexp" placeholder="mm/yy" required/>
        
        
        
        </fieldset>
        
                    <p>
                <button id="submitButton" onclick="return validateForm();">Submit</button>
                <button id="clearButton" type="reset" >Clear</button>
            
            </p>

        
        </form>
    
    
    
    
    </article>

Open in new window

ASKER CERTIFIED SOLUTION

Rainer Jeschor

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

djphillovesyou

ASKER

I guess the get method would be best.. I just would like users to be able to see an order summary on the order form page. I think what i'm trying to do is above my noob knowledge. Anyways i do appreciate your help. You gave me understanding on some other things that i could use on future projects. thanks