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

Download Post hii hapa

🔰 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:

1. Moja kwa moja kwenye template:

<script>
  alert("Karibu kwenye fomu yetu!");
</script>

2. Kupitia static file:
   Unapaswa kuwa umeweka form.js ndani ya static/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">

Tafadhali login au jisajili uendelee kusoma makala hii

Download Post hii hapa

Download App Yetu

Jifunze zaidi, na wasiliana nasi ukiwa na App yetu. Bofya link hapo chini kuweza kuipakua.

Download Now

Nyuma Endelea

Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save

Author: Rajabu Tarehe: 1970-01-01 03:33:45 Topic: Python Main: ICT File: Download PDF Views 100

Share On:

Facebook WhatsApp

Sponsored links
👉1 Bongolite - Game zone - Play free game    👉2 Kitabu cha Afya    👉3 Sira ya Mtume Muhammad (s.a.w)    👉4 Simulizi za Hadithi Audio    👉5 Madrasa kiganjani    👉6 kitabu cha Simulizi   

Post zinazofanana:

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 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 2: Sheria za uandishi wa pyhton yaani syntax za python

Katika somo hili utakwenda kujifunza syntaxy za python yaani sheria na kanuni za kuandika code za python

Soma Zaidi...

Python somo la 17: Jinsi ya kutumia user input

Katika somo hili uatkwenda kujifunz anamna ambavyo mtu anaweza kuingiza input kwneye system

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...

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 30: Data abstraction

Katika somo hili utakwend akujifunz akuhusu nadharia ya data abstraction na kazi zake kwenye OOP

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 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 35: Jinsi ya kutumia MYSQL kwenye python

Katika somo hili utajifunz akutumia database kwenye python

Soma Zaidi...