Python somo la 48: 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:

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

<script>
function previewData() {
  let jina =...