show a specific div in a javascript function

Question

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

So, let me get this straight: do you want to show the div cd-popup only when you call the validateForm() method? — Choudhury Saadmaan Mahmid
– Choudhury Saadmaan Mahmid, Commented Nov 3, 2014 at 8:35

Choudhury Saadmaan Mahmid · Accepted Answer · 2014-11-03 08:54:34Z

1

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>

answered Nov 3, 2014 at 8:54

Choudhury Saadmaan Mahmid

1,3063 gold badges29 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2894908 Over a year ago

This is not working there is a class called "is-visible" and its come from the template

Choudhury Saadmaan Mahmid Over a year ago

Is is-visible a css class? If so, then you can detach the referenced css file from your home page.

Collectives™ on Stack Overflow

show a specific div in a javascript function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related