如何用JavaScript填充并提交HTML表单？Django食材列表提交问题求助

其实很简单，分几步就能搞定，我给你举个实际例子：

首先假设你有这样一个HTML表单：

<form id="myForm" action="/submit-form" method="post">
  <input type="text" name="username" id="username">
  <input type="email" name="email" id="email">
  <button type="submit">提交</button>
</form>

步骤1：获取表单和输入元素 #

用JavaScript定位到表单和需要填充的输入框：

const form = document.getElementById('myForm');
const usernameInput = document.getElementById('username');
const emailInput = document.getElementById('email');

步骤2：填充表单值 #

直接给输入框的value属性赋值就行：

usernameInput.value = 'JaneSmith';
emailInput.value = 'jane.smith@example.com';

步骤3：提交表单 #

调用表单的submit()方法就能自动提交了：

form.submit();

如果需要动态添加额外的表单字段（比如隐藏参数），也可以这么做：

// 创建一个隐藏输入
const hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = 'user_token';
hiddenInput.value = 'abc123';

// 把它添加到表单里
form.appendChild(hiddenInput);

// 再提交
form.submit();

看你的描述，问题出在<ul>里的食材项不是表单控件，所以提交表单时这些数据不会被发送到服务器。我来帮你修复这个问题：

首先看你的现有代码片段：

<ul id="user_ing_list" class="content"> </ul>
<div class="headline">
  <form action="{% url 'opskriftssoegning:soegeresultat' %}" method="get" accept-charset="utf-8">
    <button type="submit" name="ingsoegning" onclick="prepare_user_ing_list()">搜索</button>
  </form>
</div>

你已经写了prepare_user_ing_list()函数的开头，我们把它补全，让它把食材列表转换成表单能识别的参数：

完善JavaScript函数 #

function prepare_user_ing_list() {
  // 先找到对应的表单
  const form = document.querySelector('form[action="{% url 'opskriftssoegning:soegeresultat' %}"]');
  
  // 先清除之前添加的隐藏字段，避免重复提交
  const oldInputs = form.querySelectorAll('input[name="ingredients[]"]');
  oldInputs.forEach(input => input.remove());

  // 遍历食材列表里的每一项
  const ingItems = document.querySelectorAll('#user_ing_list li');
  ingItems.forEach(item => {
    // 这里假设每个li的文本就是食材名称，如果你用了data属性存储更可靠（比如data-ing="番茄"），就用item.dataset.ing
    const ingredient = item.textContent.trim();
    if (ingredient) {
      // 创建隐藏输入框，把食材名存进去
      const hiddenInput = document.createElement('input');
      hiddenInput.type = 'hidden';
      hiddenInput.name = 'ingredients[]'; // 用数组命名，方便Django一次性接收所有食材
      hiddenInput.value = ingredient;
      // 把输入框添加到表单里
      form.appendChild(hiddenInput);
    }
  });

  // 不用手动调用submit，因为按钮是submit类型，函数执行完表单会自动提交
}

Django视图接收数据 #

在你的soegeresultat视图里，用getlist()方法获取所有食材：

def soegeresultat(request):
    # 获取所有提交的食材，因为是GET请求，用request.GET
    selected_ingredients = request.GET.getlist('ingredients[]')
    # 接下来就可以用这个列表去查询食谱了
    return render(request, 'opskriftssoegning/resultat.html', {'ingredients': selected_ingredients})

额外小优化 #

建议你添加食材项的时候，给每个<li>加上data-ingredient属性，比如：

<li data-ingredient="牛肉">牛肉 <button onclick="removeIngredient(this)">删除</button></li>

这样在JavaScript里获取食材名称时，用item.dataset.ingredient会更准确，避免文本里有多余的空格或删除按钮的文字干扰。

内容的提问来源于stack exchange，提问作者Jon Poulsen