Delivery-Address Page

A delivery-address page displays the customer information (including mailing address) and enables entering a shipping address different from the customer address.
For an eCommerce delivery-address page, this topic contains the following:

A screen capture of the relevant part of an actual delivery-address page
The inner template on which the page is based
The Webpage source generated by tqTag Web Suite for the relevant parts of the page

Delivery-Address Screen Capture

The labels on the screen-capture indicate where the following tqTags are implemented:

countryList — displays a drop-down list of countries from which site visitors can select the country that they need
stateList — displays a drop-down list of U.S.A. states from which site visitors can select the state that they need

To access this page online, do the following:

Go to http://israelmint.com/?section=185 (as shown in Products Page) and select one or more products.
Continue as shown in Shopping Cart and then click Proceed to Checkout.
As shown in User ID Page, do one of the following:
- If you already have a user ID, type the user ID and password, and then click enter.
- Enter the information under New client registration, and then click submit.

Inner Template #464

The template for this delivery-address page is not accessible through the online Website.

<tqtag type="alternative" name="alternative0">
    <script type="text/javascript">location.href='@linkToStep2@'</script>
</tqtag>
<tqtag type="shoppingCartInfo" alternativeTag="alternative0" alternativeCondition="isNotLoggedIn">
<form method="post" action="@linkToStep4@" name="shippingFrm" onsubmit="return checkRegisterForm();">
<input type="hidden" name="shippingCountryID" id="shippingCountryID" value="" />
<input type="hidden" name="saveToSession" value="shippingInfo" />
<div class="Content">
    <div class="ShoppingCart">
        <div class="Process">
            <div class="Checkout">Check out process</div>
            <ul class="Levels">
                <li class="Level1"><a href="@linkToStep1@">shopping cart</a></li>
                <li class="Level2"><a href="@linkToStep2@">user identification</a></li>
                <li class="Level3"><a class="selected" href="@linkToStep3@">delivery address</a></li>
                <li class="Level4"><a href="@linkToStep4@">means of payment</a></li>
            </ul>
        </div>
        <div class="DeliveryAddress">
            <div class="Boxes">
                <div class="Box" style="margin-right:30px;">
                    <h2 style="padding-top:10px;">Customer Information</h2>
                    <h3> </h3>
                    <div class="FormArea">
                        <div class="FormRow">
                            <div class="FieldName">First name</div>
                            <div class="FieldControl"><input name="fName" id="fName" value="@custfName@" type="text" onfocus="changeBackroundColor(this.id,'white');" /></div>
                            <div class="Validation"> </div>
                        </div>
                        <div class="FormRow">
                            <div class="FieldName">Last name</div>
                            <div class="FieldControl"><input name="lName" id="lName" value="@custlName@" type="text" onfocus="changeBackroundColor(this.id,'white');" /></div>
                            <div class="Validation"> </div>
                        </div>
                        <div class="FormSeperator"></div>
                        <div class="FormRow">
                            <div class="FieldName">Address</div>
                            <div class="FieldControl"><input name="address" id="address" value="@custaddress@" type="text" onfocus="changeBackroundColor(this.id,'white');" /></div>
                            <div class="Validation"> </div>
                        </div>
                        <div class="FormRow">
                            <div class="FieldName">City</div>
                            <div class="FieldControl"><input name="city" id="city" value="@custcity@" type="text" onfocus="changeBackroundColor(this.id,'white');" /></div>
                            <div class="Validation"> </div>
                        </div>
                        <div class="FormRow">
                            <div class="FieldName">State/Prov.</div>
                            <div class="FieldControl">
                                <select name="id" id="id" size="1" style="width:200px; float:left;" onfocus="changeBackroundColor(this.id,'white');" >
                                <tqtag type="stateList" name="state">
                                    <option value="@id@" id="b@id@">@title@</option>
                                </tqtag>
                                </select>
                            </div>
                            <div class="Validation"> </div>
                                <script type="text/javascript">
                                    document.getElementById("b@custstateID@").selected = true;
                                </script>
                            </div>
                            <div class="FormRow">
                                <div class="FieldName">Country</div>
                                <div class="FieldControl">
                                    <select name="countryID" id="countryID" size="1" style="width:200px; float:left;" onfocus="changeBackroundColor(this.id,'white');" >
                                        <tqtag type="countryList" name="country">
                                            <option value="@countryID@" id="b@countryID@">@countryNameEn@</option>
                                        </tqtag>
                                </select>
                            </div>
                            <div class="Validation"> </div>
                                <script type="text/javascript">
                                    document.getElementById("b@custcountryID@").selected = true;
                                </script>
                            </div>
                            <div class="FormRow">
                                <div class="FieldName">Zip code</div>
                                <div class="FieldControl"><input name="postalCode" id="postalCode" value="@custpostalCode@" type="text" style="width:100px;" onfocus="changeBackroundColor(this.id,'white');" /></div>
                            </div>
                            <div class="FormSeperator"></div>
                            <div class="FormRow">
                                <div class="FieldName">Email</div>
                                <div class="FieldControl"><input name="email" id="email" value="@custemail@" type="text" onfocus="changeBackroundColor(this.id,'white');" /></div>
                                <div class="Validation"> </div>
                            </div>
                            <div class="FormRow">
                                <div class="FieldName">Telephone</div>
                                <div class="FieldControl"><input name="phone" id="phone" value="@custphone@" type="text" onfocus="changeBackroundColor(this.id,'white');" /></div>
                                <div class="Validation"> </div>
                            </div>
                            <div class="FormRow">
                                <div class="FieldName">Fax</div>
                                <div class="FieldControl"><input name="fax" value="@custfax@" type="text" /></div>
                            </div>
                            <div class="BulletInfo"><img src="/templates/t442/images/form-bullet.gif" alt="required field" /> <span class="red">= required</span></div>
                        </div>
                </div>
                <div class="Box">
                    <h2 style="padding-top:10px;">Shipping Information</h2>
                    <h3>(left unfilled, product will be sent to same address as the receipt)</h3>
                    <div class="FormArea">
                        <div class="FormRow">
                            <div class="FieldName">First name</div>
                            <div class="FieldControl"><input type="text" name="fNameShipping" /></div>
                        </div>
                            <div class="FormRow">
                                <div class="FieldName">Last name</div>
                                <div class="FieldControl"><input type="text" name="lNameShipping" /></div>
                            </div>
                            <div class="FormSeperator"></div>
                            <div class="FormRow">
                                <div class="FieldName">Address</div>
                                <div class="FieldControl"><input type="text" name="addressShipping" /></div>
                            </div>
                            <div class="FormRow">
                                <div class="FieldName">City</div>
                                <div class="FieldControl"><input type="text" name="cityShipping" /></div>
                            </div>
                            <div class="FormRow">
                                <div class="FieldName">State/Prov.</div>
                                <div class="FieldControl">
                                    <select name="stateIDShipping" id="stateIDShipping" size="1" style="width:200px; float:left;" >
                                        <tqtag type="stateList" name="stateShipping">
                                            <option value="@id@" id="@id@">@title@</option>
                                        </tqtag>
                                    </select>
                                </div>
                            </div>
                            <div class="FormRow">
                                <div class="FieldName">Country</div>
                                <div class="FieldControl">
                                    <select name="countryIDShipping" id="countryIDShipping" size="1" style="width:200px; float:left;" >
                                        <option value="0">Please select a country</option>
                                        <tqtag type="countryList" name="countryShipping">
                                            <option value="@countryID@" id="@countryID@">@countryNameEn@</option>
                                        </tqtag>
                                    </select>
                                </div>
                            </div>
                            <div class="FormRow">
                                <div class="FieldName">Zip code</div>
                                <div class="FieldControl"><input style="width:100px;" type="text" name="postalShipping" /></div>
                            </div>
                            <div class="FormSeperator"></div>
                            <div class="FormRow">
                                <div class="FieldName">Email</div>
                                <div class="FieldControl"><input type="text" name="emailShipping" /></div>
                            </div>
                            <div class="FormRow">
                                <div class="FieldName">Telephone</div>
                                <div class="FieldControl"><input type="text" name="phoneShipping" /></div>
                            </div>
                            <div class="FormRow">
                                <div class="FieldName">Fax</div>
                                <div class="FieldControl"><input type="text" name="faxShipping" /></div>
                            </div>
                        </div>
                    </div>
                </div>
            <div class="Buttons">
                <div class="Button">
                    <div class="L"></div>
                    <div class="C"><button type="reset" style="background:transparent;border:none;">reset</div>
                    <div class="R"></div>
                </div>
                <div class="Button" style="float:right">
                    <div class="L"></div>
                    <div class="C red"><button type="submit" class="red" style="background:transparent;border:none;">submit</button></div>
                    <div class="R"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</form>
</tqtag>
<script type="text/javascript">
function checkRegisterForm() {
    var emailOkay = 0;
    var fNameOkay = 0;
    var lNameOkay = 0;
    var addressOkay = 0;
    var cityOkay = 0;
    var phoneOkay = 0;
    if (checkEmail('email')===true) emailOkay=1; else emailOkay=0;
    if (checkInputData("fName","first name","fNameFail",2,"errorField","")===true) fNameOkay=1; else fNameOkay=0;
    if (checkInputData("lName","last name","lNameFail",2,"errorField","")===true) lNameOkay=1; else lNameOkay=0;
    if (checkInputData("address","address","addressFail",4,"errorField","")===true) addressOkay=1; else addressOkay=0;
    if (checkInputData("city","city","cityFail",4,"errorField","")===true) cityOkay=1; else cityOkay=0;
    if (checkInputData("phone","phone","cityFail",4,"errorField","")===true) phoneOkay=1; else phoneOkay=0;
    if ((emailOkay == 1) && (phoneOkay == 1) && (fNameOkay==1)&& (lNameOkay==1)&& (addressOkay==1)&& (cityOkay==1)) {
        document.shippingFrm.shippingCountryID.value =
            (document.shippingFrm.countryIDShipping.value != 0)
            ?     document.shippingFrm.countryIDShipping.value
            :   document.shippingFrm.countryID.value;
        return true;
    } else {
        alert ('There are incorrect or imcomplete fields');
        return false;
    }
}
</script>

Checkout-Process Source Code

To access the complete source code for this page, do the following:

Perform the instructions under Delivery-Address Screen Capture above.
Use your browser commands to view the page source.

NOTE: See also the similar Registration Source Code (partial) under User ID Page.

<form method="post" action="https://israelmint-com.ezadmin.eu/?section=202" name="shippingFrm" onsubmit="return checkRegisterForm();">
    <input type="hidden" name="shippingCountryID" id="shippingCountryID" value="" />
    <input type="hidden" name="saveToSession" value="shippingInfo" />
<div class="Content">
    <div class="ShoppingCart">
       <div class="Process">
           <div class="Checkout">Check out process</div>
           <ul class="Levels">
               <li class="Level1"><a href="https://israelmint-com.ezadmin.eu/?section=199">shopping cart</a></li>
               <li class="Level2"><a href="https://israelmint-com.ezadmin.eu/?section=200">user identification</a></li>
               <li class="Level3"><a class="selected" href="https://israelmint-com.ezadmin.eu/?section=201">delivery address</a></li>
               <li class="Level4"><a href="https://israelmint-com.ezadmin.eu/?section=202">means of payment</a></li>
           </ul>
       </div>

Delivery-Address Page

Delivery-Address Screen Capture

Inner Template #464

Checkout-Process Source Code

Related Topics

User Notes

Topic: Delivery-Address Page