Problems with 'onsubmit' in 'setTimeout' form and function

Question

When I invoke the 'validate' function nothing happens. What is my mistake? I also need to make the message 'validate' and 'like' functions disappear after 5s (I could not use setTimeout)

function dislike() {
  document.getElementsByClassName('esconde')[0].style.display = "block";
}

function like() {
  document.getElementsByClassName('bot')[0].innerHTML = "<h1 style='text-shadow: 0px 2px lime; color: #333;'>Obrigado!!!</h1>";
}

function valida() {
  document.getElementsByClassName('bot')[0].innerHTML = "<h2>Tentaremos melhorar!</h2>";
}

legend {
  margin-top: 10px;
  margin-left: 20px;
}

button {
  border: none;
  background-color: lemonchiffon;
  border-radius: 50%;
  margin-right: 10px;
  padding: 10px;
  box-shadow: 0px 8px #666;
  cursor: pointer;
  vertical-align: top;
}

#azul:active {
  background-color: skyblue;
  cursor: pointer;
  box-shadow: 0px 5px black;
  margin-top: 7px;
}

#red:active {
  background-color: tomato;
  cursor: pointer;
  box-shadow: 0px 5px black;
  margin-top: 7px;
}

.btn2 {
  border-radius: 20px;
  padding: 5px;
  background-color: lightgreen;
}

.btn2:active {
  box-shadow: 0px 5px black;
  margin-top: 7px;
}

.esconde {
  display: none;
  margin-top: -15px;
}

.bot {
  float: right;
  margin-top: -20%;
  margin-right: 40%;
  text-align: center;
}

<div class="bot">
  <h2>Avalie nosso site</h2>
  <button onclick="like()" id="azul">
			<span class="fa fa-thumbs-o-up fa-3x" style="color: navy;"></span>
		</button>
  <button onclick="dislike()" id="red">
			<span class="fa fa-thumbs-o-down fa-3x" style="color: red;"></span>
		</button>
  <br>
  <div class="esconde">
    <br>
    <legend style="margin-bottom: -10px;"><strong>O que lhe incomoda?</strong></legend>
    <br>
    <form onsubmit="valida()">
      <fieldset>
        <input type="radio" name="rad" value="porn" checked>Conteúdo pesado<br>
        <input type="radio" name="rad" value="expor">Expôs minha vida íntima<br>
        <input type="radio" name="rad" value="desconf">Sinto desconforto aqui<br>
        <button type="submit" class="btn2">Enviar</button>
      </fieldset>
    </form>
  </div>
</div>

Answer 1

I made a few simple adjustments to see if that’s what you need.

Obs.: When I was testing I needed to remove the margin-top:-20px For I did not appear, I believe that it is so for you due its layout.

<div class="bot">
    <h2>Avalie nosso site</h2>
    <button onclick="like()" id="azul">
        <span class="fa fa-thumbs-o-up fa-3x" style="color: navy;"></span>
    </button>
    <button onclick="dislike()" id="red">
        <span class="fa fa-thumbs-o-down fa-3x" style="color: red;"></span>
    </button>
    <br>
    <div class="esconde">
        <br>
        <legend style="margin-bottom: -10px;"><strong>O que lhe incomoda?</strong></legend>
        <br>
        <form onsubmit="valida()">
            <fieldset>
                <input type="radio" name="rad" value="porn" checked>Conteúdo pesado<br>
                <input type="radio" name="rad" value="expor">Expôs minha vida íntima<br>
                <input type="radio" name="rad" value="desconf">Sinto desconforto aqui<br>
                <button type="submit" class="btn2">Enviar</button>
            </fieldset>
        </form>
    </div>
</div>

Javascript

    function dislike() {
        document.getElementsByClassName('esconde')[0].style.display = "block";
    }

    function like() {
        document.getElementsByClassName('bot')[0].innerHTML = "<h1 style='text-shadow: 0px 2px lime; color: #333;'>Obrigado!!!</h1>";

        encerra('h1');
    }

    function valida() {
        document.getElementsByClassName('bot')[0].innerHTML = "<h2>Tentaremos melhorar!</h2>";
        encerra('h2');
    }

    function encerra(x){
        setTimeout(function(){
            document.getElementsByTagName(x)[0].style.display = "none"
        }, 5000);
    }

I created the function closes with the setTimeout of 5 seconds as you requested in the question, with this you call the function both in valida() how much in like() passing the desired parameter, ex: h1 and h2.

Answer 2

As I said in the comments, I just took the margin-top: -20px; of .bot. Is that right or should something else happen?

function dislike() {
  document.getElementsByClassName('esconde')[0].style.display = "block";
}

function like() {
  document.getElementsByClassName('bot')[0].innerHTML = "<h1 style='text-shadow: 0px 2px lime; color: #333;'>Obrigado!!!</h1>";
}

function valida() {
  document.getElementsByClassName('bot')[0].innerHTML = "<h2>Tentaremos melhorar!</h2>";
}

legend {
  margin-top: 10px;
  margin-left: 20px;
}

button {
  border: none;
  background-color: lemonchiffon;
  border-radius: 50%;
  margin-right: 10px;
  padding: 10px;
  box-shadow: 0px 8px #666;
  cursor: pointer;
  vertical-align: top;
}

#azul:active {
  background-color: skyblue;
  cursor: pointer;
  box-shadow: 0px 5px black;
  margin-top: 7px;
}

#red:active {
  background-color: tomato;
  cursor: pointer;
  box-shadow: 0px 5px black;
  margin-top: 7px;
}

.btn2 {
  border-radius: 20px;
  padding: 5px;
  background-color: lightgreen;
}

.btn2:active {
  box-shadow: 0px 5px black;
  margin-top: 7px;
}

.esconde {
  display: none;
  margin-top: -15px;
}

.bot {
  float: right;
  margin-right: 40%;
  text-align: center;
}

<div class="bot">
  <h2>Avalie nosso site</h2>
  <button onclick="like()" id="azul">
			<span class="fa fa-thumbs-o-up fa-3x" style="color: navy;"></span>
		</button>
  <button onclick="dislike()" id="red">
			<span class="fa fa-thumbs-o-down fa-3x" style="color: red;"></span>
		</button>
  <br>
  <div class="esconde">
    <br>
    <legend style="margin-bottom: -10px;"><strong>O que lhe incomoda?</strong></legend>
    <br>
    <form onsubmit="valida()">
      <fieldset>
        <input type="radio" name="rad" value="porn" checked>Conteúdo pesado<br>
        <input type="radio" name="rad" value="expor">Expôs minha vida íntima<br>
        <input type="radio" name="rad" value="desconf">Sinto desconforto aqui<br>
        <button type="submit" value="submit" class="btn2">Enviar</button>
      </fieldset>
    </form>
  </div>
</div>