Quiero que la tabla sea visible solo después de que se haga clic en el botón Enviar. Pero no se queda en la pantalla como se supone que debe ser. Una vez que hago clic en el botón Enviar, la tabla aparece por un segundo y luego vuelve a ser invisible. Por favor, hágame saber lo que estoy haciendo mal en mi código. También hágamelo saber si hay alguna otra manera de hacerlo.
índice.html
<form action="#" id="form" method="post"> <div style="margin-left: 2rem;"> <!-- <input class="btn btn-primary" type="submit" value="Submit" id="btn" onclick="hide()"> --> <input class="btn btn-primary" type="button" value="Submit" id="btn" onclick="hide()"> </div> </form> <div style="margin-top: 4rem; display: flex; justify-content: center; align-content: center;"> <table style="display: none;" id="table"> <tbody> <tr> <th scope="row">Profile No. : </th> <td>{{ProfileNo}}</td> </tr> <tr> <th scope="row">Name : </th> <td>{{Name}}</td> </tr> </tbody> </table> </div> <script> function hide() { document.getElementById("form").submit(); let table = document.getElementById("table"); if (table.style.display === 'none') { table.style.display = 'table'; } } </script>Necesitas usar AJAX para que esto funcione. Si lo hace así, el botón Enviar realiza una solicitud POST al servidor y, por lo tanto, actualiza la página nuevamente.
Aquí hay una buena solución para trabajar: https://www.pluralsight.com/guides/work-with-ajax-django
Puedes hacer esto en Django de la siguiente manera:
vistas.py: `
def contact(request): if request.method == "POST": message_name = request.POST['message-name'] # message-name has to be in your form # do something with the data in your view return render(request, 'template.html', {'message_name': message_name}) #return a variable message_name to the context template.html:
{% if message_name %} <center><h2><table id="your table"><tr><td></td></tr></h2></center> {% else %} <form action="#" method="post">{% csrf_token %} <div class="row"> <div> <input type="text" name="message-name"> </div> <button type="submit">Display table</button> </form> {% endif %}` Puede usar el tipo de entrada oculto si no desea mostrar ningún campo en el formulario. La idea es capturar la variable del POST (mensaje-nombre) y confiar en ella en la vista (mensaje_nombre)
También puede usar el almacenamiento local y alternar su valor de visualización. Javascript en el lado del cliente no puede recibir datos de publicación, puede almacenar un valor en el almacenamiento local mientras envía el formulario, una vez que se vuelve a cargar la página, verifique ese valor almacenado, modifique su visualización y luego restablezca el valor (como si no enviara nada una vez más)
ejemplo (no estoy seguro de que funcione en el fragmento SO, cópielo y pruébelo en la realidad)
window.onload = function () { let mydisplay = localStorage.getItem("myTable"); console.log(mydisplay); if (mydisplay == "table-cell") { document.querySelector("#table").style.display = mydisplay; localStorage.setItem("myTable", "none"); } else { document.querySelector("#table").style.display = "none"; } }; function hide() { document.getElementById("form").submit(); console.log("submit"); localStorage.setItem("myTable", "table-cell"); } <form action="#" id="form" method="post"> <div style="margin-left: 2rem;"> <!-- <input class="btn btn-primary" type="submit" value="Submit" id="btn" onclick="hide()"> --> <input class="btn btn-primary" type="button" value="Submit" id="btn" onclick="hide()"> </div> </form> <div style="margin-top: 4rem; display: flex; justify-content: center; align-content: center;"> <table id="table"> <tbody> <tr> <th scope="row">Profile No. : </th> <td>{{ProfileNo}}</td> </tr> <tr> <th scope="row">Name : </th> <td>{{Name}}</td> </tr> </tbody> </table> </div>aquí hay un jsfidlle donde puede copiar/pegar el código para una página HTML independiente para realizar pruebas. https://jsfiddle.net/zb901rLm/