problem changing the css class of an element before triggering a form

Navigation
0

I have the application mounted and wanted to make a small effect with css for the customer table, by adding the class rot180 that flips the arrow (selected) to sort the results in the head of the table. Well, in the onclick of the arrow on the arrow that triggers the form, I add a function in javascript that triggers the form and adds this class to the div element, but when I hit the click, it rotates the arrow and then when the form is triggered returns to its previous state without saving this change. Because the results are done are mapped to a route / clients? sort = name and return to the previous view of Clients with the attribution of the clients generated is there any way to change the class and to keep it when doing the submit ()?

Here is where I map the ordering of these clients: 

@RequestMapping(value="/iberClientesEnlace")
    public String clientesListadosModelView(@ModelAttribute(value="Clientes") Clientes c,@RequestParam(value="ordenar")String ordenar,org.springframework.ui.Model m){
       ClientesModel list1=new ClientesModel();
       Clientes c1= new Clientes();
  ClientesModel cmodel=new ClientesModel();
              System.out.println(ordenar);
      m.addAttribute("Clientes", c1);

      if(ordenar.equals("nombre")){
      m.addAttribute("list",list1.getListaNameClientes()); 
    }else if(ordenar.equals("apellidos")){
          m.addAttribute("list",list1.getListaApellidosClientes());

     }else if(ordenar.equals("correo")){

          m.addAttribute("list",list1.getListaCorreoClientes()); 

     }else if(ordenar.equals("edad")){
          m.addAttribute("list",list1.getListaEdadClientes()); 
}
        return "iberClientesVista";
    }

This is the view where the headers of the table are to sort the results: 

 <thead>
          <tr>
            <th>ID</th>
            <form:form action="/Usuarios/iberClientesEnlace?ordenar=nombre" id="ordenarForm" onsubmit="submint3();">
            <th ><div id="spantri"><div>Nombre</div><div onclick="document.getElementById('ordenarForm').submit();submint3()" id="triangulo">&#x25BC;</div></div></th>

             </form:form> 
                        <form:form action="/Usuarios/iberClientesEnlace?ordenar=apellidos" id="ordenarForm2" >

            <th><div id="spantri"><div>Apellidos</div><div onclick="document.getElementById('ordenarForm2').submit()" id="triangulo">&#x25BC;</div></div></th>
            </form:form> 
            <th>DNI</th>
                                    <form:form action="/Usuarios/iberClientesEnlace?ordenar=correo"id="ordenarForm3" >

                        <th><div id="spantri"><div>Correo</div><div onclick="document.getElementById('ordenarForm3').submit()" id="triangulo">&#x25BC;</div></div></th>

            </form:form> 
            <th>Telefono</th>
            <th>Direccion</th>
            <th>CP</th>
       <form:form action="/Usuarios/iberClientesEnlace?ordenar=edad" id="ordenarForm4" >
                        <th><div id="spantri"><div>Edad</div><div onclick="document.getElementById('ordenarForm4').submit()" id="triangulo">&#x25BC;</div></div></th>
        </form:form> 
            <th>Editar</th>
            <th>Eliminar</th>

          </tr>

            </thead>

And here I activate the form from Javascript: 

    function submint3(){

event.preventDefault();

            document.getElementById("triangulo").className+="rot180";

    }
    
asked by David Kenobi 28.12.2018 в 18:46
source

2 answers

0

With event.preventDefault() you prevent the page from being reloaded. 

function submitFunction() {
  event.preventDefault();

  document.getElementById('myDiv').className = 'divClass2'
}
.divClass1 {
  color: red;
}

.divClass2 {
  color: cyan;
  font-size: 10px;
}
<div id="myDiv" class="divClass1">
  <form id="myForm" onsubmit="submitFunction()">
    <h1> titulo </h1>
    <input type="submit" value="Submit" />
  </form>
</div>
    
answered by 28.12.2018 / 21:01
source
0

Hey, thank you very much, friend, you have hit the nail right, it works perfectly, although my problem is different now; You start the form from a button and the submit is different from mine, I have to start it from the onclick to a div not a button, then the result is different. It does not do anything to me, but if I put a button if it works.

I have edited the Fiddle a greeting:)

    
answered by 28.12.2018 в 23:28
Query about htaccess, friendly url, 301 and seo The generated apk.debug does not work on a cell phone [closed]