CODEWITHSUNDEEP
javascriptjqueryhtml
java
java

Reputation: 1165

Show hidden input javascript/jquery

Why is the hidden form not shown when it looses focus? The alert is coming up nicely when leaving the input but the other hidden form is still not there.

html

<body>
   <input type="text" id="myinput" value="">
   <input type="hidden" id="validation_message_email" value="enter a valid email">
</body>

javascript

window.onload = function() {
   $("#myinput").blur(myAlert);
};

function myAlert() {
   alert("This input field has lost its focus.");
   $("#validation_message_email").show();
}

Upvotes: 0

Views: 4952

Answers (6)

Punit
Punit

Reputation: 460

Check this jsfiddle link, it might help you.

$("#myinput").blur( function(){

myAlert();

});

function myAlert() {
   $("#validation_message_email").attr("type", "text");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="text" id="myinput" value="">
<input type="hidden" id="validation_message_email" value="enter a valid email">

Upvotes: 0

ubair noor
ubair noor

Reputation: 101

 <div class="form-group" id="usernamediv">

 <input class="form-control" name="username" id="username"
     placeholder="Username" type="text"  required=""> </div>
 <div class="form-group" id="passworddiv">
  <input name="password" class="form-control" id="password" placeholder="Password"  type="password" required="">
  </div>
<button id="#loginButton">Login</button>
<button id="#forgotpassword">Forgot Password</button>


<script>
$("#forgotpassword").hide();
$("#forgotpassword").click(function(e){
$("#loginButton").hide();
$("#usernamediv").show();
$("#passworddiv").hide();
})


</script>

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68433

validation_message_email doesn't have its display style property as none, so show() will not make it visible from type="hidden".

You need to replace

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

with

$("#validation_message_email").attr( "type", "text" );

However, if the intent is to only show a message, then you don't need to use a hidden input for the same.

<body>
   <input type="text" id="myinput" value="">
</body>

and 

window.onload = function() {
   $("#myinput").blur(function(){
      alert("This input field has lost its focus.");
      $(this).append('<span id="emailValidationMessage">enter a valid email</span>')
   });
   $("#myinput").focus(function(){
      $("#emailValidationMessage").remove();
   });
};

Upvotes: 1

Anoop Joshi P
Anoop Joshi P

Reputation: 25537

You can't display a hidden input like that.A span will suit better for this purpose,

<input type="text" id="myinput" value="">
<span style="display:none"  id="validation_message_email">enter a valid email</span>

Upvotes: 5

Mani
Mani

Reputation: 2655

use like this

<input type="text" id="myinput" value="">
<input type="hidden" id="validation_message_email" value="enter a valid email">

<script>   
window.onload = function() {
    $("#myinput").blur(myAlert);
};

function myAlert() {
   $("#validation_message_email").attr("type","text");
}
</script>

Upvotes: 0

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10197

No need to use type="hidden" as hidden elements are not display:none they are hidden by default.

Use type="text" and hide it with css and show where you want

<input type="text" id="myinput" value="" style="display:none;">

Upvotes: 0

Related Questions