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:
products.js
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;
JavaScript
Last Comment
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>
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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
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