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

36311121

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

36311121

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

36311121

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

36311121

asked May 1 '16 at 4:38

DinhNgocHien

36311121

asked May 1 '16 at 4:38

DinhNgocHien

36311121

asked May 1 '16 at 4:38

DinhNgocHien

36311121

asked May 1 '16 at 4:38

DinhNgocHien

36311121

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

19.6k103753

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,8201851

how are you getting inputTextlength?
– Navoneel
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

848817

add a comment |

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

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

});

answered May 1 '16 at 4:54

Yordan Ivanov

47749

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

2,68431132

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
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

687617

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

19.6k103753

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

19.6k103753

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

19.6k103753

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

19.6k103753

answered May 1 '16 at 5:29

Mohammad Usman

19.6k103753

answered May 1 '16 at 5:29

Mohammad Usman

19.6k103753

answered May 1 '16 at 5:29

Mohammad Usman

19.6k103753

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,8201851

how are you getting inputTextlength?
– Navoneel
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,8201851

how are you getting inputTextlength?
– Navoneel
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,8201851

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,8201851

edited May 1 '16 at 4:56

answered May 1 '16 at 4:45

gihan

1,8201851

answered May 1 '16 at 4:45

gihan

1,8201851

answered May 1 '16 at 4:45

gihan

1,8201851

how are you getting inputTextlength?
– Navoneel
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
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
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

848817

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

848817

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

848817

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

848817

answered May 1 '16 at 4:48

dYale

848817

answered May 1 '16 at 4:48

dYale

848817

answered May 1 '16 at 4:48

dYale

848817

add a comment |

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

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

});

answered May 1 '16 at 4:54

Yordan Ivanov

47749

add a comment |

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

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

});

answered May 1 '16 at 4:54

Yordan Ivanov

47749

add a comment |

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

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

});

answered May 1 '16 at 4:54

Yordan Ivanov

47749

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

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

});

answered May 1 '16 at 4:54

Yordan Ivanov

47749

answered May 1 '16 at 4:54

Yordan Ivanov

47749

answered May 1 '16 at 4:54

Yordan Ivanov

47749

answered May 1 '16 at 4:54

Yordan Ivanov

47749

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

2,68431132

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
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

2,68431132

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
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

2,68431132

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

2,68431132

edited May 1 '16 at 5:06

answered May 1 '16 at 4:53

Navoneel

2,68431132

answered May 1 '16 at 4:53

Navoneel

2,68431132

answered May 1 '16 at 4:53

Navoneel

2,68431132

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
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
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
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

687617

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

687617

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

687617

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

687617

answered May 1 '16 at 6:54

Santosh

687617

answered May 1 '16 at 6:54

Santosh

687617

answered May 1 '16 at 6:54

Santosh

687617

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.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

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

搜尋此網誌

Qfyilyi