Difference between revisions of "Java Script"

From rbachwiki
Jump to navigation Jump to search
(Created page with "==Working With Forms == <pre> Get element by id document.getElementById('idname').value Select Boxes document.getElementById('idname').value Radio Buttons Loop throught button...")
 
 
(39 intermediate revisions by the same user not shown)
Line 1: Line 1:
==Working With Forms ==
='''Pure Java Script'''=
<pre>
==[[Constructors| Creating And Calling Constructors]]==
Get element by id
==[[Defining Objects| Creating Objects]]==
document.getElementById('idname').value
==[[Functions| Various Types of Functions and Closures]]==
Select Boxes
==[[This Keyword| Using This]]==
document.getElementById('idname').value
==[[Traversing the DOM| Traversing the Dom]]==
Radio Buttons
==[[Event Handlers| Event Handlers]]==
Loop throught buttons and see which one is checked
==[[Loops| Loops]]==
------------------------------------------
==[[Ajax| Ajax]]==
var methods = document.getElementById('form_name').nameProperty
==[[Event Delegation| Event Delegation]]==
    for(var i=0;i<methods.length; i++){                                        if(methods[i].checked==true)
==[[JSON| Using JSON]] ==
    alert(methods[i].value)
==[[Useful Functions| Useful Javascript Functions]]==
    }
='''Javascript Libraries'''=
------------------------------------------------
Check Boxes - the check property return boolean


document.getElementById('idname').checked
==[[JQuery]]==
Add event listner to submit
-------------------------------------------
************************HTML ********
    <form class="cart" id="cart-oil">
    <div class="item">
        <h2>Extra Virgin, Cold-Pressed</h2>
        <p>You've never tasted olive oil this delicious.</p>


        <div class="info">
='''ES6 JavaScript '''=
        <span>Price: $10/bottle</span>
==[[Operators]]==
        </div>
==[[Classes]]==
 
= '''Templating''' =
        <div class="order">
==[[Handlebars| Templating With Handlebars]]==
        <label for="txt-q-extra">Quantity desired:</label>
='''APPS '''=
        <input type="text" id="txt-q-extra" size="3" placeholder="0">
==[[rotator| Rotating Image with Text Info]]==
        </div>
==[[image_enlarge| Click on image to enlarge]]==
    </div>
==[[live search|live search]]==
 
==[[tooltip| Tool Tip]]==
    <div class="item">
        <h2>Cold-Pressed</h2>
        <p>Ideal for cooking.</p>
 
        <div class="info">
        <span>Price: $8/bottle</span>
        </div>
 
        <div class="order">
        <label for="txt-q-cold">Quantity desired:</label>
        <input type="text" id="txt-q-cold" size="3" placeholder="0">
        </div>
    </div>
 
    <div class="item">
        <h2>Garlic-infused</h2>
        <p>If you love garlic, this is the one for you.</p>
 
        <div class="info">
        <span>Price: $10/bottle</span>
        </div>
 
        <div class="order">
        <label for="txt-q-garlic">Quantity desired:</label>
        <input type="text" id="txt-q-garlic" size="3" placeholder="0">
        </div>
    </div>
 
    <div class="item">
        <h2>Lemon-infused</h2>
        <p>If you love Lemon, this is the one for you.</p>
 
        <div class="info">
        <span>Price: $12/bottle</span>
        </div>
 
        <div class="order">
        <label for="txt-q-lemon">Quantity desired:</label>
        <input type="text" id="txt-q-lemon" size="3" placeholder="0">
        </div>
    </div>
 
    <div id="summary">
        <h2>Estimate Order</h2>
        <div class="group state">
            <label for="s-state">State:</label>
            <select id="s-state">
                <option value="">- select -</option>
                <option value="CA">California (7.5% tax)</option>
                <option value="IL">Illinois</option>
                <option value="NH">New Hampshire</option>
                <option value="PA">Pennsylvania</option>
          <option value="WA">Washington</option>
            </select>
        </div>
 
        <div class="group method">
            <label for="r-method-pickup">Shipping Method:</label><br>
            <input type="radio" value="pickup" name="r_method" id="r-method-pickup" checked> <label for="r-method-pickup">Pickup (free)</label><br>
 
            <input type="radio" value="usps" name="r_method" id="r-method-usps"> <label for="r-method-usps">US Mail ($2/bottle)</label><br>
 
            <input type="radio" value="ups" name="r_method" id="r-method-ups"> <label for="r-method-ups">UPS ($3/bottle)</label>
        </div>
 
        <div class="group special">
            <label for="c-special-gift">Special:</label><br>
            <input type="checkbox" value="YES" id="c-special-gift"> <label for="c-special-gift">This is a gift</label><br>
 
            <input type="checkbox" value="YES" id="c-special-gold"> <label for="c-special-gold">Use gold-flecked bottles</label><br>
 
            <input type="checkbox" value="YES" id="c-special-cork"> <label for="c-special-cork">Use plastic caps instead of cork</label>
        </div>
 
        <div class="group calc">
            <p>
            <label for="btn-estimate">Click to estimate:</label>
            <input type="submit" value="Estimate Total" id="btn-estimate">
            <input type="text" id="txt-estimate" placeholder="$0.00">
            </p>
 
            <div id="results"></div>
        </div>
    </div>
 
    </form>
 
    **************************************
  // this listens for the submit button then run the estimate function
  document.getElementById('cart-oil').addEventListener('submit', estimateTotal);
 
  function estimateTotal(event){
    event.preventDefault();
    if (document.getElementById('s-state').value=='') {
      alert("please choose");
      document.getElementById('s-state').focus();
 
    } //end if
 
    var btlCold = parseInt(document.getElementById('txt-q-cold').value) || 0;
    var btlExtra = parseInt(document.getElementById('txt-q-extra').value) || 0;
    var btlGarlic = parseInt(document.getElementById('txt-q-garlic').value) || 0;
    var btlLemon = parseInt(document.getElementById('txt-q-lemon').value) || 0;
    var state = document.getElementById('s-state').value;
 
    var methods = document.getElementById('cart-oil').r_method;
    var shippingMethod = document.getElementById('r_method');
 
        for (var i = 0; i < methods.length; i++) {
          if (methods[i].checked==true) {
              shippingMethod = methods[i].value;
 
          } // end if
 
        } // end for
        var taxFactor = 1;
        if (state=='CA') {
          taxFactor = 1.075;
        }else if(state=='WA'){
          taxFactor =1.065;
 
        }else{
          taxFactor = 1;
        }
 
        //calculate shipping values from a drop down list
        var shippingCostPer = 0;
 
        switch(shippingMethod){
          case 'pickup':
            shippingCostPer = 0;
            break;
          case 'usps':
            shippingCostPer = 2;
            break;
          case 'ups':
            shippingCostPer = 3;
            break;
          default:
            shippingCostPer = 0;
            break;
        }
        var totalBottles = btlExtra + btlCold + btlGarlic + btlLemon;
        var shippingCost = totalBottles * shippingCostPer;
        var subTotal = ((btlExtra * 10) + (btlCold * 8) + (btlGarlic * 10) + (btlLemon * 12)) * taxFactor;
 
        var estimate = "$"+(subTotal + shippingCost).toFixed(2);
 
        document.getElementById('txt-estimate').value = estimate;
        // results is a empty div with id='results'
 
        document.getElementById('results').innerHTML = 'Total Bottles: ' + totalBottles + '<br>';
        document.getElementById('results').innerHTML += 'Total Shipping: $' +shippingCost.toFixed(2)+'<br>';
        document.getElementById('results').innerHTML += 'Tax: $'+ ((taxFactor - 1)*100 ).toFixed(2)+ '%';
</pre>
----
[[#Working With Forms|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]

Latest revision as of 14:14, 16 January 2017

Pure Java Script

Creating And Calling Constructors

Creating Objects

Various Types of Functions and Closures

Using This

Traversing the Dom

Event Handlers

Loops

Ajax

Event Delegation

Using JSON

Useful Javascript Functions

Javascript Libraries

JQuery

ES6 JavaScript

Operators

Classes

Templating

Templating With Handlebars

APPS

Rotating Image with Text Info

Click on image to enlarge

live search

Tool Tip

Retrieved from "https://www.r512.com/index.php?title=Java_Script&oldid=739"