How to execute if statement after page has been loaded?

Question

see it in action here: http://jsbin.com/relamiqeru/1/

I am trying to make it so that if a user enters "idh4" into the coupon code field, my "booyah" div gets filled with that html provided.

The issue I feel, is that the javascript is only executed when the page is loaded, so even if idh4 is entered into the field, its not checking it anymore. Perhaps an if statement is not the right thing to use in this case?

At request, here is the jsbin code:

  <div id="booyah"></div>
<form action="" method="POST">
        Coupon Code?<input id="couponcode" type="text" name="coupon code" value="idh4"><br>
        <input type="submit">
    </form>

$("#couponcode").change(function(){
if ($("#couponcode").val() === 'idh4') {
      console.log('it got called');
      $( "#booyah" ).html("<p>That code gets you free snappie stickers!</p>");
  }

  });

That's very little code. Please post it in your question. It's hard to dig through the source of that jsbin page. — f.ardelian, Feb 27 '15 at 23:49
Also, you may want to do this validation on the server side. What you're doing here is a security hazard. Anyone can see your JS code and that 'idh4' is the secret code. The HTML should be generated on the serve side with the `booyah` div containing the text if necessary. If you want to validate the coupon code before the form is submitted, you need to make an AJAX call when the user presses a button to validate the coupon code which will not submit the form. — f.ardelian, Feb 27 '15 at 23:55

score 1 · Answer 1 · answered Feb 28 '15 at 00:04

I'm not sure this is what you want, but you can take a look at it anyway :

$(document).ready(function(){
   $("#booyahInput").on('keyup', function(){
      if ($(this).val() == 'idh4') {
         console.log('it got called');
         $( "#booyah" ).html("<p>That code gets you free snappie stickers!</p>");
      }
    });
});

http://jsfiddle.net/rwxygptf/

score 1 · Answer 2 · answered Feb 28 '15 at 00:43

1

Here problem is you have used change event on textbox:

$("#couponcode").change

On textbox change gets fired on losing focus. So after entering coupon user has to go off the field.

Instead try input, keyup, keypress events for immediate response.

$("#couponcode").on('input', function(){
    //
});

answered Feb 28 '15 at 00:43

After seeing your answer, I realize that OP wants to do this without submitting the form. Your answer is correct, +1. – EternalHour Feb 28 '15 at 00:47

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

If you want it on submit, you have to add a function to fire on submit, if you want it to fire on text changing in the field - You need to listen to events. Understanding event listeners is key to understanding javascript.

Here are 2 references: Submit:

http://www.javascript-coder.com/html-form/html-form-tutorial-p1.phtml

Listener:

jQuery Listen For All Text Input Changes

edited May 23 '17 at 11:56

Community

1
1

answered Feb 27 '15 at 23:50

Michael Voznesensky

1,612
12
15

score 0 · Answer 4 · answered Feb 28 '15 at 00:33

The problem you are having, is when the form is submitted the page is reloading. To do this properly you will need to submit the form through AJAX and prevent a page refresh. But with the code you provided it's not clear if you're doing that.

JSFiddle

$("#myform").on("submit", function(e) {
    e.preventDefault();
    if ($("#couponcode").val() === 'idh4') {
        console.log('it got called');
        $("#booyah").html("<p>That code gets you free snappie stickers!</p>");
    }
});

How to execute if statement after page has been loaded?

4 Answers4