Estoy tratando de mostrar un div al enviar un formulario. Muestra el div al enviar el formulario mientras que el formulario no se envía. Aquí se utiliza el método POST. JavaScript se utiliza para mostrar el div.
archivo HTML:
<form method="POST" name="myFirstForm" id="chform"> {% csrf_token %} <input type="hidden" name="details_id" value="{{details.id}}"/> <input type="hidden" name="details_user_id" value="{{details.user_id}}"/> <input type="hidden" name="user_id" value="{{user.id}}"/> <input type="submit" class="btn btn-danger" id="chat" onclick="return myFunction()" value="Chat Now"> </form> <div class="page-content page-container" id="page-content" style="display:none"></div>JavaScript:
<script> document.forms['myFirstForm'].addEventListener('submit', function(event) { // Do something with the form's data here this.style['display'] = 'none'; event.preventDefault(); }); function myFunction() { var x = document.getElementById("page-content"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script>vistas.py:
if request.method=='POST': jid = request.POST.get('details_id') print(jid) cjid = request.POST.get('details_user_id') print(cjid) userid = request.POST.get('user_id') print(userid)Si no quiero mostrar el div y elimino el código JavaScript, el método POST funciona. ¿Alguien puede sugerir una solución para resolver este problema?
¿Ha considerado JavaScript asíncrono y XML (AJAX)? Me parece que desea una funcionalidad JS asíncrona (o no lo entiendo correctamente).
Entonces, en su botón de envío, haría que llamara a una función AJAX de la siguiente manera:
<button type="submit" id="chat" data-url="{% url 'url_to_your_view_handling_the_post' %}" value="Chat Now"></button> Entonces su función onclick :
$(document).on('click', '#chat', function (e) { $.ajax({ type: 'POST', url: $(this).data('url'), data: { // add any other HTML data attributes in this dictionary csrfmiddlewaretoken: getCookie('csrftoken'), }, success: function (json_response) { // Successful AJAX response handling routine here // Display your div var x = document.getElementById("page-content"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }, error: function (xhr, errmsg, err) { } }); }) Entonces, su vista en url url_to_your_view_handling_the_post definida en el botón manejará el método POST y devolverá una respuesta JSON con los datos que desee. Si regresa con éxito, se ejecuta la rutina de éxito en su función AJAX.
Enviar el token csrf no es extremadamente simple y lo remito a este hilo para obtener más información sobre la getCookie('csrftoken') .
Nota: Esta es una implementación jquery de AJAX, por lo tanto, también deberá incluir jquery en su plantilla.
Si desea enviar el formulario, no debe llamar a event.preventDefault(); . Básicamente, esto le dice a js que capture el evento de submit y evite el comportamiento predeterminado del evento que es enviar el formulario en su caso.