Insert text from a variable (resulting from an if) within a <p> after a button click

Asked

Viewed 63 times

0

I am trying to validate the existence of a class in 3 ids to return a text that will be inserted in a p after clicking the send button of a form. I inserted the onclick in the button having the function as value. I don’t know where I’m going wrong, but even the class existing the value I want in p is not passing.

button:

<button onclick="mensagemerro()" type="submit" name="mauticform[submit]" id="mauticform_input_teste_submit" name="mauticform[submit]" value="" class="mauticform-button btn btn-default" value="1">EXPERIMENTE GRÁTIS</button>`

div with p and Function: 

<div class="ajuste-resposta-form">
    <p id="resposta"></p>
    <script>
        function mensagemerro() {
        var nome = $("#mauticform_teste_nome").hasClass("mauticform-has-error");
        var email = $("#mauticform_teste_email").hasClass("mauticform-has-error");
        var telefone = $("#mauticform_teste_telefone").hasClass("mauticform-has-error");
        if (nome || email || telefone == true) {
        texto = "O preenchimento dos campos abaixo é obrigatório";
        }
          document.getElementById("resposta").innerHTML = texto;
    }
    </script>
</div>
javascript html jquery

  • The form is submitted even with errors or this mautic cancels the submission?

  • The mautic itself cancels the shipment.

1 answer

1


I guess you weren’t including jQuery in your code, since you’re working with .hasClass().

I left the first <input> with the class .mauticform-has-error for testing, if you withdraw you can see that it does not go through the if.

Code of how it turned out:

function mensagemerro(){
    var nome = $("#mauticform_teste_nome").hasClass("mauticform-has-error");
    var email = $("#mauticform_teste_email").hasClass("mauticform-has-error");
    var telefone = $("#mauticform_teste_telefone").hasClass("mauticform-has-error");
    if (nome == true || email == true || telefone == true){
        texto = "O preenchimento dos campos é obrigatório";
        document.getElementById("resposta").innerHTML = texto;
    }
}
<!DOCTYPE html>
<html>
<head>
     <title> teste </title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
     <div>
         <input type="text" id="mauticform_teste_nome" class="mauticform-has-error">
         <input type="text" id="mauticform_teste_email" class="">
         <input type="number" id="mauticform_teste_telefone" class="">
         <button onclick="mensagemerro()" type="submit" name="mauticform[submit]" id="mauticform_input_teste_submit" name="mauticform[submit]" value="" class="mauticform-button btn btn-default" value="1">EXPERIMENTE GRÁTIS</button>
     </div>
     <div class="ajuste-resposta-form">
         <p id="resposta"></p>
     </div>
</body>
</html>

  • Hi Gabriel, Jquery is there, but it still doesn’t work. I tested the return of variables in the console and worked well, I think the problem is when I try to insert the text in the p.

  • you tested this code I put in? it’s inserting the text....

  • I tested yes, but also did not roll.

  • It worked. The mautic was not letting the code run, when I put everything inside the button’s div rolled. :)

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.