Question 227483 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – is there a way to change the class on a div by clicking on an input button?

I have a div that I want hidden on page load. The class name on the div is "messages-hide"

When I click on a submit button, I want to change the class on that div to "messages-show".

My HTML is:

<div class="messages-hide"></div>
<input type="submit" id="btnSubmit" value="Send the request" />

My CSS is:

.messages-hide {
    display: none;
}

.messages-show {
    display: block;
}

The submit button works as is, but it’s not changing the class (obviously).

I’m assuming this is fairly simple using Javascript or jQuery, but I don’t know where to begin.

I’ve found several solutions that look like they should work, but nothing that works specifically with an input/submit button. I’ve already spent hours on this. Figure it’s time to ask for help…

I’m open to anything that will work.

Any help will be greatly appreciated… thanks!

Tags:

2

Answers


  1. 0

    There are multiple ways to do this.

    The simplest way in my opinion is have a default class lets call it messages. And in that class is display none.

    Then have a class called show that is display block.

    Then on click of your button simply add the show class to the messages div.

    However, one note is if its a submit button in a form, once the form reloads the page the messages will be hidden again. Unless you have more going on in your javascript submit/click function that you haven’t posted.

    Update
    If you want to show the messages div after page load, then you can use localStorage.getItem and localStorage.setItem.

    Due to the limitations in the snippet tool, I can’t enable localStorage. But for your implementation, just uncomment those lines.

    const btnSubmit = document.querySelector("#btnSubmit");
const messages = document.querySelector(".messages");

//const showMsgs = (localStorage.getItem("showMsgs"))

//if(showMsgs)messages.classList.add("show")

btnSubmit.addEventListener("click",(e) => {
  messages.classList.add("show")
//  localStorage.setItem("showMsgs",1)
});
    .messages{
    display: none;
}

.messages.show{
    display: block;
}
    <div class="messages">MESSAGES</div>
<input type="submit" id="btnSubmit" value="Send the request" />
    Login or Signup to reply.
  2. 0

    You can use JavaScript to handle the click event of the submit button and change the class name of the div with the class "messages-hide" to "messages-show". Make sure to add some CSS to control the visibility of the div based on its class.

    Here’s a full example:

    HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Message</title>
    <style>
        .messages-hide {
            display: none;
        }
        .messages-show {
            display: block;
        }
    </style>
</head>
<body>
    <div class="messages-hide">Your message goes here.</div>
    <input type="submit" id="btnSubmit" value="Send the request" />
    <script src="script.js"></script>
</body>
</html>

    JavaScript (script.js):

    document.getElementById('btnSubmit').addEventListener('click', function() {
  var div = document.querySelector('.messages-hide');
  if (div) {
    div.className = 'messages-show';
  }
});

    This code will switch the class of the div from "messages-hide" to "messages-show" when the submit button is clicked, and your message will become visible if it’s hidden. Make sure the CSS is set up to hide the "messages-hide" class and show the "messages-show" class as demonstrated above.

    You can also use a toggle-like behavior to show and hide the div on successive clicks of the submit button. You can achieve this by checking the current class and then changing it accordingly.

    Here’s the updated JavaScript code:

    document.getElementById('btnSubmit').addEventListener('click', function() {
  var div = document.querySelector('.messages-hide') || document.querySelector('.messages-show');
  if (div) {
    if (div.className === 'messages-hide') {
      div.className = 'messages-show';
    } else {
      div.className = 'messages-hide';
    }
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search