Solved

Display Data from form using Javascript

Posted on 2013-11-22
4
140 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
  • 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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now