How to add a class in the form after page return

Asked

Viewed 49 times

0

I have an input of type Hidden that takes the name of the menu that was selected that was returning from the application, it can receive (tempos, shutdown, values) After the return of the post, 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

  • It goes back to the initial pq after sending the form the page reloads, then back to the initial tab.

  • You can post the code so we can run tests and find a solution?

  • You can after post the form you can put the class . active in the tab that interests you how much you are building the server side tab.

  • @Leocaracciolo, I added the hmtl code with a form, after the post, I want to keep the same tab open

  • @Jorgecosta, how can I return the form with the same tab open? thank you

  • What is the server-side language

  • @Jorgecosta, Asp.net webformes,

  • You can post the code

  • @Jorgecosta, I posted the code, basically it just records the form

  • @Leocaracciolo, I simplified my question, see, I get a content in my input, I want the menu to receive the class according to what I’m getting in this input

  • @Leocaracciolo, the top code works, I can add the class where I need it, but I wanted to add the class dynamically

Show 6 more comments

1 answer

0

Your function will be dynamic this way:

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 once.

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

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

Browser other questions tagged javascript jquery

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