Jquery Show Input Text Based On Input Value

Question

I facing problem with my jquery, on showing input text based on input value. Here is the JS fiddle demo :

http://jsfiddle.net/Ltapp/364/

When I try to input @hotmail, the input box will show. But when I want to type some text in the #hotm input box, it will hide again.

JS code :

$(window).load(function(){
var myString = '@hotmail';
$('#hotm').hide();

$("input").keyup(function () {
var value = $(this).val();
    if($(this).val().match(myString)) {
        $('#hotm').show();
    } else {
        $('#hotm').hide(); 
    }
});

});

Answer 1

it's because the new box also = "input"; if you give the hotmail textbox it's own id, it won't hide

<input id="hotmail" type="text"/>

and then

$("#hotmail").keyup(function () {...});

Answer 2

use this for your if part :

if($(this).val().match($(this).val().substr(0,strlen($(this).val())))

Answer 3

You're affecting all inputs. Either give each one a unique ID / Class or use the jQuery $(this) method.

See JSFiddle Here:

http://jsfiddle.net/Ltapp/366/

<input type="text" id="firstinput"/>
<p id="secondinput"><input type="text"/></p>


var myString = '@hotmail';
$('#secondinput').hide();

$("#firstinput").keyup(function () {
var value = $(this).val();
    if($(this).val().match(myString)) {
        $('#secondinput').show();
    } else {
        $('#secondinput').hide(); 
    }
});

Answer 4

It's because your selector $("input") affects both input elements. I have updated it to the $("input:first") selector instead. JsFiddle here

    $("input:first").keyup(function () {
    var value = $(this).val();
    if(value.match(myString)) {
        $('#hotm').show();
    } else {
        $('#hotm').hide(); 
    }
});

Answer 5

As many has said, you are binding the event on all the inputs I did a little change:

$(function(){
    var myString = /@hotmail/ig;
    $("#check").bind('keyup checkvalue', function() {
        $('#hotm')[myString.test(this.value) ? 'show' : 'hide']();
    }).trigger('checkvalue');
});

using regex if you are using @HoTmAil it will also hit on that, and also added a custom event checkvalue to see if #hotm should be visible on for example a postback on the form you might be using.

---

demo: http://jsfiddle.net/voigtan/xjwvT/1/