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 Kitau cha Fiqh 👉2 Kitabu cha Afya 👉3 Simulizi za Hadithi Audio 👉4 Madrasa kiganjani 👉5 web hosting 👉6 Sira ya Mtume Muhammad (s.a.w)
Post zinazofanana:
Python somo la 26: Sheria za uandishi wa object
Katika somo hili utakwend akujifunza maana ya object, na sheria za kuandika object.
Soma Zaidi...Python somo la 45: Kutumia Loops na Conditions katika Django Templates
Katika somo hili utakwend akujifunza kuchakata data kwa Kutumia Loops na Conditions katika Django Templates
Soma Zaidi...PYTHON - somo la 8: method za namba zinazotumika kwenye python
Katika somo hili utakwenda kujifunza kuhusu number method yaani function zinazofanya kazi kwenye namba.
Soma Zaidi...PYTHON - somo la 6: Jinsi ya kujuwa aina ya data iliyotumika
Katika somo hili utajifunza jisni ya kujuwa aina ya data iliyotumika kwenye python
Soma Zaidi...Python somo la 22: Package kwenye Python
Hapa utakwenda kujifunz amaana ya package, aina zake na jinsi ya kuandika package.
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 12: assignment operator, logical operator, identity oeprator na membership operator
Katika somo hili utakwenda kujfunza operator nyingine kama assignment operator logical, identity operator na membership operator.
Soma Zaidi...Python somo la 24: Nini maana ya Object Oriented Programming
Hapa tunakwenda kujifunza kuhusu OOP ambapo ni miongoni mwa mitindo ya uandishi wa code
Soma Zaidi...Python somo la 44: Data Manipulation katika Django Templates
Katika somo hili utakwend akujifunza jinsi ya kucheza na data kuzibadili kwa namna mbali mbali kwenye template
Soma Zaidi...