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 Sira ya Mtume Muhammad (s.a.w) 👉2 kitabu cha Simulizi 👉3 Madrasa kiganjani 👉4 Bongolite - Game zone - Play free game 👉5 Kitabu cha Afya 👉6 Kitau cha Fiqh
Post zinazofanana:
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 18: Jinsi ya kuandika function
Katika somo hili utakwend akujifunza jinsi ya kuandika function, kuweka parameter na kuitumia function
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 16: Jinsi ya kutumia break na continue kwenye loop
Katika somo hili tunakwenda kujifunza matumizi ya break na continue kwenye loop
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 30: Data abstraction
Katika somo hili utakwend akujifunz akuhusu nadharia ya data abstraction na kazi zake kwenye OOP
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 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...