How to add a class in form after page return

Question

How to add a class in form after page return

Navigation

#1 by (0 votes)

0

I have an input of type hidden that gets the name of the menu that was selected that was returning from the application, it can receive (progress, closure, values) After the postback, I want the menu that was received in the input to be active (class="tab-pane fade active" I have my form:

    <script>


                function AdicionarClasseMenuSelecionado(){
                    var menuatual = document.getElementById('MenuSelecionado').value;
                        alert(menuatual);

                        //remove todos os active
                        $("#aba1").removeClass("active");
                        $("#aba2").removeClass("active");
                        $("#aba3").removeClass("active");

                        //adiciona o active de acordo com o input
                        $("#andamentos").addClass("active in");
                        $("#aba2").addClass("active");
                    }



    </script>

      <div class="container">


                        <button type="button" onclick="AdicionarClasseMenuSelecionado()" class="btn btn-default">Teste</button>

                        <input name="MenuSelecionado" type="hidden"  value="andamentos" id="MenuSelecionado">


                        <form action="#" method="POST" class="form-horizontal" role="form">
                                <div class="form-group">
                                    <legend>Cadastro Teste</legend>
                                </div>

                        <ul class="nav nav-tabs">
                          <li class="active" id="aba1"><a data-toggle="tab"    href="#encerramento">Encerramento</a></li>
                          <li id="aba2"><a data-toggle="tab"  href="#andamentos">Andamentos</a></li>
                          <li id="aba3"><a data-toggle="tab"   href="#valores">Valores</a></li>
                        </ul>

                        <div class="tab-content">

                          <div id="encerramento" class="tab-pane fade active">
                            <h3>Encerramento</h3>
                            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                          </div>

                          <div id="andamentos" class="tab-pane fade ">
                            <h3>Andamentos</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                          </div>

                          <div id="valores" class="tab-pane fade ">
                            <h3>Valores</h3>
                            <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                          </div>

                        </div>

                        <div class="form-group">
                                <div class="col-sm-10 col-sm-offset-2">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                       </form>

                  </div>

javascript jquery

asked by anonymous 18.07.2018 / 19:02

1 answer

What is the reason for the "This view is not constrained ..." error in ConstraintLayout? soket.io - doubt

score 0 · Answer 1

Your function will be dynamic like this:

function AdicionarClasseMenuSelecionado(){
   var menuatual = document.getElementById('MenuSelecionado').value;
   alert(menuatual);

   //remove todos os active
   $("ul.nav-tabs li").removeClass("active");

   //adiciona o active de acordo com o input
   $("#"+menuatual).addClass("active in");
   $("ul.nav-tabs li a[href='#"+menuatual+"']").addClass("active");
}

Here $("ul.nav-tabs li").removeClass("active"); you remove the class from all <li> at one time.

Here $("#"+menuatual).addClass("active in"); you add the class to the element that has id equal to the value of input , just concatenating the # symbol before to select the element.

Here $("ul.nav-tabs li a[href='#"+menuatual+"']").addClass("active"); you add the class to the <a> element that has the href attribute equal to the input value, also concatenating the # symbol.