change the price (which is a form 'read only' element) when a coupon code is entered

Posted on 2007-08-05
Last Modified: 2013-11-05
Hi, I have a checkout form, that you can see at the end of the shopping process starting from:

At the checkout page, I would like to allow the customers to enter a coupon code which will update the price of their order.

I already do it using a checkbox of 'express service' to which I add onClick="calculatePrice(this)"

but with the coupon code it's different. Is there any event type I can use?  
If not, then I need to add an "update" button near the coupon code input field, but that means a form inside another form (which as far as I know is not allowed)

Any suggestions?

*Any remarks regarding the whole shopping process will be appreciated.

Thanks a lot,

Question by:kustiel
    LVL 17

    Expert Comment

    I would use either onChange or onBlur.

    onChange will fire your function as soon as you type something into the box... So, what you'd want to do for this method is have your function check for a valid code and if it's valid update your price.


    onBlur will fire your function when the user tabs or click out of the box (opposite of onFocus basically), so after they enter a code and then tab or click elsewhere it will fire the function and update the price.

    LVL 1

    Author Comment


    Thanks for the prompt answer.
    Now, when I do the onBlur, I get to a JavaScript functiion, in which I need to check in my SQL database, whether such a coupon code exist, and what discount is associated with it.
    My question is: how do I access the database from within the JavaScript code. Until now, I only did it from my ASP/VBSCRIPT code.

    Thanks, Assaf
    LVL 17

    Accepted Solution

    ohhh ok.  Well if there are many different codes (as in thousands) you will have to use some type of AJAX solution to asyncronously check your db and return the results.  That is a whole other question and I would suggest asking it seperatly in the Javascript section.

    If however you only have a few hundred valid codes, you can load them into a javascript array when the page loads up and then you'd just look up the code in your array in javascript to get the discount.  This will be a better solution and much easier to set up compared to the Ajax option if you don't have too many codes.

    You will want to use an associative array so you can relate the discout to each code:
    Here's a good explaination of associative arrays in javascript:

    quick example:
    var codes = new Array();
    codes["abc123"] = ".50";  // 50% off
    codes["aabb"] = ".10"; // 10% off
    codes["cc00"] = ".25"; // 25% off

    var userCode = document.form.codeField.value;
    if ( codes[userCode] )
        // it is a valid code so you can pass the discount to your function.
      // not a valid code

    So when you reference the array with a code the result is the discount:

    would print:  .10
    LVL 1

    Author Comment

    Hi jasonsbytes,

    I'm trying to implement your solution and I;m still a bit confused....

    There are 2 things I need to do:

    1.) Store the values in the array - to do this, I need to call a JavaScript function in the OnLoad of the body tag, right? Then, from inside this function I call the SQL database to read the values? I have never accessed the SQL DB from inside a JavaScript function. I always did it in the ASP / VSCRIPT code. Is it the same?

    2.) Laster, when someone will enter a coupon code, I will call some OnBlur function. Will this function be able to use the variable I used in the former function? Are these global variables?

    I'm sorry if my questions sound strange. I just come from a world of c, c++ coding and am pretty new to this web developing.

    Thanks, Assaf

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

    754 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

    25 Experts available now in Live!

    Get 1:1 Help Now