CODEWITHSUNDEEP
javascriptjqueryhtml
user2894908
user2894908

Reputation:

show a specific div in a javascript function

I want to know how I show a specific div at a specific function only. I want to show the following div called "cd-popup" in my javascript function called "validateForm()".

<script type="text/javascript">
   function validateForm() {
      var x = document.getElementById("email-id").value;
      if ( x == null || x == "" ) {
         $('.cd-popup').addClass('is-visible');
      }
   }
</script>
<div class="cd-popup" role="alert">
   <div class="cd-popup-container" style="margin-left: 10%;">
      <p style="color: #5b5b5b;">Are you sure you want to delete this element?</p>
      <a href="#0" class="cd-popup-close img-replace">Close</a>
      <!-- <img id="close"  style="position: absolute;right: -14px;top: -14px; cursor: pointer;" onclick ="div_hide()"> -->
   </div>
   <!-- cd-popup-container -->
</div>
<!-- cd-popup -->

Also I have entered the email div where I called to the function through "onblur"

<!-- EMAIL -->
<div class="col-lg-6 col-xs-6">
   <div class="form-group">
       <input type="email" class="form form-control email requiretop" placeholder="Your email" name="email" id="email-id" onblur="return validateForm()">
   </div>
</div>

I want to show the div cd-popup only when you call the validateForm() method

Upvotes: 0

Views: 99

Answers (1)

Choudhury Saadmaan Mahmid
Choudhury Saadmaan Mahmid

Reputation: 1316

This is a simple show-hide div phenomena, jQuery .show() and .hide() elements are the perfect solution to this. Just modify your script in the following way:

<script type="text/javascript">
function validateForm() {
    var x = document.getElementById("email-id").value;
    if ( x == null || x == "" ) {
        $('.cd-popup').show();
    }
    else{
        $('.cd-popup').hide(); 
    }
}

</script>

Upvotes: 1

Related Questions