Python somo la 48: Jinsi ya Kutumia JavaScript kwenye Fomu za Django
Katika somo hili tutakwend akujifunza kuhusi Jinsi ya Kutumia JavaScript kwenye Fomu za Django
🔰 Lengo la Somo
Katika somo hili, utajifunza:
-
✅ Jinsi ya kutumia JavaScript kwenye templates za Django.
-
✅ Kufanya form validation kwa upande wa client (JavaScript).
-
✅ Kuonyesha taarifa zilizojazwa kabla hazijatumwa kwa server.
-
✅ Njia bora ya kuweka JavaScript ndani ya fomu ya Django.
📌Kutumia JavaScript Katika Django Template
Ufafanuzi
Templates za Django hutoa HTML kwa mtumiaji, na ndani ya HTML unaweza kutumia JavaScript kwa njia mbili:
-
Moja kwa moja kwenye template:
<script>
alert("Karibu kwenye fomu yetu!");
</script>
-
Kupitia static file:
Unapaswa kuwa umewekaform.jsndani yastatic/js/ya app yako.
{% load static %}
<script src="{% static 'js/form.js' %}"></script>
Hii inasaidia kutenganisha HTML na JavaScript kwa ufanisi zaidi.
✅ 2: Ku-Validate Fomu kwa JavaScript
Ufafanuzi
Validation ya JavaScript husaidia kuzuia data isiyo sahihi kutumwa kwa server. Hii huitwa client-side validation.
<form onsubmit="return validateForm()" method="post">
{% csrf_token %}
<label>Jina:</label>
<input type="text" id="jina" name="jina"><br><br>
<label>Ujumbe:</label>
<textarea id="ujumbe" name="ujumbe"></textarea><br><br>
<input type="submit" value="Tuma">
</form>
<script>
function validateForm() {
let jina = document.getElementById("jina").value.trim();
let ujumbe = document.getElementById("ujumbe").value.trim();
if (jina === "" || ujumbe === "") {
alert("Tafadhali jaza jina na ujumbe.");
return false; // Zuia form isitume
}
return true; // Ruhusu kutuma
}
</script>
⚠️ Django bado itafanya validation upande wa server kupitia
views.py, kwa usalama zaidi.
💡 Kuonyesha Taarifa Bila Kutuma (Preview)
Ufafanuzi
Mtumiaji anaweza kuona alichoandika kabla hajabonyeza Tuma:
<form id="formu">
<label>Jina:</label>
<input type="text" id="jina" name="jina"><br><br>
<label>Ujumbe:</label>
<textarea id="ujumbe" name="ujumbe"></textarea><br><br>
<button type="button" onclick="previewData()">Angalia Taarifa</button>
<input type="submit" value="Tuma">
</form>
<div id="preview">&l">Jiunge nasi WhatsApp kupata update zetu
help_outlineZoezi la Maswali
Umeionaje Makala hii.. ?
👉1 Madrasa kiganjani 👉2 kitabu cha Simulizi 👉3 Tafasiri ya Riyadh Swalihina 👉4 Sira ya Mtume Muhammad (s.a.w) 👉5 Bongolite - Game zone - Play free game 👉6 Kitabu cha Afya
Post zinazofanana:
Python somo la 50: database kwneye django
Katika somo hili utakwenda kujifunza vipi django inaweza kuwasiliana na database, utajifunza kuusu orm na model
Soma Zaidi...Python somo la 46: Kutengeneza Fomu na Kuituma kwa Django Template
Katika somo hili utakwenda kujifunza kutengeneza htmk form pamoja na kuituma.
Soma Zaidi...Python somo la 23: Library kwenye python
Hapa utajifunza maana ya library, kazi zake aina zake na jinsi ya ku install lirary
Soma Zaidi...Python somo la 47: Jinsi ya kupokea na kuchakata fomu
Katika somo hili utakwend akujifunza jinsi ya kupokea na kuchakata fomu
Soma Zaidi...Python somo la 21: Module katika python
Katika somo hili utakwend akujifunz amaana ya module, kazi zake, aina zake na jinsi ya kuandika modile
Soma Zaidi...PYTHON somo la 11: Matumizi ya comperison eperator katika python
Katika somo hili utakwenda kujifunza kuhusu operator. Hasa hapa tutakwend akujifunz akuhusu comparison operaor.
Soma Zaidi...Python somo la 38: Kubadilisha landing page ya Django Framework
Katika somo hili utakwenda kujifunza jinsi ya kubadili ukurasa wa landing page wa Django na kuweka ukurasa tunaoutaka sisi.
Soma Zaidi...Python somo la 34: Kutumia html kwneye python
Katika somo hili utakwend akujifunz ajinsi ya kutumia html kwneye python
Soma Zaidi...Python somo la 43: Kutuma Data kutoka View kwenda Template katika Django
Katika somo hili uatajifunza jinsi gani unaweza kutumia view kma logic kuuma data kwenye template
Soma Zaidi...Python somo la 27: polymorphism kwneye python
Katika somo hili utajifunza maana ya polymorphism na sheria za uandishi wake
Soma Zaidi...