Javascript function to show text if i input value

Question

To the point, if i input value "20" in input field then show message "Thank you".

Here's my HTML Code:

<form method="post" action="">
<input type="text" id="nominal" value="">
<input type="submit" value="submit">
</form>

Here's my JS Code:

$(document).ready(function(){

    var money = 20;

    /* not sure if this is written correctly, but this is supposed to
    check whether the hidden input element value is equal to var money */

    if ($("input[id='nominal']").val() == money )  {

     var h = document.createElement("H1")                // Create a <h1> element
     var t = document.createTextNode("Thank You");     // Create a text node
     h.appendChild(t);                                   // Append the text to <h1>

    };
});

i've created one script to fulfill what I need, but not working! what's wrong?

My JDFIDDLE LINK

Put you code in $("#nominal").change(function(){})

Mohammad
– Mohammad

2016-07-19 09:47:15 +00:00
Commented Jul 19, 2016 at 9:47 — Mohammad
– Mohammad, Commented Jul 19, 2016 at 9:47
Add $('body').append(h); after h.appendChild(t);

Think Different
– Think Different

2016-07-19 09:47:33 +00:00
Commented Jul 19, 2016 at 9:47 — Think Different
– Think Different, Commented Jul 19, 2016 at 9:47
@ThinkDifferent not working

Rofi Fathurrohman
– Rofi Fathurrohman

2016-07-19 09:59:58 +00:00
Commented Jul 19, 2016 at 9:59 — Rofi Fathurrohman
– Rofi Fathurrohman, Commented Jul 19, 2016 at 9:59

eisbehr · Accepted Answer · 2016-07-21 08:12:56Z

2

You have to create an event to listening for changes, in this case changed. And you can make your code a bit smaller too. ;)

$(function() {
    $("#nominal").change(function() {
        if( $(this).val() == 20 )
            $(this).after("<h1>Thank You</h1>");
    });
});

Full working exaple with removing the message when value changes again and strict check can be seen here.

edited Jul 21, 2016 at 8:12

answered Jul 19, 2016 at 9:52

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

eisbehr Over a year ago

Sure it does. For change you have to leave focus. If you not want to, use keyup too. See here, I created a demo. And a check to prevent double show message: jsfiddle.net/fma1hyoL/1

eisbehr Over a year ago

This will remove the message too: jsfiddle.net/fma1hyoL/4 Hope this is what you want. Not that I cast the money into a string too, because otherwise when the user added spaces, like 20 it will show a message too. So it is more strict ...

Dhara Parmar · Accepted Answer · 2016-07-19 09:59:38Z

2

$(document).ready(function(){
    var money = 20;
    $("#nominal").change(function() { // take change event of input box
       if ($(this).val() == money )  { // use $(this) to take value
          var h = document.createElement("H1"); // Create a <h1> element
          var t = document.createTextNode("Thank You"); // Create a text node
          h.appendChild(t);      
          $('form').append(h); // append created h1 element in form/html
       } else {
          $('form').find("h1").remove();
       }
     })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form method="post" action="">
<input type="text" id="nominal" value="">
<input type="button" value="submit" name="submit" id="submit">
</form>

edited Jul 19, 2016 at 9:59

answered Jul 19, 2016 at 9:50

Dhara Parmar

8,1231 gold badge19 silver badges27 bronze badges

1 Comment

Rofi Fathurrohman Over a year ago

it's work, but when i delete value, the text still showing

Collectives™ on Stack Overflow

Javascript function to show text if i input value

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related