如何选择非空值输入并隐藏输入并显示另一个输入呢？

Question

I want to select non empty input then hide it after click and show another input instead of hidden input.

Here is my sample code:

 $(".signupbtn").on('click', function(){ $('input:text').each(function(){ if ($(this).val().length == 0){ } else { $(this).hide(); //What I should add here? } }); }); 

 .hideme { display: none; visibility: hidden; } .showme { display: inline; visibility: visible; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="" method="POST" onsubmit="return false;"> <input class="form-control showme" type="text" placeholder="text1" name="" value=""> <input class="form-control hideme" value="Successfully Received!" readonly> <input class="form-control showme" type="text" placeholder="text2" name="" value=""> <input class="form-control hideme" value="Successfully Received!" readonly> <input class="form-control showme" type="text" placeholder="text3" name="" value=""> <input class="form-control hideme" value="Successfully Received!" readonly> <button type="submit" class="signupbtn">Sign Up</button> </form> 

Answer 1

Though the approach you take for your task is kinda strange here is the way to do it:

 $(".signupbtn").on("click", function () { $("input:text.showme").each(function () { if (!$(this).val() || $(this).val().length <= 0) { return; } $(this).next("input:text.hideme") .show() .css({"visibility": "visible", "display": "inline"}); $(this).hide(); }); }); 

 .hideme { display: none; visibility: hidden; } .showme { display: inline; visibility: visible; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="" method="POST" onsubmit="return false;"> <input class="form-control showme" type="text" placeholder="text1" name="" value=""> <input class="form-control hideme" value="Successfully Received!" readonly/> <input class="form-control showme" type="text" placeholder="text2" name="" value=""> <input class="form-control hideme" value="Successfully Received!" readonly/> <input class="form-control showme" type="text" placeholder="text3" name="" value=""> <input class="form-control hideme" value="Successfully Received!" readonly/> <button type="submit" class="signupbtn">Sign Up</button> </form> 

---

EDIT01:

To have a generalized solution for all form relevant items:

 $(".signupbtn").on("click", function () { $("input.showme, textarea.showme, select.showme").each(function () { if (!$(this).val() || $(this).val().length <= 0) { return; } $(this).next("input.hideme, textarea.hideme, select.hideme") .show() .css({"visibility": "visible", "display": "inline"}); $(this).hide(); }); }); 

 .hideme { display: none; visibility: hidden; } .showme { display: inline; visibility: visible; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="" method="POST" onsubmit="return false;"> <input class="form-control showme" type="text" placeholder="text1" name="" value=""> <input class="form-control hideme" value="Successfully Received!" readonly /> <textarea class="form-control showme" placeholder="text2" name=""></textarea> <textarea class="form-control hideme" readonly>Successfully Received!</textarea> <select class="form-control showme" name="" value=""> <option>0</option> <option>1</option> </select> <select class="form-control hideme" readonly > <option>Successfully Received!</option> </select> <button type="submit" class="signupbtn">Sign Up</button> </form>