我是通过一个食谱发布网站学习Django的，在食谱表单中，我想传递一个用JavaScript函数动态创建的成分列表。我有两个按钮，一个用于创建列表，最后一个用于提交配方表单。问题是，每次单击配料“添加配料按钮”时，表单都会提交，因为它无效，它会重置整个表单。如何在不提交表单的情况下集成JavaScript？
我已经尝试了许多解决方案，我已经看到到处都没有用，所以任何帮助是受欢迎的。
模型
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)剧本
function checkdata(){
//Create references to the input elements we wish to validate
var ingredient = document.getElementById("ingredient");
var quantity = document.getElementById("quantity");
//Check if username field is empty
if(ingredient.value == ""){
alert("Please enter the ingredient");
ingredient.focus();
return false;
}
//Check if email field is empty
if(quantity.value == ""){
alert("Please enter the quantity");
quantity.focus();
return false;
}
//If all is well return true.
else{ ingList();}
}
function ingList(){
var values = [ingredient.value, quantity.value];
let data =[];
data.push(values);
var li = document.createElement('li');
li.innerText = data;
list.appendChild(li);
const list = JSON.parse(document.getElementById('myList').value=list);
document.getElementById("ingredient").value = "";
document.getElementById("quantity").value = "";
return false
}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>
<legend>Enter Ingredients</legend>
<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" type="button" onclick="checkdata()" value="ingredients">Add Ingredient</button>
</fieldset>
<br>
<div>
<label for="ingredients">Ingredients: </label>
<textarea id="myList"></textarea>
</div>
<br>
<div>
<label for="preparation">Preparation: </label>
<input id="preparation" type="text" name="preparation" value="{{ preparation }}">
</div>
<br>
</div>
<button type="submit" value="Add Recipe">Add Recipe</button>
</form>
</body>
{% endblock content %}
1条答案
按热度按时间72qzrwbm1#
两个问题：
1.缺少
type属性。您尚未指定添加配料的按钮上的类型属性。默认值为
type="submit"，因为它位于表单元素中。要禁用此行为，请将其更改为：1.错误放置的事件监听器
您已经在
fieldset元素上放置了一个submit事件侦听器，但是该元素会发出该事件。只有<button type="submit">和做。如果要防止在单击提交按钮时立即提交表单，请在提交按钮上附加事件侦听器：但是，
onsubmit属性的脚本没有意义。你是否试图调用你在某处定义的函数？如果是的话，那不是你的方式。如果没有，你是不是在尝试定义一个JavaScript函数？如果是的话，那就不是一个做这件事的地方。请分享您用于填充配料表的JavaScript代码，以便我用解决方案更新答案。
此外，除非你只是想练习使用JavaScript，否则你不需要JavaScript来添加食谱应用程序，你可以简单地使用
ManyToMany字段来添加食谱的成分。