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 Madrasa kiganjani 👉3 Simulizi za Hadithi Audio 👉4 web hosting 👉5 kitabu cha Simulizi 👉6 Dua za Mitume na Manabii
Post zinazofanana:
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 14: Jinsi ya kutumia For loop
Katika somo hili utakwend akujifunza matumizi ya for loop kwneye python
Soma Zaidi...Python somo la 53: Kutengeneza HTML Form na Django View kwa ajili ya kuingiza data
Katika somo hili tutaangalia jinsi ya kutengeneza fomu ya HTML kwa ajili ya kuingiza data kwenye jedwali la MenuItem, pamoja na kutengeneza view itakayopokea data hiyo na kuihifadhi kwenye database. Pia tutaunganisha form na URL route.
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...Python somo la 25: Sheria za uandishi wa class
Katika somo hili utajifunza maana ya class, sheria za uandishi wake na mifano halisi
Soma Zaidi...Python somo la 27: polymorphism kwneye python
Katika somo hili utajifunza maana ya polymorphism na sheria za uandishi wake
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 28: inheritance kwenye OOP
Katika somo hili utakwenda kujifunz amaana ya inheritance na sheria za kuiandika inheritance.
Soma Zaidi...Python somo la 36: Django framework - Utangulizi
Ni nini maana ya django framework na inafanya kazi gani
Soma Zaidi...Python somo la 40: Jinsi ya Kuunda Simple Navigation Menu Katika Django
Katika somo hili utajifunza Jinsi ya Kuunda Simple Navigation Menu Katika Django kwa kutumia template
Soma Zaidi...