javascript - Change CSS "display: none;" to shown - Stack Overflow

admin管理员组

文章数量:1339525

I want an element on my website hidden when the website loads, but when a user submits a form, then it changes to show. I have tried for hours now, can't get it to work.

Code:

HTML

<form onsubmit="show();">
<div id="mymessage" class="hidden">Message was sent.</div>

CSS

.hidden {
  display: none;
}

JavaScript

function show () {
  document.getElementById("mymessage").style.display = 'block';
}

Disclaimer: I only included relevant code.

Hope somebody is able to help me/spot the error!

I want an element on my website hidden when the website loads, but when a user submits a form, then it changes to show. I have tried for hours now, can't get it to work.

Code:

HTML

<form onsubmit="show();">
<div id="mymessage" class="hidden">Message was sent.</div>

CSS

.hidden {
  display: none;
}

JavaScript

function show () {
  document.getElementById("mymessage").style.display = 'block';
}

Disclaimer: I only included relevant code.

Hope somebody is able to help me/spot the error!

• javascript
• html
• css
• forms
• display

Share Follow asked Sep 2, 2017 at 17:00 thesystemthesystem 61422 gold badges1212 silver badges3636 bronze badges 2

• 2 how you are submitting form? using form action or ajax? – Dinesh undefined Commented Sep 2, 2017 at 17:05
• @Dinesh I am submitting with PHP – thesystem Commented Sep 2, 2017 at 17:18

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 9

You have to return false to prevent the browser from refreshing the page so that you can hide the element on submit:

function show () {
  document.getElementById("mymessage").style.display = 'block';
  return false;
}

.hidden {
  display: none;
}

<form onsubmit="return show();">


<button>enviar</button>
</form>
<div id="mymessage" class="hidden">Message was sent.</div>

I would remove the hidden class:

function show () {
  document.getElementById("mymessage").classList.remove("hidden");
}

(classList has very broad support, and can be polyfilled on obsolete browsers if necessary.)

Live Example (using a button click instead of a form submit):

function show () {
  document.getElementById("mymessage").classList.remove("hidden");
  return false;
}

.hidden {
  display: none;
}

<form>
<div id="mymessage" class="hidden">Message was sent.</div>
<input type="button" onclick="show();" value="Click Me">

i think this is a solution

document.getElementById("mymessage").classList.remove("hidden");

What about if you use jQuery instead?

</script>
    <script>
    $(document).ready(function(){
        $("form").submit(function(){
            jQuery('#mymessage').show();
        });
    });
    </script>

Remember to add the library above the code.

<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js">

本文标签： javascriptChange CSS quotdisplay nonequot to shownStack Overflow