Can you help me get these two javascript codes to work together?

I made a form using html.

At first I had it really simple. My input was amount, which a user would enter. I then made javascript code to calculate a dynamic price based on the user’s amount input. The code is as follows:

<input class="typeahead" type="text" placeholder="Amount" name="Gift-Card Amount"/>

The javascript:


 jQuery("input[name='Gift-Card Amount']").change(function () {

                if (isNaN(parseFloat(this.value)) || !isFinite(this.value)) {
                    jQuery(this).val('');
                    return false;
                }
                var calc = parseFloat(this.value) * 0.95;
                jQuery(this).parents("form").find("input[name='price']").val(calc);
                });

The calculation is a constant 0.95. So I added a new input. Store name. So the user could enter the store name. The amount. And I want price to change based on both store name and amount. So I created this object file:


var stores = {
                   "McDonalds" : .90,
                   "Target" : .92,
                  }
                   var storeName = jQuery(this).parents("form").find("input[name='name']").val();
                   console.log(stores[storeName]);

So that instead of a constant 0.95, that value can be replaced with preset values based on the store name entered. I don’t know how to get those two to work together. Meaning, how do I recode the first javascript to recornize the var store values instead of 0.95?

Hi there,

Welcome to the forums :slight_smile:

I would not bother with an object literal, just use a select element instead to select the store:

<select>
    <option>Select a store</option>
    <option value="0.9">McDonalds</option>
    <option value="0.92">Target</option>
    <option value="1.14">Amazon</option>
</select>

<input type="text" placeholder="Amount" class="amount" />
<button>Calculate</button>

<p>Result: $<span id="result"></span></p>
$("button").on("click", function(e) {
    var errors = [],
        store = Number($("select").val()),
        amount = Number($(".amount").val());
    
    if($("select").val() === "Select a store"){
       errors.push("Please select a store");
    }
    
    if($(".amount").val() === ""){
       errors.push("Please enter an amount");
    } else if(isNaN(amount)){
       errors.push("Please enter a valid nubmer");        
    }
    
    if(errors.length){
        alert(errors.join("\
"));
        e.preventDefault();
    } else{
        $("#result").html((store * amount).toFixed(2));
    }   
});

Here’s a demo

HTH

Thank you. I actually got my original code to work this afternoon. I understand that it is a concern to rely on a user entering the store correctly. I fixed that by using twitter typeahead, so that the supported stores would be listed as the user types. My cart also displays a message to enter a valid store, and they can find a list at a certain link.

I appreciate your help here. I’m going to use it, make a second page and have my colleagues look at both and vote on which they like more.

Hi,

No problems :slight_smile:

When discussing this with your colleagues, also bear in mind that users can easily sidestep any features implemented in JavaScript (e.g. typeahead), by turning JavaScript off in their browser.

If JavaScript gets turned off, then none of the code will work, right? Because the form I have takes store name, amount and calculates price. Both amount and store name are based on user input. Then JavaScript calculates and displays a price based on their input. Am I correct that if JavaScript is turned off, none of it would work, JavaScript also loads the cart in an frame after form submission on the same page. Sort of a pop out I frame.