picha

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:


 

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

  1. 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"></div>

<script>
function previewData() {
  let jina =...
Ingia sasa ili uweze kusoma makala hii yote.

Zoezi la Maswali

help_outlineZoezi la Maswali

info Jaza maswali yote au baadhi kisha bofya kitufe cha kutuma majibu hapo chini.
1 Ni sehemu gani JavaScript inaweza kuwekwa kwenye template ya Django?
2 Ni ipi kati ya hizi ni sababu ya kutumia {% csrf_token %}?
3 Lengo kuu la client-side validation ni nini?
4 Kazi ya request.POST.get('jina') ni ipi?
5 Kwa nini bado tunahitaji validation upande wa Django hata kama tumetumia JavaScript?

Nyuma Endelea


Umeionaje Makala hii.. ?

       
Author: Rajabu image Tarehe: 2025-05-25 12:10:12 Topic: Python Main: Masomo File: Download PDF Views 1036

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 ai web app     👉2 Simulizi za Hadithi Audio     👉3 web hosting     👉4 kitabu cha Simulizi     👉5 Kitau cha Fiqh     👉6 Tafasiri ya Riyadh Swalihina    

Post zinazofanana:

Python somo la 61: Jinsi ya kutuma email kwenye django

Katika maeneo ya development, tunahitaji kutuma email mara nyingi kwa madhumuni ya: Kujaribu mfumo wa OTP Password reset System notifications Activation codes Lakini mara nyingi hatutaki emails ziondoke kwenda kwa watu halisi wakati bado tupo kwenye majaribio.

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

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

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 33: Jinsi ya kupata taarifa za faili

Katika somo hili utakwend akujifunz anamna ya kuwez akupata taarifa zinazohusu faili

Soma Zaidi...