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 Bongolite - Game zone - Play free game 👉2 kitabu cha Simulizi 👉3 Sira ya Mtume Muhammad (s.a.w) 👉4 ai web app 👉5 Simulizi za Hadithi Audio 👉6 Tafasiri ya Riyadh Swalihina
Post zinazofanana:
PYTHON - somo la 1: Jinsi ya ku install python
Katika somo hili utajifunza kuhusu maana ya python na kazi zake. pia jinsi ya kuandaa kifaa chako kwa ajili ya somo.
Soma Zaidi...PYTHON - somo la 7: Jinsi ya kubadili aina ya data
Katika soo hili utakwenda kujifunza jinsi ya kubaduli aina moja ya data kwena aina nyingine. Kwa mfano unaweza kubadili namba kuwa string ama kubadili string kuwa nanda ama kubadili float kuwa int.
Soma Zaidi...Python somo la 49: Jinsi ya ku host project ya Django
Katika somo hili utakwenda kujifunza jinsi ya ku host website ya Django. Hapa tutakwenda kutuma plaform ya pythonanywhere.com.
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 3: Jinsi ya kuandika variable kwenye python
Katika somo hili utajifunza maana ya variable, na sheria za kutengeneza variable kwenye python. Pia utajifunza maneno ambayo hayafai kutumiwa kama variable
Soma Zaidi...Python somo la 33: Jinsi ya kupata taarifa za faili
Katika somo hili utakwend akujifunz anamna ya kuwez akupata taarifa zinazohusu faili
Soma Zaidi...Python somo la 31: Jinsi ya kutengeneza faili na folder
Katika somo hili utajifunz ajinsi ya kutengeneza folda, faili na kuweka data kwneye faili
Soma Zaidi...Python somo la 52: Kutengeneza table na kufanya Migrations Katika Django
Katika somo hili tutajifunza jinsi Django hutumia migrations kuunda na kubadilisha tables kwenye database kulingana na models tunazoandika. Tutapitia maana ya migration, hatua za kuitumia, umuhimu wake, misingi ya makemigrations na migrate, pamoja na mfano halisi kutoka kwenye project yetu ya pybongo (app: menu).
Soma Zaidi...PYTHON - somo la 4: Aina za data kwenye python
Katika somo hili utakwenda kujifunza aina za data ambazo hutumika kwenye python. hapa utajifunza aina kuu 3 za data.
Soma Zaidi...Python somo la 19: Aina za Function
Katika somo hili utakwend akujifunza aina mbalimbali za function ambazo tunaweza kuzitumia kwenye python.
Soma Zaidi...