Search code examples
javascriptphpcoupon

Enter a Code, Change Displayed Price When User Presses Enter

I have a chunk of a website that I need to allow a user to enter a code and have the displayed price change. The code is arbitrary as the actual price IS the price the the code will cause to be displayed - I just wanted the user to feel that they're 'special'.

<h1 style="text-align: center;">Your choice for a one-time investment of just:</br> 
<a title="JUST $797" href="http://samplesite.com" target="_blank">$797</a></h1>
<p style="text-align: center;"><strong>If you'd prefer a totally custom design, <a title="Custom Mobile Site Design" href="http://samplesite.com" target="_blank">click here</a>.</strong></p>
<center><input type="text" id="EnterCode" /><div id="price" value="Code">Enter Code</div></center>

(The link in the "a title=" line is there because the theme I'm using won't let me change the font color, so to get it to use the color I want, I have to make it think it's a link..I'll have to go into the css and change it later)

So, given the above code, the current price displayed is $797. When the user enters ANY code and presses enter, I would like the $797 to change to $397.

I couldn't locate anything online that would point me in the right direction, so I came here, to ask you guys. I really do appreciate any help you can provide.

Thanks!

Solution

  • First of all, you need to add an ID to your <a> tag that contains the code. Something like this: 

    <a id="yourPriceId" title="JUST $797" href="http://samplesite.com" target="_blank">$797</a>

    Then you can easily use Javascript to do what you want, using an event listener that checks if the user pressed the Enter key, like this:

    var input = document.getElementById("EnterCode"),
    price = document.getElementById("yourPriceId");

input.addEventListener('keyup', function(e) {
    if (e.keyCode === 13 && !!this.value) {
        price.textContent = "$397";
    }
});

    Note: this will only work if the user enters something in the input before pressing Enter. If you want to chenge the price even if the user doesn't enter anything then just remove && !!this.value from the if statement.