Javascript 使django表单交互

html文件

  <div id="calculator">
    <h2>Kalkuleeri saematerjali hind</h2>
    <form method="post" action="{% url 'products' %}">
      {% csrf_token %}
      <label>Valige materjali kvaliteet/tüüp:</label><br>
      <select name="tyyp">
        <option value="taiskant">Täiskant</option>
        <option value="v_poomkant">Väike Poomkant</option>
        <option value="s_poomkant">Suur Poomkant</option>
        <option value="voodrilaud">Voodrilaud</option>
      </select><br><br>
      {% if not tyyp %}
      <button type="submit">Edasi</button><br><br>
      {% endif %}
    </form>
    <form method="post" action="{% url 'products' %}">
      {% csrf_token %}
      {% if tyyp %}
      <label>Valige mõõdud: (Paksus mm x Laius mm)</label><br>
      <select name="moot">
        {% for product in products %}
        <option value="1">{{ product.nimi }}</option>
        {% endfor %} 
      </select><br><br>
      <label>Pikkus:</label><br>
      <select name="pikkus">
        <option value="kunikolm">Kuni 3,1 m</option>
        <option value="kolmkuniviis">3,2 - 5,1 m</option>
        <option value="viiskunikuus">5,2 - 6,0 m</option>
      </select><br><br>
      <label>Kogus:</label><br>
      <input type="number" required>
      <select name="yhik">
        <option value="tm">Tihumeetrit</option>
        <option value="jm">Meetrit</option>
        <option value="lauda">Lauda</option>
      </select><br><br>
      <button type="submit">Kalkuleeri</button>
      <input type="text" class="calculator-screen" value="" disabled />
      {% endif %}
    </form>

问题是，我正在尝试创建一个活动表单（在选择第一个选择表单选项后，它会自动呈现第二个选择表单选项，而无需按下按钮）。 它应该是计算器，但没有“计算按钮”。它必须根据第一个表单选择更新/填写其余表单。填写4个字段后，计算“价格”。 我应该使用Django表单还是html/js来实现这一点

---

如果我无法理解地表达自己的意思，请随时提问。

因为这是家庭作业，我会为您指出正确的方向

假设我们有汽车的品牌和型号（一个常见的例子）。有许多方法可以创建动态表单并存储数据。您可以使用dict，也可以将项目存储在数据库中

您需要一个前端可以调用的函数：

from django.http import JsonResponse

def get_models(request, make):
    # query the db, or get the results from a global / readonly dict?
    data = global_model_dict[make]
  
    # return json for the js caller
    return JsonResponse(data, content_type="application/json")

在“URL”中为其添加一个条目

从那里，您将获得在页面上追加/设置html所需的数据。您将通过一个循环来实现这一点，其中我现在有“console.log”

一些资料供你阅读

---

IMO，您应该研究angular/vue/react这样的前端框架，并将django用作后端api/管理控制台。话虽如此，我认为您希望在html/js中完成大部分工作。是的，这可能是真的，但这是我们课程的最终项目，我们需要使用django。

from django.http import JsonResponse

def get_models(request, make):
    # query the db, or get the results from a global / readonly dict?
    data = global_model_dict[make]
  
    # return json for the js caller
    return JsonResponse(data, content_type="application/json")

urlpatterns = [
    # whatever else you have in here
    path('models/<str:make>', views.get_models)
]

var settings = {
  "url": "/myapp/models/honda",
  "method": "GET",
  "timeout": 0,
};

$.ajax(settings).done(function (response) {
  console.log(response);
});