How to show and hide field immediately base on the text length?

How to show and hide field immediately base on the text length? - JQuery

I have two input text like this:

input1

<input type='text' id='input1' name='input1'>

<br>

input2

<input type='text' id='input2' name='input2'>

<br>

Now I want to hide and show input2 base on the event in input1 if there is no text in input1 then input2 will be hidden and vice versa. I write JQuery code like this:

$(document).ready(function () {

    var inputText = document.getElementById("input1");

    var textLength = inputText.value.length;

    if (textLength <= 0){

      $('#input2').hide("fast");

    }

    else{

      $('#input2').show("fast");

    }

  });

It works only after each time refresh. So how to catch the input event in input1 and affect the change immediately to input2?

asked May 1 '16 at 4:38

DinhNgocHien

35811121

1

"textLength <= 0" - Get a lot of negative length strings do you? Anyway, you need to put your length test inside an event handler triggered by, say, the "input" event. $("#input1").on("input", function() {...});

– nnnnnn
May 1 '16 at 4:40

add a comment |

I have two input text like this:

input1

<input type='text' id='input1' name='input1'>

<br>

input2

<input type='text' id='input2' name='input2'>

<br>

Now I want to hide and show input2 base on the event in input1 if there is no text in input1 then input2 will be hidden and vice versa. I write JQuery code like this:

$(document).ready(function () {

    var inputText = document.getElementById("input1");

    var textLength = inputText.value.length;

    if (textLength <= 0){

      $('#input2').hide("fast");

    }

    else{

      $('#input2').show("fast");

    }

  });

It works only after each time refresh. So how to catch the input event in input1 and affect the change immediately to input2?

asked May 1 '16 at 4:38

DinhNgocHien

35811121

1

"textLength <= 0" - Get a lot of negative length strings do you? Anyway, you need to put your length test inside an event handler triggered by, say, the "input" event. $("#input1").on("input", function() {...});

– nnnnnn
May 1 '16 at 4:40

add a comment |

I have two input text like this:

input1

<input type='text' id='input1' name='input1'>

<br>

input2

<input type='text' id='input2' name='input2'>

<br>

Now I want to hide and show input2 base on the event in input1 if there is no text in input1 then input2 will be hidden and vice versa. I write JQuery code like this:

$(document).ready(function () {

    var inputText = document.getElementById("input1");

    var textLength = inputText.value.length;

    if (textLength <= 0){

      $('#input2').hide("fast");

    }

    else{

      $('#input2').show("fast");

    }

  });

It works only after each time refresh. So how to catch the input event in input1 and affect the change immediately to input2?

asked May 1 '16 at 4:38

DinhNgocHien

35811121

I have two input text like this:

input1

<input type='text' id='input1' name='input1'>

<br>

input2

<input type='text' id='input2' name='input2'>

<br>

Now I want to hide and show input2 base on the event in input1 if there is no text in input1 then input2 will be hidden and vice versa. I write JQuery code like this:

$(document).ready(function () {

    var inputText = document.getElementById("input1");

    var textLength = inputText.value.length;

    if (textLength <= 0){

      $('#input2').hide("fast");

    }

    else{

      $('#input2').show("fast");

    }

  });

It works only after each time refresh. So how to catch the input event in input1 and affect the change immediately to input2?

javascript jquery

asked May 1 '16 at 4:38

DinhNgocHien

35811121

asked May 1 '16 at 4:38

DinhNgocHien

35811121

asked May 1 '16 at 4:38

DinhNgocHien

35811121

asked May 1 '16 at 4:38

DinhNgocHien

35811121

asked May 1 '16 at 4:38

DinhNgocHien

35811121

1

"textLength <= 0" - Get a lot of negative length strings do you? Anyway, you need to put your length test inside an event handler triggered by, say, the "input" event. $("#input1").on("input", function() {...});

– nnnnnn
May 1 '16 at 4:40

add a comment |

1

"textLength <= 0" - Get a lot of negative length strings do you? Anyway, you need to put your length test inside an event handler triggered by, say, the "input" event. $("#input1").on("input", function() {...});

– nnnnnn
May 1 '16 at 4:40

"textLength <= 0" - Get a lot of negative length strings do you? Anyway, you need to put your length test inside an event handler triggered by, say, the "input" event. $("#input1").on("input", function() {...});

– nnnnnn
May 1 '16 at 4:40

add a comment |

6 Answers
6

active

oldest

votes

You can try this code:

$(document).ready(function () {

  var input1 = $('#input1');

  

  function toggleInput() {

      if(input1.val().length) {

        $('#input2').show("fast");

      } else {

        $('#input2').hide("fast");

      }

  }

  

  toggleInput();

  

  $('#input1').on('keyup', toggleInput);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

input1

<input type='text' id='input1' name='input1'>

<br>

input2

<input type='text' id='input2' name='input2'>

<br>

answered May 1 '16 at 5:29

Mohammad Usman

20.4k114054

add a comment |

you can wrap it on jquery keydown or keyup function.

<script>

$(document).ready(function() {

    $("#input1").keydown(function() {

        var inputText = this.value;

        var textLength = inputText.length;

        if (textLength <= 0) {

            $('#input2').hide("fast");

        } else {

            $('#input2').show("fast");

        }

    });

});

JS fiddle

edited May 1 '16 at 4:56

answered May 1 '16 at 4:45

gihan

1,8621851

how are you getting inputTextlength?

– Navoneel Talukdar
May 1 '16 at 4:46

1

This doesn't work. The keydown event is triggered before the input's .value updates, so the .length won't be correct yet. Also, what if the user edits the field without using the keyboard?

– nnnnnn
May 1 '16 at 4:52

post edited its working.

– gihan
May 1 '16 at 4:57

add a comment |

You need to add event listeners for these elements. Example using mostly your original code.

$(document).ready(function() {

    $('#input1').on("keyup", function() {

        var inputText = document.getElementById("input1");

        var textLength = inputText.value.length;

        if (textLength <= 0) {

            $("#input2").hide("fast");

        } else {

            $("#input2").show("fast");

        }

    })

});

answered May 1 '16 at 4:48

dYale

868917

add a comment |

$('#input1').on('input', function() {

    $('#input2').toggle($(this).val().length === 0);

});

answered May 1 '16 at 4:54

Yordan Ivanov

49749

add a comment |

This solution assumes that you have two input textbox only.

First assign a common class like

input1

<input type='text' id='input1' class='input' name='input1'>

<br>

input2

<input type='text' id='input2' class='input' name='input2'>

<br>



   $(".input").change(function(){

        alert(this.id);

        if(this.id == 'input1')

        {                 

              if ($(this).val().length > 0){

              $("#input2").show();

              } else {

              $("#input2").hide();

              }             

        }

        else

        {

             if ($(this).val().length > 0){

              $("#input1").show();

              } else {

              $("#input1").hide();

              }      

        }           

    });

edited May 1 '16 at 5:06

answered May 1 '16 at 4:53

Navoneel Talukdar

2,76231132

A function that explicitly references both inputs' ids isn't really "more generic", but in any case this doesn't work. The object referred to by this doesn't have a .val() method. Also the keydown event is triggered before the input's value updates, so the .length won't be correct. Also, what if the user edits the field without using the keyboard?

– nnnnnn
May 1 '16 at 4:59

@nnnnnn ..agreed with you .have updated answer ..it works as per the html stated in question.

– Navoneel Talukdar
May 1 '16 at 5:15

add a comment |

Replace your javascript with this code! This code improves the performance of your application as it uses selectors only once!

$(document).ready(function () {

  var input1 = $('#input1');

  var input2 = $('#input2');



  input2.hide("fast");

  input1.on('keyup', function() {

      if(input1.val().length) {

        input2.show("fast");

      } else {

        input2.hide("fast");

      }

  });

});

answered May 1 '16 at 6:54

Santosh

719617

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f36963110%2fhow-to-show-and-hide-field-immediately-base-on-the-text-length-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

6 Answers
6

active

oldest

votes

6 Answers
6

active

oldest

votes

You can try this code:

$(document).ready(function () {

  var input1 = $('#input1');

  

  function toggleInput() {

      if(input1.val().length) {

        $('#input2').show("fast");

      } else {

        $('#input2').hide("fast");

      }

  }

  

  toggleInput();

  

  $('#input1').on('keyup', toggleInput);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

input1

<input type='text' id='input1' name='input1'>

<br>

input2

<input type='text' id='input2' name='input2'>

<br>

answered May 1 '16 at 5:29

Mohammad Usman

20.4k114054

add a comment |

You can try this code:

$(document).ready(function () {

  var input1 = $('#input1');

  

  function toggleInput() {

      if(input1.val().length) {

        $('#input2').show("fast");

      } else {

        $('#input2').hide("fast");

      }

  }

  

  toggleInput();

  

  $('#input1').on('keyup', toggleInput);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

input1

<input type='text' id='input1' name='input1'>

<br>

input2

<input type='text' id='input2' name='input2'>

<br>

answered May 1 '16 at 5:29

Mohammad Usman

20.4k114054

add a comment |

You can try this code:

$(document).ready(function () {

  var input1 = $('#input1');

  

  function toggleInput() {

      if(input1.val().length) {

        $('#input2').show("fast");

      } else {

        $('#input2').hide("fast");

      }

  }

  

  toggleInput();

  

  $('#input1').on('keyup', toggleInput);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

input1

<input type='text' id='input1' name='input1'>

<br>

input2

<input type='text' id='input2' name='input2'>

<br>

answered May 1 '16 at 5:29

Mohammad Usman

20.4k114054

You can try this code:

$(document).ready(function () {

  var input1 = $('#input1');

  

  function toggleInput() {

      if(input1.val().length) {

        $('#input2').show("fast");

      } else {

        $('#input2').hide("fast");

      }

  }

  

  toggleInput();

  

  $('#input1').on('keyup', toggleInput);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

input1

<input type='text' id='input1' name='input1'>

<br>

input2

<input type='text' id='input2' name='input2'>

<br>

$(document).ready(function () {

  var input1 = $('#input1');

  

  function toggleInput() {

      if(input1.val().length) {

        $('#input2').show("fast");

      } else {

        $('#input2').hide("fast");

      }

  }

  

  toggleInput();

  

  $('#input1').on('keyup', toggleInput);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

input1

<input type='text' id='input1' name='input1'>

<br>

input2

<input type='text' id='input2' name='input2'>

<br>

$(document).ready(function () {

  var input1 = $('#input1');

  

  function toggleInput() {

      if(input1.val().length) {

        $('#input2').show("fast");

      } else {

        $('#input2').hide("fast");

      }

  }

  

  toggleInput();

  

  $('#input1').on('keyup', toggleInput);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

input1

<input type='text' id='input1' name='input1'>

<br>

input2

<input type='text' id='input2' name='input2'>

<br>

answered May 1 '16 at 5:29

Mohammad Usman

20.4k114054

answered May 1 '16 at 5:29

Mohammad Usman

20.4k114054

answered May 1 '16 at 5:29

Mohammad Usman

20.4k114054

answered May 1 '16 at 5:29

Mohammad Usman

20.4k114054

add a comment |

you can wrap it on jquery keydown or keyup function.

<script>

$(document).ready(function() {

    $("#input1").keydown(function() {

        var inputText = this.value;

        var textLength = inputText.length;

        if (textLength <= 0) {

            $('#input2').hide("fast");

        } else {

            $('#input2').show("fast");

        }

    });

});

JS fiddle

edited May 1 '16 at 4:56

answered May 1 '16 at 4:45

gihan

1,8621851

how are you getting inputTextlength?

– Navoneel Talukdar
May 1 '16 at 4:46

1

This doesn't work. The keydown event is triggered before the input's .value updates, so the .length won't be correct yet. Also, what if the user edits the field without using the keyboard?

– nnnnnn
May 1 '16 at 4:52

post edited its working.

– gihan
May 1 '16 at 4:57

add a comment |

you can wrap it on jquery keydown or keyup function.

<script>

$(document).ready(function() {

    $("#input1").keydown(function() {

        var inputText = this.value;

        var textLength = inputText.length;

        if (textLength <= 0) {

            $('#input2').hide("fast");

        } else {

            $('#input2').show("fast");

        }

    });

});

JS fiddle

edited May 1 '16 at 4:56

answered May 1 '16 at 4:45

gihan

1,8621851

how are you getting inputTextlength?

– Navoneel Talukdar
May 1 '16 at 4:46

1

This doesn't work. The keydown event is triggered before the input's .value updates, so the .length won't be correct yet. Also, what if the user edits the field without using the keyboard?

– nnnnnn
May 1 '16 at 4:52

post edited its working.

– gihan
May 1 '16 at 4:57

add a comment |

you can wrap it on jquery keydown or keyup function.

<script>

$(document).ready(function() {

    $("#input1").keydown(function() {

        var inputText = this.value;

        var textLength = inputText.length;

        if (textLength <= 0) {

            $('#input2').hide("fast");

        } else {

            $('#input2').show("fast");

        }

    });

});

JS fiddle

edited May 1 '16 at 4:56

answered May 1 '16 at 4:45

gihan

1,8621851

you can wrap it on jquery keydown or keyup function.

<script>

$(document).ready(function() {

    $("#input1").keydown(function() {

        var inputText = this.value;

        var textLength = inputText.length;

        if (textLength <= 0) {

            $('#input2').hide("fast");

        } else {

            $('#input2').show("fast");

        }

    });

});

JS fiddle

edited May 1 '16 at 4:56

answered May 1 '16 at 4:45

gihan

1,8621851

edited May 1 '16 at 4:56

answered May 1 '16 at 4:45

gihan

1,8621851

answered May 1 '16 at 4:45

gihan

1,8621851

answered May 1 '16 at 4:45

gihan

1,8621851

how are you getting inputTextlength?

– Navoneel Talukdar
May 1 '16 at 4:46

1

This doesn't work. The keydown event is triggered before the input's .value updates, so the .length won't be correct yet. Also, what if the user edits the field without using the keyboard?

– nnnnnn
May 1 '16 at 4:52

post edited its working.

– gihan
May 1 '16 at 4:57

add a comment |

how are you getting inputTextlength?

– Navoneel Talukdar
May 1 '16 at 4:46

1

This doesn't work. The keydown event is triggered before the input's .value updates, so the .length won't be correct yet. Also, what if the user edits the field without using the keyboard?

– nnnnnn
May 1 '16 at 4:52

post edited its working.

– gihan
May 1 '16 at 4:57

how are you getting inputTextlength?

– Navoneel Talukdar
May 1 '16 at 4:46

This doesn't work. The keydown event is triggered before the input's .value updates, so the .length won't be correct yet. Also, what if the user edits the field without using the keyboard?

– nnnnnn
May 1 '16 at 4:52

post edited its working.

– gihan
May 1 '16 at 4:57

add a comment |

You need to add event listeners for these elements. Example using mostly your original code.

$(document).ready(function() {

    $('#input1').on("keyup", function() {

        var inputText = document.getElementById("input1");

        var textLength = inputText.value.length;

        if (textLength <= 0) {

            $("#input2").hide("fast");

        } else {

            $("#input2").show("fast");

        }

    })

});

answered May 1 '16 at 4:48

dYale

868917

add a comment |

You need to add event listeners for these elements. Example using mostly your original code.

$(document).ready(function() {

    $('#input1').on("keyup", function() {

        var inputText = document.getElementById("input1");

        var textLength = inputText.value.length;

        if (textLength <= 0) {

            $("#input2").hide("fast");

        } else {

            $("#input2").show("fast");

        }

    })

});

answered May 1 '16 at 4:48

dYale

868917

add a comment |

You need to add event listeners for these elements. Example using mostly your original code.

$(document).ready(function() {

    $('#input1').on("keyup", function() {

        var inputText = document.getElementById("input1");

        var textLength = inputText.value.length;

        if (textLength <= 0) {

            $("#input2").hide("fast");

        } else {

            $("#input2").show("fast");

        }

    })

});

answered May 1 '16 at 4:48

dYale

868917

You need to add event listeners for these elements. Example using mostly your original code.

$(document).ready(function() {

    $('#input1').on("keyup", function() {

        var inputText = document.getElementById("input1");

        var textLength = inputText.value.length;

        if (textLength <= 0) {

            $("#input2").hide("fast");

        } else {

            $("#input2").show("fast");

        }

    })

});

answered May 1 '16 at 4:48

dYale

868917

answered May 1 '16 at 4:48

dYale

868917

answered May 1 '16 at 4:48

dYale

868917

answered May 1 '16 at 4:48

dYale

868917

add a comment |

$('#input1').on('input', function() {

    $('#input2').toggle($(this).val().length === 0);

});

answered May 1 '16 at 4:54

Yordan Ivanov

49749

add a comment |

$('#input1').on('input', function() {

    $('#input2').toggle($(this).val().length === 0);

});

answered May 1 '16 at 4:54

Yordan Ivanov

49749

add a comment |

$('#input1').on('input', function() {

    $('#input2').toggle($(this).val().length === 0);

});

answered May 1 '16 at 4:54

Yordan Ivanov

49749

$('#input1').on('input', function() {

    $('#input2').toggle($(this).val().length === 0);

});

answered May 1 '16 at 4:54

Yordan Ivanov

49749

answered May 1 '16 at 4:54

Yordan Ivanov

49749

answered May 1 '16 at 4:54

Yordan Ivanov

49749

answered May 1 '16 at 4:54

Yordan Ivanov

49749

add a comment |

This solution assumes that you have two input textbox only.

First assign a common class like

input1

<input type='text' id='input1' class='input' name='input1'>

<br>

input2

<input type='text' id='input2' class='input' name='input2'>

<br>



   $(".input").change(function(){

        alert(this.id);

        if(this.id == 'input1')

        {                 

              if ($(this).val().length > 0){

              $("#input2").show();

              } else {

              $("#input2").hide();

              }             

        }

        else

        {

             if ($(this).val().length > 0){

              $("#input1").show();

              } else {

              $("#input1").hide();

              }      

        }           

    });

edited May 1 '16 at 5:06

answered May 1 '16 at 4:53

Navoneel Talukdar

2,76231132

A function that explicitly references both inputs' ids isn't really "more generic", but in any case this doesn't work. The object referred to by this doesn't have a .val() method. Also the keydown event is triggered before the input's value updates, so the .length won't be correct. Also, what if the user edits the field without using the keyboard?

– nnnnnn
May 1 '16 at 4:59

@nnnnnn ..agreed with you .have updated answer ..it works as per the html stated in question.

– Navoneel Talukdar
May 1 '16 at 5:15

add a comment |

This solution assumes that you have two input textbox only.

First assign a common class like

input1

<input type='text' id='input1' class='input' name='input1'>

<br>

input2

<input type='text' id='input2' class='input' name='input2'>

<br>



   $(".input").change(function(){

        alert(this.id);

        if(this.id == 'input1')

        {                 

              if ($(this).val().length > 0){

              $("#input2").show();

              } else {

              $("#input2").hide();

              }             

        }

        else

        {

             if ($(this).val().length > 0){

              $("#input1").show();

              } else {

              $("#input1").hide();

              }      

        }           

    });

edited May 1 '16 at 5:06

answered May 1 '16 at 4:53

Navoneel Talukdar

2,76231132

A function that explicitly references both inputs' ids isn't really "more generic", but in any case this doesn't work. The object referred to by this doesn't have a .val() method. Also the keydown event is triggered before the input's value updates, so the .length won't be correct. Also, what if the user edits the field without using the keyboard?

– nnnnnn
May 1 '16 at 4:59

@nnnnnn ..agreed with you .have updated answer ..it works as per the html stated in question.

– Navoneel Talukdar
May 1 '16 at 5:15

add a comment |

This solution assumes that you have two input textbox only.

First assign a common class like

input1

<input type='text' id='input1' class='input' name='input1'>

<br>

input2

<input type='text' id='input2' class='input' name='input2'>

<br>



   $(".input").change(function(){

        alert(this.id);

        if(this.id == 'input1')

        {                 

              if ($(this).val().length > 0){

              $("#input2").show();

              } else {

              $("#input2").hide();

              }             

        }

        else

        {

             if ($(this).val().length > 0){

              $("#input1").show();

              } else {

              $("#input1").hide();

              }      

        }           

    });

edited May 1 '16 at 5:06

answered May 1 '16 at 4:53

Navoneel Talukdar

2,76231132

This solution assumes that you have two input textbox only.

First assign a common class like

input1

<input type='text' id='input1' class='input' name='input1'>

<br>

input2

<input type='text' id='input2' class='input' name='input2'>

<br>



   $(".input").change(function(){

        alert(this.id);

        if(this.id == 'input1')

        {                 

              if ($(this).val().length > 0){

              $("#input2").show();

              } else {

              $("#input2").hide();

              }             

        }

        else

        {

             if ($(this).val().length > 0){

              $("#input1").show();

              } else {

              $("#input1").hide();

              }      

        }           

    });

edited May 1 '16 at 5:06

answered May 1 '16 at 4:53

Navoneel Talukdar

2,76231132

edited May 1 '16 at 5:06

answered May 1 '16 at 4:53

Navoneel Talukdar

2,76231132

answered May 1 '16 at 4:53

Navoneel Talukdar

2,76231132

answered May 1 '16 at 4:53

Navoneel Talukdar

2,76231132

A function that explicitly references both inputs' ids isn't really "more generic", but in any case this doesn't work. The object referred to by this doesn't have a .val() method. Also the keydown event is triggered before the input's value updates, so the .length won't be correct. Also, what if the user edits the field without using the keyboard?

– nnnnnn
May 1 '16 at 4:59

@nnnnnn ..agreed with you .have updated answer ..it works as per the html stated in question.

– Navoneel Talukdar
May 1 '16 at 5:15

add a comment |

A function that explicitly references both inputs' ids isn't really "more generic", but in any case this doesn't work. The object referred to by this doesn't have a .val() method. Also the keydown event is triggered before the input's value updates, so the .length won't be correct. Also, what if the user edits the field without using the keyboard?

– nnnnnn
May 1 '16 at 4:59

@nnnnnn ..agreed with you .have updated answer ..it works as per the html stated in question.

– Navoneel Talukdar
May 1 '16 at 5:15

A function that explicitly references both inputs' ids isn't really "more generic", but in any case this doesn't work. The object referred to by this doesn't have a .val() method. Also the keydown event is triggered before the input's value updates, so the .length won't be correct. Also, what if the user edits the field without using the keyboard?

– nnnnnn
May 1 '16 at 4:59

@nnnnnn ..agreed with you .have updated answer ..it works as per the html stated in question.

– Navoneel Talukdar
May 1 '16 at 5:15

add a comment |

Replace your javascript with this code! This code improves the performance of your application as it uses selectors only once!

$(document).ready(function () {

  var input1 = $('#input1');

  var input2 = $('#input2');



  input2.hide("fast");

  input1.on('keyup', function() {

      if(input1.val().length) {

        input2.show("fast");

      } else {

        input2.hide("fast");

      }

  });

});

answered May 1 '16 at 6:54

Santosh

719617

add a comment |

Replace your javascript with this code! This code improves the performance of your application as it uses selectors only once!

$(document).ready(function () {

  var input1 = $('#input1');

  var input2 = $('#input2');



  input2.hide("fast");

  input1.on('keyup', function() {

      if(input1.val().length) {

        input2.show("fast");

      } else {

        input2.hide("fast");

      }

  });

});

answered May 1 '16 at 6:54

Santosh

719617

add a comment |

Replace your javascript with this code! This code improves the performance of your application as it uses selectors only once!

$(document).ready(function () {

  var input1 = $('#input1');

  var input2 = $('#input2');



  input2.hide("fast");

  input1.on('keyup', function() {

      if(input1.val().length) {

        input2.show("fast");

      } else {

        input2.hide("fast");

      }

  });

});

answered May 1 '16 at 6:54

Santosh

719617

Replace your javascript with this code! This code improves the performance of your application as it uses selectors only once!

$(document).ready(function () {

  var input1 = $('#input1');

  var input2 = $('#input2');



  input2.hide("fast");

  input1.on('keyup', function() {

      if(input1.val().length) {

        input2.show("fast");

      } else {

        input2.hide("fast");

      }

  });

});

answered May 1 '16 at 6:54

Santosh

719617

answered May 1 '16 at 6:54

Santosh

719617

answered May 1 '16 at 6:54

Santosh

719617

answered May 1 '16 at 6:54

Santosh

719617

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk