Menu
I have been trying to get the option with 8×10 to show up in page2 in firefox browser.
i have been going over n over a video i got off youtube n theirs nothing i can see that needs changing in code i just want to get 8×10 to be displayed next to you selected: in page2.html here is a pic below with my code.
[code]<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script>
function passval()
{
var selecttext=document.getElementByid(“mytext”).value;
localStorage.setItem(“ddvalue”,selecttext);
return true;
}
</script>
</head>
<body>
<h1>Photos</h1>
<form action=”./html/page2.html”>
<select id=”mytext”>
<option selected disabled>Photos</option>
<option>8×10 $25</option>
<option>5×7 $10</option>
<option selected disabled>Giftcards</option>
<option>6×4 $4</option>
<option>5×7 $5</option>
</select>
<input type=”submit” value=”submit” onclick=”passval()”>
</form>
</body>
</html>
page2.html
[code]
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
</head>
<body>
you selected:<span id=”results”></span>
<script>
document.getElementByid(“results”).innerHTML=localStorage.getItem(“ddvalue”);
</script>
</body>
</html>
If you select option 8x10.... are you getting 8x10 in page2 if you try it?[/quote]Yes I do. This makes it so difficult to find the error.
<meta charset="utf-8" />`[code]
<h1>Photos</h1>
<form action="./html/page2.html">
<select id="mytext">
<option disabled>Photos</option>
<option>8x10 $25</option>
<option>5x7 $10</option>
<option disabled>Giftcards</option>
<option>6x4 $4</option>
<option>5x7 $5</option>
</select>
<input type="submit" value="submit" onclick="passval()">
</form>
[code]
im only asking because im going to use this options for selling my photos online etc.
also thankyou to everyone else for helping me. Mixed Content: The page at 'https://testingwebsite999.000webhostapp.com/ ' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic '. This request has been blocked; the content must be served over HTTPS.
(index):1 Mixed Content: The page at 'https://testingwebsite999.000webhostapp.com/ ' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js '. This request has been blocked; the content must be served over HTTPS.
jquery.shop.js:647 Uncaught ReferenceError: jQuery is not defined
at jquery.shop.js:647[/quote]
saveFormData: function("form") {`<i>
</i><!DOCTYPE html><html lang="en"><head><title> Test Page 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- For: https://www.webdeveloper.com/d/387004-need-help-with-code-below -->
</head><body>
<h1>Photos</h1>
<select id='sbox'>
<optgroup label="Photos">
<option value="8x10 $25"> 8x10 $25 </option>
<option value="5x7 $10"> 5x7 $10 </option>
</optgroup>
<optgroup label="Giftcards">
<option value="6x4 $4"> 6x4 $4 </option>
<option value="5x7 $5"> 5x7 $5 </option>
</optgroup>
</select>
<input type="button" value="submit" onclick="passval()">
<script>
function passval() {
let info = document.getElementById('sbox').value;
let uri = './pathto/testPage2.html?info='+info;
// let uri_enc = encodeURI(uri);
// following opens existing site
// var x = window.open(uri_enc,"","top=50,left=100,height=250,width=350");
var x = window.open(uri,""); // ,"top=50,left=100,height=250,width=350");
}
</script>
</body></html>
<i>
</i><!DOCTYPE html><html lang="en"><head><title> Test Page 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- For: https://www.webdeveloper.com/d/387004-need-help-with-code-below -->
<style>
</style>
</head><body>
<h1> Information passed from Test Page 2</title>
<div id="info"></div>
<script>
// https://gomakethings.com/how-to-get-the-value-of-a-querystring-with-native-javascript/
/**
* Get the value of a querystring
* @param {String} field The field to get the value of
* @param {String} url The URL to get the value from (optional)
* @return {String} The field value
*/
var getQueryString = function ( field, url ) {
var href = url ? url : window.location.href;
var reg = new RegExp( '[?&]' + field + '=([^&#]*)', 'i' );
var string = reg.exec(href);
return string ? string[1] : null;
};
function init() {
var passedInformation = getQueryString('info');
let uri_dec = decodeURI(passedInformation);
alert(passedInformation+'n'+uri_dec);
document.getElementById('info').innerHTML = passedInformation +'<br>'+uri_dec;
}
init();
</script>
</body></html>
<i>
</i>(function( $ ) {
$.Shop = function( element ) {
this.$element = $( element );
this.init();
};
<i> </i>$.Shop.prototype = {
<i> </i> init: function() {
<i> </i>
<i> </i> // Properties
<i> </i>
<i> </i> this.cartPrefix = "winery-"; // Prefix string to be prepended to the cart's name in the session storage
<i> </i> this.cartName = this.cartPrefix + "cart"; // Cart name in the session storage
<i> </i> this.shippingRates = this.cartPrefix + "shipping-rates"; // Shipping rates key in the session storage
<i> </i> this.total = this.cartPrefix + "total"; // Total key in the session storage
<i> </i> this.storage = sessionStorage; // shortcut to the sessionStorage object
<i> </i>
<i> </i>
<i> </i> this.$formAddToCart = this.$element.find( "form.add-to-cart" ); // Forms for adding items to the cart
<i> </i> this.$formCart = this.$element.find( "#shopping-cart" ); // Shopping cart form
<i> </i> this.$checkoutCart = this.$element.find( "#checkout-cart" ); // Checkout form cart
<i> </i> this.$checkoutOrderForm = this.$element.find( "#checkout-order-form" ); // Checkout user details form
<i> </i> this.$shipping = this.$element.find( "#sshipping" ); // Element that displays the shipping rates
<i> </i> this.$subTotal = this.$element.find( "#stotal" ); // Element that displays the subtotal charges
<i> </i> this.$shoppingCartActions = this.$element.find( "#shopping-cart-actions" ); // Cart actions links
<i> </i> this.$updateCartBtn = this.$shoppingCartActions.find( "#update-cart" ); // Update cart button
<i> </i> this.$emptyCartBtn = this.$shoppingCartActions.find( "#empty-cart" ); // Empty cart button
<i> </i> this.$userDetails = this.$element.find( "#user-details-content" ); // Element that displays the user information
<i> </i> this.$paypalForm = this.$element.find( "#paypal-form" ); // PayPal form
<i> </i>
<i> </i>
<i> </i> this.currency = "&euro;"; // HTML entity of the currency to be displayed in the layout
<i> </i> this.currencyString = "€"; // Currency symbol as textual string
<i> </i> this.paypalCurrency = "EUR"; // PayPal's currency code
<i> </i> this.paypalBusinessEmail = "[email protected]"; // Your Business PayPal's account email address
<i> </i> this.paypalURL = "https://www.sandbox.paypal.com/cgi-bin/webscr"; // The URL of the PayPal's form
<i> </i>
<i> </i> // Object containing patterns for form validation
<i> </i> this.requiredFields = {
<i> </i> expression: {
<i> </i> value: /^([w-.]+)@((?:[w]+.)+)([a-z]){2,4}$/
<i> </i> },
<i> </i>
<i> </i> str: {
<i> </i> value: ""
<i> </i> }
<i> </i>
<i> </i> };
<i> </i>
<i> </i> // Method invocation
<i> </i>
<i> </i> this.createCart();
<i> </i> this.handleAddToCartForm();
<i> </i> this.handleCheckoutOrderForm();
<i> </i> this.emptyCart();
<i> </i> this.updateCart();
<i> </i> this.displayCart();
<i> </i> this.deleteProduct();
<i> </i> this.displayUserDetails();
<i> </i> this.populatePayPalForm();
<i> </i>
<i> </i>
<i> </i> },
<i> </i>
<i> </i> // Public methods
<i> </i>
<i> </i> // Creates the cart keys in the session storage
<i> </i>
<i> </i> createCart: function() {
<i> </i> if( this.storage.getItem( this.cartName ) == null ) {
<i> </i>
<i> </i> var cart = {};
<i> </i> cart.items = [];
<i> </i>
<i> </i> this.storage.setItem( this.cartName, this._toJSONString( cart ) );
<i> </i> this.storage.setItem( this.shippingRates, "0" );
<i> </i> this.storage.setItem( this.total, "0" );
<i> </i> }
<i> </i> },
<i> </i>
<i> </i> // Appends the required hidden values to the PayPal's form before submitting
<i> </i>
<i> </i> populatePayPalForm: function() {
<i> </i> var self = this;
<i> </i> if( self.$paypalForm.length ) {
<i> </i> var $form = self.$paypalForm;
<i> </i> var cart = self._toJSONObject( self.storage.getItem( self.cartName ) );
<i> </i> var shipping = self.storage.getItem( self.shippingRates );
<i> </i> var numShipping = self._convertString( shipping );
<i> </i> var cartItems = cart.items;
<i> </i> var singShipping = Math.floor( numShipping / cartItems.length );
<i> </i>
<i> </i> $form.attr( "action", self.paypalURL );
<i> </i> $form.find( "input[name='business']" ).val( self.paypalBusinessEmail );
<i> </i> $form.find( "input[name='currency_code']" ).val( self.paypalCurrency );
<i> </i>
<i> </i> for( var i = 0; i < cartItems.length; ++i ) {
<i> </i> var cartItem = cartItems[i];
<i> </i> var n = i + 1;
<i> </i> var name = cartItem.product;
<i> </i> var price = cartItem.price;
<i> </i> var qty = cartItem.qty;
<i> </i>
<i> </i> $( "<div/>" ).html( "<input type='hidden' name='quantity_" + n + "' value='" + qty + "'/>" ).
<i> </i> insertBefore( "#paypal-btn" );
<i> </i> $( "<div/>" ).html( "<input type='hidden' name='item_name_" + n + "' value='" + name + "'/>" ).
<i> </i> insertBefore( "#paypal-btn" );
<i> </i> $( "<div/>" ).html( "<input type='hidden' name='item_number_" + n + "' value='SKU " + name + "'/>" ).
<i> </i> insertBefore( "#paypal-btn" );
<i> </i> $( "<div/>" ).html( "<input type='hidden' name='amount_" + n + "' value='" + self._formatNumber( price, 2 ) + "'/>" ).
<i> </i> insertBefore( "#paypal-btn" );
<i> </i> $( "<div/>" ).html( "<input type='hidden' name='shipping_" + n + "' value='" + self._formatNumber( singShipping, 2 ) + "'/>" ).
<i> </i> insertBefore( "#paypal-btn" );
<i> </i>
<i> </i> }
<i> </i>
<i> </i>
<i> </i>
<i> </i> }
<i> </i> },
<i> </i>
<i> </i> // Displays the user's information
<i> </i>
<i> </i> displayUserDetails: function() {
<i> </i> if( this.$userDetails.length ) {
<i> </i> if( this.storage.getItem( "shipping-name" ) == null ) {
<i> </i> var name = this.storage.getItem( "billing-name" );
<i> </i> var email = this.storage.getItem( "billing-email" );
<i> </i> var city = this.storage.getItem( "billing-city" );
<i> </i> var address = this.storage.getItem( "billing-address" );
<i> </i> var zip = this.storage.getItem( "billing-zip" );
<i> </i> var country = this.storage.getItem( "billing-country" );
<i> </i>
<i> </i> var html = "<div class='detail'>";
<i> </i> html += "<h2>Billing and Shipping</h2>";
<i> </i> html += "<ul>";
<i> </i> html += "<li>" + name + "</li>";
<i> </i> html += "<li>" + email + "</li>";
<i> </i> html += "<li>" + city + "</li>";
<i> </i> html += "<li>" + address + "</li>";
<i> </i> html += "<li>" + zip + "</li>";
<i> </i> html += "<li>" + country + "</li>";
<i> </i> html += "</ul></div>";
<i> </i>
<i> </i> this.$userDetails[0].innerHTML = html;
<i> </i> } else {
<i> </i> var name = this.storage.getItem( "billing-name" );
<i> </i> var email = this.storage.getItem( "billing-email" );
<i> </i> var city = this.storage.getItem( "billing-city" );
<i> </i> var address = this.storage.getItem( "billing-address" );
<i> </i> var zip = this.storage.getItem( "billing-zip" );
<i> </i> var country = this.storage.getItem( "billing-country" );
<i> </i>
<i> </i> var sName = this.storage.getItem( "shipping-name" );
<i> </i> var sEmail = this.storage.getItem( "shipping-email" );
<i> </i> var sCity = this.storage.getItem( "shipping-city" );
<i> </i> var sAddress = this.storage.getItem( "shipping-address" );
<i> </i> var sZip = this.storage.getItem( "shipping-zip" );
<i> </i> var sCountry = this.storage.getItem( "shipping-country" );
<i> </i>
<i> </i> var html = "<div class='detail'>";
<i> </i> html += "<h2>Billing</h2>";
<i> </i> html += "<ul>";
<i> </i> html += "<li>" + name + "</li>";
<i> </i> html += "<li>" + email + "</li>";
<i> </i> html += "<li>" + city + "</li>";
<i> </i> html += "<li>" + address + "</li>";
<i> </i> html += "<li>" + zip + "</li>";
<i> </i> html += "<li>" + country + "</li>";
<i> </i> html += "</ul></div>";
<i> </i>
<i> </i> html += "<div class='detail right'>";
<i> </i> html += "<h2>Shipping</h2>";
<i> </i> html += "<ul>";
<i> </i> html += "<li>" + sName + "</li>";
<i> </i> html += "<li>" + sEmail + "</li>";
<i> </i> html += "<li>" + sCity + "</li>";
<i> </i> html += "<li>" + sAddress + "</li>";
<i> </i> html += "<li>" + sZip + "</li>";
<i> </i> html += "<li>" + sCountry + "</li>";
<i> </i> html += "</ul></div>";
<i> </i>
<i> </i> this.$userDetails[0].innerHTML = html;
<i> </i>
<i> </i> }
<i> </i> }
<i> </i> },
<i> </i> // Delete a product from the shopping cart
<i> </i> deleteProduct: function() {
<i> </i> var self = this;
<i> </i> if( self.$formCart.length ) {
<i> </i> var cart = this._toJSONObject( this.storage.getItem( this.cartName ) );
<i> </i> var items = cart.items;
<i> </i> $( document ).on( "click", ".pdelete a", function( e ) {
<i> </i> e.preventDefault();
<i> </i> var productName = $( this ).data( "product" );
<i> </i> var newItems = [];
<i> </i> for( var i = 0; i < items.length; ++i ) {
<i> </i> var item = items[i];
<i> </i> var product = item.product;
<i> </i> if( product == productName ) {
<i> </i> items.splice( i, 1 );
<i> </i> }
<i> </i> }
<i> </i> newItems = items;
<i> </i> var updatedCart = {};
<i> </i> updatedCart.items = newItems;
<i> </i> var updatedTotal = 0;
<i> </i> var totalQty = 0;
<i> </i> if( newItems.length == 0 ) {
<i> </i> updatedTotal = 0;
<i> </i> totalQty = 0;
<i> </i> } else {
<i> </i> for( var j = 0; j < newItems.length; ++j ) {
<i> </i> var prod = newItems[j];
<i> </i> var sub = prod.price * prod.qty;
<i> </i> updatedTotal += sub;
<i> </i> totalQty += prod.qty;
<i> </i> }
<i> </i> }
<i> </i> self.storage.setItem( self.total, self._convertNumber( updatedTotal ) );
<i> </i> self.storage.setItem( self.shippingRates, self._convertNumber( self._calculateShipping( totalQty ) ) );
<i> </i> self.storage.setItem( self.cartName, self._toJSONString( updatedCart ) );
<i> </i> $( this ).parents( "tr" ).remove();
<i> </i> self.$subTotal[0].innerHTML = self.currency + " " + self.storage.getItem( self.total );
<i> </i> });
<i> </i> }
<i> </i> },
<i> </i>
<i> </i> // Displays the shopping cart
<i> </i>
<i> </i> displayCart: function() {
<i> </i> if( this.$formCart.length ) {
<i> </i> var cart = this._toJSONObject( this.storage.getItem( this.cartName ) );
<i> </i> var items = cart.items;
<i> </i> var $tableCart = this.$formCart.find( ".shopping-cart" );
<i> </i> var $tableCartBody = $tableCart.find( "tbody" );
<i> </i> if( items.length == 0 ) {
<i> </i> $tableCartBody.html( "" );
<i> </i> } else {
<i> </i>
<i> </i>
<i> </i> for( var i = 0; i < items.length; ++i ) {
<i> </i> var item = items[i];
<i> </i> var product = item.product;
<i> </i> var price = this.currency + " " + item.price;
<i> </i> var qty = item.qty;
<i> </i> var html = "<tr><td class='pname'>" + product + "</td>" + "<td class='pqty'><input type='text' value='" + qty + "' class='qty'/></td>";
<i> </i> html += "<td class='pprice'>" + price + "</td><td class='pdelete'><a href='' data-product='" + product + "'>&times;</a></td></tr>";
<i> </i>
<i> </i> $tableCartBody.html( $tableCartBody.html() + html );
<i> </i> }
<i> </i> }
<i> </i> if( items.length == 0 ) {
<i> </i> this.$subTotal[0].innerHTML = this.currency + " " + 0.00;
<i> </i> } else {
<i> </i>
<i> </i> var total = this.storage.getItem( this.total );
<i> </i> this.$subTotal[0].innerHTML = this.currency + " " + total;
<i> </i> }
<i> </i> } else if( this.$checkoutCart.length ) {
<i> </i> var checkoutCart = this._toJSONObject( this.storage.getItem( this.cartName ) );
<i> </i> var cartItems = checkoutCart.items;
<i> </i> var $cartBody = this.$checkoutCart.find( "tbody" );
<i> </i> if( cartItems.length > 0 ) {
<i> </i>
<i> </i> for( var j = 0; j < cartItems.length; ++j ) {
<i> </i> var cartItem = cartItems[j];
<i> </i> var cartProduct = cartItem.product;
<i> </i> var cartPrice = this.currency + " " + cartItem.price;
<i> </i> var cartQty = cartItem.qty;
<i> </i> var cartHTML = "<tr><td class='pname'>" + cartProduct + "</td>" + "<td class='pqty'>" + cartQty + "</td>" + "<td class='pprice'>" + cartPrice + "</td></tr>";
<i> </i>
<i> </i> $cartBody.html( $cartBody.html() + cartHTML );
<i> </i> }
<i> </i> } else {
<i> </i> $cartBody.html( "" );
<i> </i> }
<i> </i> if( cartItems.length > 0 ) {
<i> </i>
<i> </i> var cartTotal = this.storage.getItem( this.total );
<i> </i> var cartShipping = this.storage.getItem( this.shippingRates );
<i> </i> var subTot = this._convertString( cartTotal ) + this._convertString( cartShipping );
<i> </i>
<i> </i> this.$subTotal[0].innerHTML = this.currency + " " + this._convertNumber( subTot );
<i> </i> this.$shipping[0].innerHTML = this.currency + " " + cartShipping;
<i> </i> } else {
<i> </i> this.$subTotal[0].innerHTML = this.currency + " " + 0.00;
<i> </i> this.$shipping[0].innerHTML = this.currency + " " + 0.00;
<i> </i> }
<i> </i>
<i> </i> }
<i> </i> },
<i> </i>
<i> </i> // Empties the cart by calling the _emptyCart() method
<i> </i> // @see $.Shop._emptyCart()
<i> </i>
<i> </i> emptyCart: function() {
<i> </i> var self = this;
<i> </i> if( self.$emptyCartBtn.length ) {
<i> </i> self.$emptyCartBtn.on( "click", function() {
<i> </i> self._emptyCart();
<i> </i> });
<i> </i> }
<i> </i> },
<i> </i>
<i> </i> // Updates the cart
<i> </i>
<i> </i> updateCart: function() {
<i> </i> var self = this;
<i> </i> if( self.$updateCartBtn.length ) {
<i> </i> self.$updateCartBtn.on( "click", function() {
<i> </i> var $rows = self.$formCart.find( "tbody tr" );
<i> </i> var cart = self.storage.getItem( self.cartName );
<i> </i> var shippingRates = self.storage.getItem( self.shippingRates );
<i> </i> var total = self.storage.getItem( self.total );
<i> </i>
<i> </i> var updatedTotal = 0;
<i> </i> var totalQty = 0;
<i> </i> var updatedCart = {};
<i> </i> updatedCart.items = [];
<i> </i>
<i> </i> $rows.each(function() {
<i> </i> var $row = $( this );
<i> </i> var pname = $.trim( $row.find( ".pname" ).text() );
<i> </i> var pqty = self._convertString( $row.find( ".pqty > .qty" ).val() );
<i> </i> var pprice = self._convertString( self._extractPrice( $row.find( ".pprice" ) ) );
<i> </i>
<i> </i> var cartObj = {
<i> </i> product: pname,
<i> </i> price: pprice,
<i> </i> qty: pqty
<i> </i> };
<i> </i>
<i> </i> updatedCart.items.push( cartObj );
<i> </i>
<i> </i> var subTotal = pqty * pprice;
<i> </i> updatedTotal += subTotal;
<i> </i> totalQty += pqty;
<i> </i> });
<i> </i>
<i> </i> self.storage.setItem( self.total, self._convertNumber( updatedTotal ) );
<i> </i> self.storage.setItem( self.shippingRates, self._convertNumber( self._calculateShipping( totalQty ) ) );
<i> </i> self.storage.setItem( self.cartName, self._toJSONString( updatedCart ) );
<i> </i>
<i> </i> });
<i> </i> }
<i> </i> },
<i> </i>
<i> </i> // Adds items to the shopping cart
<i> </i>
<i> </i> handleAddToCartForm: function() {
<i> </i> var self = this;
<i> </i> self.$formAddToCart.each(function() {
<i> </i> var $form = $( this );
<i> </i> var $product = $form.parent();
<i> </i> var price = self._convertString( $product.data( "price" ) );
<i> </i> var name = $product.data( "name" );
<i> </i>
<i> </i> $form.on( "submit", function() {
<i> </i> var qty = self._convertString( $form.find( ".qty" ).val() );
<i> </i> var subTotal = qty * price;
<i> </i> var total = self._convertString( self.storage.getItem( self.total ) );
<i> </i> var sTotal = total + subTotal;
<i> </i> self.storage.setItem( self.total, sTotal );
<i> </i> self._addToCart({
<i> </i> product: name,
<i> </i> price: price,
<i> </i> qty: qty
<i> </i> });
<i> </i> var shipping = self._convertString( self.storage.getItem( self.shippingRates ) );
<i> </i> var shippingRates = self._calculateShipping( qty );
<i> </i> var totalShipping = shipping + shippingRates;
<i> </i>
<i> </i> self.storage.setItem( self.shippingRates, totalShipping );
<i> </i> });
<i> </i> });
<i> </i> },
<i> </i>
<i> </i> // Handles the checkout form by adding a validation routine and saving user's info into the session storage
<i> </i>
<i> </i> handleCheckoutOrderForm: function() {
<i> </i> var self = this;
<i> </i> if( self.$checkoutOrderForm.length ) {
<i> </i> var $sameAsBilling = $( "#same-as-billing" );
<i> </i> $sameAsBilling.on( "change", function() {
<i> </i> var $check = $( this );
<i> </i> if( $check.prop( "checked" ) ) {
<i> </i> $( "#fieldset-shipping" ).slideUp( "normal" );
<i> </i> } else {
<i> </i> $( "#fieldset-shipping" ).slideDown( "normal" );
<i> </i> }
<i> </i> });
<i> </i>
<i> </i> self.$checkoutOrderForm.on( "submit", function() {
<i> </i> var $form = $( this );
<i> </i> var valid = self._validateForm( $form );
<i> </i>
<i> </i> if( !valid ) {
<i> </i> return valid;
<i> </i> } else {
<i> </i> self._saveFormData( $form );
<i> </i> }
<i> </i> });
<i> </i> }
<i> </i> },
<i> </i>
<i> </i> // Private methods
<i> </i>
<i> </i>
<i> </i> // Empties the session storage
<i> </i>
<i> </i> _emptyCart: function() {
<i> </i> this.storage.clear();
<i> </i> },
<i> </i>
<i> </i> /* Format a number by decimal places
<i> </i> * @param num Number the number to be formatted
<i> </i> * @param places Number the decimal places
<i> </i> * @returns n Number the formatted number
<i> </i> */
<i> </i>
<i> </i>
<i> </i>
<i> </i> _formatNumber: function( num, places ) {
<i> </i> var n = num.toFixed( places );
<i> </i> return n;
<i> </i> },
<i> </i>
<i> </i> /* Extract the numeric portion from a string
<i> </i> * @param element Object the jQuery element that contains the relevant string
<i> </i> * @returns price String the numeric string
<i> </i> */
<i> </i>
<i> </i>
<i> </i> _extractPrice: function( element ) {
<i> </i> var self = this;
<i> </i> var text = element.text();
<i> </i> var price = text.replace( self.currencyString, "" ).replace( " ", "" );
<i> </i> return price;
<i> </i> },
<i> </i>
<i> </i> /* Converts a numeric string into a number
<i> </i> * @param numStr String the numeric string to be converted
<i> </i> * @returns num Number the number
<i> </i> */
<i> </i>
<i> </i> _convertString: function( numStr ) {
<i> </i> var num;
<i> </i> if( /^[-+]?[0-9]+.[0-9]+$/.test( numStr ) ) {
<i> </i> num = parseFloat( numStr );
<i> </i> } else if( /^d+$/.test( numStr ) ) {
<i> </i> num = parseInt( numStr, 10 );
<i> </i> } else {
<i> </i> num = Number( numStr );
<i> </i> }
<i> </i>
<i> </i> if( !isNaN( num ) ) {
<i> </i> return num;
<i> </i> } else {
<i> </i> console.warn( numStr + " cannot be converted into a number" );
<i> </i> return false;
<i> </i> }
<i> </i> },
<i> </i>
<i> </i> /* Converts a number to a string
<i> </i> * @param n Number the number to be converted
<i> </i> * @returns str String the string returned
<i> </i> */
<i> </i>
<i> </i> _convertNumber: function( n ) {
<i> </i> var str = n.toString();
<i> </i> return str;
<i> </i> },
<i> </i>
<i> </i> /* Converts a JSON string to a JavaScript object
<i> </i> * @param str String the JSON string
<i> </i> * @returns obj Object the JavaScript object
<i> </i> */
<i> </i>
<i> </i> _toJSONObject: function( str ) {
<i> </i> var obj = JSON.parse( str );
<i> </i> return obj;
<i> </i> },
<i> </i>
<i> </i> /* Converts a JavaScript object to a JSON string
<i> </i> * @param obj Object the JavaScript object
<i> </i> * @returns str String the JSON string
<i> </i> */
<i> </i>
<i> </i>
<i> </i> _toJSONString: function( obj ) {
<i> </i> var str = JSON.stringify( obj );
<i> </i> return str;
<i> </i> },
<i> </i>
<i> </i>
<i> </i> /* Add an object to the cart as a JSON string
<i> </i> * @param values Object the object to be added to the cart
<i> </i> * @returns void
<i> </i> */
<i> </i>
<i> </i>
<i> </i> _addToCart: function( values ) {
<i> </i> var cart = this.storage.getItem( this.cartName );
<i> </i>
<i> </i> var cartObject = this._toJSONObject( cart );
<i> </i> var cartCopy = cartObject;
<i> </i> var items = cartCopy.items;
<i> </i> items.push( values );
<i> </i>
<i> </i> this.storage.setItem( this.cartName, this._toJSONString( cartCopy ) );
<i> </i> },
<i> </i>
<i> </i> /* Custom shipping rates calculation based on the total quantity of items in the cart
<i> </i> * @param qty Number the total quantity of items
<i> </i> * @returns shipping Number the shipping rates
<i> </i> */
<i> </i>
<i> </i> _calculateShipping: function( qty ) {
<i> </i> var shipping = 0;
<i> </i> if( qty >= 6 ) {
<i> </i> shipping = 10;
<i> </i> }
<i> </i> if( qty >= 12 && qty <= 30 ) {
<i> </i> shipping = 20;
<i> </i> }
<i> </i>
<i> </i> if( qty >= 30 && qty <= 60 ) {
<i> </i> shipping = 30;
<i> </i> }
<i> </i>
<i> </i> if( qty > 60 ) {
<i> </i> shipping = 0;
<i> </i> }
<i> </i>
<i> </i> return shipping;
<i> </i>
<i> </i> },
<i> </i>
<i> </i> /* Validates the checkout form
<i> </i> * @param form Object the jQuery element of the checkout form
<i> </i> * @returns valid Boolean true for success, false for failure
<i> </i> */
<i> </i>
<i> </i>
<i> </i>
<i> </i> _validateForm: function( form ) {
<i> </i> var self = this;
<i> </i> var fields = self.requiredFields;
<i> </i> var $visibleSet = form.find( "fieldset:visible" );
<i> </i> var valid = true;
<i> </i>
<i> </i> form.find( ".message" ).remove();
<i> </i>
<i> </i> $visibleSet.each(function() {
<i> </i>
<i> </i> $( this ).find( ":input" ).each(function() {
<i> </i> var $input = $( this );
<i> </i> var type = $input.data( "type" );
<i> </i> var msg = $input.data( "message" );
<i> </i>
<i> </i> if( type == "string" ) {
<i> </i> if( $input.val() == fields.str.value ) {
<i> </i> $( "<span class='message'/>" ).text( msg ).
<i> </i> insertBefore( $input );
<i> </i>
<i> </i> valid = false;
<i> </i> }
<i> </i> } else {
<i> </i> if( !fields.expression.value.test( $input.val() ) ) {
<i> </i> $( "<span class='message'/>" ).text( msg ).
<i> </i> insertBefore( $input );
<i> </i>
<i> </i> valid = false;
<i> </i> }
<i> </i> }
<i> </i>
<i> </i> });
<i> </i> });
<i> </i>
<i> </i> return valid;
<i> </i>
<i> </i> },
<i> </i>
<i> </i> /* Save the data entered by the user in the ckeckout form
<i> </i> * @param form Object the jQuery element of the checkout form
<i> </i> * @returns void
<i> </i> */
<i> </i>
<i> </i>
<i> </i> _saveFormData: function( form ) {
<i> </i> var self = this;
<i> </i> var $visibleSet = form.find( "fieldset:visible" );
<i> </i>
<i> </i> $visibleSet.each(function() {
<i> </i> var $set = $( this );
<i> </i> if( $set.is( "#fieldset-billing" ) ) {
<i> </i> var name = $( "#name", $set ).val();
<i> </i> var email = $( "#email", $set ).val();
<i> </i> var city = $( "#city", $set ).val();
<i> </i> var address = $( "#address", $set ).val();
<i> </i> var zip = $( "#zip", $set ).val();
<i> </i> var country = $( "#country", $set ).val();
<i> </i>
<i> </i> self.storage.setItem( "billing-name", name );
<i> </i> self.storage.setItem( "billing-email", email );
<i> </i> self.storage.setItem( "billing-city", city );
<i> </i> self.storage.setItem( "billing-address", address );
<i> </i> self.storage.setItem( "billing-zip", zip );
<i> </i> self.storage.setItem( "billing-country", country );
<i> </i> } else {
<i> </i> var sName = $( "#sname", $set ).val();
<i> </i> var sEmail = $( "#semail", $set ).val();
<i> </i> var sCity = $( "#scity", $set ).val();
<i> </i> var sAddress = $( "#saddress", $set ).val();
<i> </i> var sZip = $( "#szip", $set ).val();
<i> </i> var sCountry = $( "#scountry", $set ).val();
<i> </i>
<i> </i> self.storage.setItem( "shipping-name", sName );
<i> </i> self.storage.setItem( "shipping-email", sEmail );
<i> </i> self.storage.setItem( "shipping-city", sCity );
<i> </i> self.storage.setItem( "shipping-address", sAddress );
<i> </i> self.storage.setItem( "shipping-zip", sZip );
<i> </i> self.storage.setItem( "shipping-country", sCountry );
<i> </i>
<i> </i> }
<i> </i> });
<i> </i> }
<i> </i>};
<i> </i>
<i> </i>$(function() {
<i> </i> var shop = new $.Shop( "#site" );
<i> </i>});
})( jQuery );
<i>
</i><!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<style>
fieldset { width: 12em; }
input[type="number"] { width: 4em; text-align: left; }
</style>
</head><body>
<fieldset> <legend> Photos </legend>
Quantity - Description <br>
<input type="number" name="photoquantity" value="0" data-item="8x10" data-cost="25"> 8x10 $25
<br>
<input type="number" name="photoquantity" value="0" data-item="5x7" data-cost="10"> 5x7 $10
<br>
<input type="number" name="photoquantity" value="0" data-item="Wallet" data-cost="15"> 2x3 (12 wallet) $15
</fieldset>
<fieldset> <legend> Giftcards </legend>
Quantity - Description <br>
<input type="number" name="giftcard" value="0" data-item="6x4" data-cost="4"> 6x4 $4
<br>
<input type="number" name="giftcard" value="0" data-item="5x7" data-cost="5"> 5x7 $5
</fieldset>
<button id="calc"> Submit </button>
<script>
console.clear();
function calcOrder() {
var sum = 0, total = 0, orderInfo = [];
var selPicks = document.getElementsByName('photoquantity'); <br/>
var photoPicks = [...selPicks].filter(elem => elem.value != 0);
for (let i=0; i<photoPicks.length; i++) {
sum = photoPicks[i].value * photoPicks[i].getAttribute('data-cost');
if (sum != 0) { orderInfo.push(photoPicks[i].getAttribute('data-item')
+':'+photoPicks[i].getAttribute('data-cost')
+':'+photoPicks[i].value+':'+sum); }
total += sum;
}
<i> </i> selPicks = document.getElementsByName('giftcard');
var cardPicks = [...selPicks].filter(elem => elem.value != 0);
for (let i=0; i<cardPicks.length; i++) {
sum = cardPicks[i].value * cardPicks[i].getAttribute('data-cost');
if (sum != 0) { orderInfo.push(cardPicks[i].getAttribute('data-item')
+':'+cardPicks[i].getAttribute('data-cost')
+':'+cardPicks[i].value+':'+sum); }
total += sum;
}
// alert(orderInfo.join('n')+'nTotal:'+total);
orderInfo.push(total);
info = JSON.stringify(orderInfo,null,2); alert(info); // for testing purposes
// return JSON.stringify(orderInfo);
}
function init() {
document.getElementById('calc').addEventListener( 'click', calcOrder )
} init();
</script>
</body></html>
<i>
</i>function passval() {
let info = document.getElementById('photoquantity').name;
let uri = 'page2.html?info='+info;
// let uri_enc = encodeURI(uri);
// following opens existing site
// var x = window.open(uri_enc,"","top=50,left=100,height=250,width=350");
var x = window.open(uri,"page2.html"); // ,"top=50,left=100,height=250,width=350");
}
<i>
</i>function passval() {
<!-- let info = document.getElementById('sbox').value; -->
let uri = 'page2.html?info='+info;
let uri_enc = encodeURI(uri);
// following opens existing site
<!-- var x = window.open(uri_enc,"page2.html","_self","top=50,left=100,height=250,width=350"); -->
var x = window.location.replace(uri,"page2.html"); // worked but not now..... ,"top=50,left=100,height=250,width=350");
}
0.1.9 — BETA 4.25