Solved

Display Data from form using Javascript

Posted on 2013-11-22
4
154 Views
Last Modified: 2013-12-04
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

0
Comment
Question by:djphillovesyou
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39668543
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
0
 

Author Comment

by:djphillovesyou
ID: 39669213
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

0
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 39669319
What kind of server side processing do you use?
As you have not specified any form method, the form data should be posted using the "GET" method hence all form elements would be put to the url as querystring parameters. In your case this could be critical as there is a size limitation (about 3000 characters - but depends on the browsers implementation) - see http://www.w3schools.com/tags/att_form_method.asp

As the form data is inside the querystring, you have to simply loop through the list and generate the info from there.
0
 

Author Comment

by:djphillovesyou
ID: 39670397
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
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
modify change color of text 9 50
Google Chrome: Debugging AJAX call 6 38
Drag & Drop Error 5 31
Why is my select returning NaN 21 35
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question