Django 表单字段提要，带有 javascript 生成的列表

Question

我正在通过一个菜谱发布网站学习 Django，在菜谱表单中我想传递一个用 java 脚本函数动态创建的成分列表。我有两个按钮，一个用于创建列表，最后一个按钮是在菜谱表单准备就绪时提交。问题是，每次单击成分“添加成分按钮”时，都会提交表单，因为它无效，因此会重置整个表单。如何在不提交表单的情况下集成java脚本？

我尝试了很多我见过的解决方案，但都无济于事，所以欢迎任何帮助。

型号。

class Recipe(models.Model):
    """Represents the whole recipe description"""
    recipe_name = models.CharField(max_length=100, default=None)
    user_name = models.ForeignKey(User, on_delete=models.DO_NOTHING)
    description = models.TextField(max_length=500, help_text='Enter a brief description of the recipe')
    ingredients = models.TextField(max_length=1000, help_text='enter all the ingredients with quantities')
    cooking_time = models.CharField(max_length=50)
    preparation = models.TextField(max_length=3000, help_text='Enter the steps to prepare the recipe')
    date = models.DateField(auto_now_add=True)

脚本。

class Recipe(models.Model):
    """Represents the whole recipe description"""
    recipe_name = models.CharField(max_length=100, default=None)
    user_name = models.ForeignKey(User, on_delete=models.DO_NOTHING)
    description = models.TextField(max_length=500, help_text='Enter a brief description of the recipe')
    ingredients = models.TextField(max_length=1000, help_text='enter all the ingredients with quantities')
    cooking_time = models.CharField(max_length=50)
    preparation = models.TextField(max_length=3000, help_text='Enter the steps to prepare the recipe')
    date = models.DateField(auto_now_add=True)

html。

{% extends "base.html" %}

{% block content %}
{% load static %}
<script src="{% static 'Ingredients.js' %}"></script>
<h3><a href="{% url 'my_page' %}">BACK</a></h3>
<body>
<p>{{ user }} please fill up the form.</p>
<br>
<form action="{% url 'new_recipe' %}" method="post">
    {% csrf_token %}
    {{ form }}
    <div class="form-group">
        <div>
            <label for="recipe_name">Recipe Name: </label>
            <input id="recipe_name" type="text" name="recipe_name" value="{{ form.recipe_name }}">
        </div>
        <br>
        <div>
            <label for="description">Description: </label>
            <textarea id="description" name="description" value="{{ form.description }}"></textarea>
        </div>
        <br>
        <div>
            <label for="cooking_time">Cooking Time: </label>
            <input id="cooking_time" type="text" name="cooking_time" value="{{ form.cooking_time }}">
        </div>
        <br>
        <fieldset onsubmit="checkdata(e) { e.preventDefault(); } ">
            <label for="ingredient">Ingredient name :</label>
            <input type="text" id="ingredient" name="ingredient">
            <span>
            <label for="quantity">Enter the quantity:</label>
            <input type="text" id="quantity" name="quantity"></span><br><br>
            <button id="add" onclick="checkdata()" value="ingredients">Add Ingredient</button>
        </fieldset>
        <br>
        <div>
            <label for="ingredients">Ingredients: </label>
            <textarea id="" name="ingredients"></textarea>
            {{ myList|json_script:'myList' }}

        </div>
        <br>
        <div>
            <label for="preparation">Preparation: </label>
            <input id="preparation" type="text" name="preparation" value="{{ preparation }}">
        </div>
        <br>
    </div>
    <input type="submit" value="Add Recipe">
</form>
</body>
{% endblock content %}

Answer 1

两个问题：

缺少
type
属性。
您尚未在添加成分的按钮上指定类型属性。默认为
```
type="submit"
```
，因为它位于表单元素内。要禁用此行为，请将其更改为：

<button type="button"... ">Add Ingredient</button>

事件监听器放错位置
您已在
```
submit
```
元素上放置了
```
fieldset
```
事件侦听器，但该元素确实会发出该事件。只有
```
<button type="submit">
```
并且这样做。如果您想阻止单击提交按钮时立即提交表单，请在提交按钮上附加事件侦听器：

<input type="submit" value="Add Recipe" onsubmit="checkdata(e) { e.preventDefault();}>

但是，

onsubmit

属性的脚本没有意义。您是否试图调用您在某处定义的函数？如果是的话，那你就不是这样做的。如果不是，您是否尝试定义 JavaScript 函数？如果是的话，那不是一个可以这样做的地方。

请分享您用于填充成分列表的 JavaScript 代码，以便我可以用解决方案更新答案。

此外，除非您只是想练习 JavaScript，否则您不需要 JavaScript 来添加菜谱应用程序，您只需使用

ManyToMany

字段来表示菜谱成分即可。

Django 表单字段提要，带有 javascript 生成的列表

问题描述投票：0回答：1

1个回答

最新问题

Django 表单字段提要，带有 javascript 生成的列表

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1