CODEWITHSUNDEEP
javascriptjquery
Helix
Helix

Reputation: 59

jquery dectects div element visibility as true even though not visible

I have a simple form and I have jquery code that determines if a div element with id="placeholder" is visible. If it is visible then show an alert box with an error message if not then show an alert box with an ok message. The problem is that when I click on the submit button, it shows the error message in the alert box instead of the OK alert message. What's puzzling is that it still shows the error alter box even though the div element does not have innerHTML text. What can be wrong with the code?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form>
  <fieldset>
    <legend>Your Information:</legend>
    First name:
    <br>
    <input type="text" name="firstname">
    <br>Last name:
    <br>
    <input type="text" name="lastname">
    <br>
    <br>
    <input type="button" value="Submit" onclick="dopost()">
  </fieldset>
</form>

<div id="placeholder"></div>

<script>
  function dopost() {

    if ($('#placeholder').is(':visible')) {

      alert('Found errors in the form, please correct them!');

    } else {

      alert('no errors');

    }

  }
</script>

Upvotes: 1

Views: 72

Answers (1)

Vikram Pote
Vikram Pote

Reputation: 5579

Try this one.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form>
  <fieldset>
    <legend>Your Information:</legend>
    First name:
    <br>
    <input type="text" name="firstname">
    <br>Last name:
    <br>
    <input type="text" name="lastname">
    <br>
    <br>
    <input type="button" value="Submit" onclick="dopost()">
  </fieldset>
</form>

<div id="placeholder" style="visibility:hidden;"></div>

<script>
  function dopost() {
     
    if ($('#placeholder').attr('visibility')=='visible') {

      alert('Found errors in the form, please correct them!');

    } else {

      alert('no errors');

    }

  }
</script>

Upvotes: 2

Related Questions