JS display div on click of disabled input

Question

I'm trying to show the .hideme message on click of submit only when it is disabled.

And the .hideme should be unique for each submit. I'm not sure if I should use data-attributes to associate them.

$(document).ready(function() {
  $("#post-1").hide();
  $("#post-1").click(postNotification);
});

function postNotification() {
  $("#post-1")
    .show()
    .animate({
      height: "30px",
      opacity: 1
    }, 250)
    .delay(2000)
    .animate({
      height: "0px",
      opacity: 0
    }, 250);
}

.hideme {
  background: blue;
  height: 0px;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">
  <div class="hideme" id="post1">Message 1</div>
  <input type="text" name="name" autocomplete="off" required/>
  <input type="submit" data-submit="1" id="post1" disabled></input>
</div>
<div class="second">
  <div class="hideme" id="post2">Message 2</div>
  <input type="text" name="name" autocomplete="off" required/>
  <input type="submit" data-submit="2" id="post2"></input>
</div>

Duplicated id's .. and on html you're using `post1` and on js you're using `post-1` — Mohamed-Yousef, May 03 '18 at 17:22
Disabled elements don't fire mouse events. You'll have to try a different solution. Possibly creating `divs` that "look" like buttons, and changing the classes of `pointer:cursor;` etc etc https://stackoverflow.com/questions/3100319/event-on-a-disabled-input?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa — Zak, May 03 '18 at 17:26
Possible duplicate of [Event on a disabled input](https://stackoverflow.com/questions/3100319/event-on-a-disabled-input) — dokgu, May 03 '18 at 18:18

score 0 · Answer 1 · answered May 03 '18 at 18:02

instead of using (disabled) you can use css to make element seem to be disabled

.disabled
{
color:#C0C0C0;
}

then add this class to input instead of disabled

<input type="submit" data-submit="1" class="btn disabled" id="post1" ></input>

and in jquery detect that element has enabled or disabled class and decide which action should be done

$(document).ready(function() {
$(".btn").click(
function(event){
if($(event.target).hasClass("disabled")){
event.target.parentElement.querySelector(".hideme").style.opacity="1";
event.target.parentElement.querySelector(".hideme").style.height="30";
}else{
alert("action");
}
});
});

score 0 · Answer 2 · answered May 03 '18 at 18:12

You can't click on disabled tags. You can use a class "disabled":

<style>
    .hideme {
      background: blue;
      height: 0px;
      opacity: 0;
      color: #fff;
    }
    .disabled{
        color: #000;
        opacity: .65;
    }
</style>

Use the same class to show onclick

    <div class="first">
      <div class="hideme ">Message 1</div>
      <input type="text" name="name" autocomplete="off" required/>
      <input type="submit" data-submit="1" id="post1" class="disabled" ></input>
    </div>
    <div class="second">
      <div class="hideme ">Message 2</div>
      <input type="text" name="name" autocomplete="off" required/>
      <input type="submit" data-submit="2" id="post2" class="disabled"></input>
    </div>

Use siblings to get the class ".hideme". Now every disabled button will show the message:

<script>
    $(document).ready(function() {
      $(".msg").hide();

        $(".disabled").click(function(){
            var id = "#"+ this.id;
            $(id).siblings(".hideme")
                .show()
                .animate({
                  height: "30px",
                  opacity: 1
                }, 250)
                .delay(2000)
                .animate({
                  height: "0px",
                  opacity: 0
                }, 250);

        });
    });
</script>

JS display div on click of disabled input

2 Answers2