如何在Django中识别同一表单内被点击的a标签提交按钮

你当前使用<a>标签的onclick手动调用form.submit()提交表单，这种提交方式不会自动将<a>标签的name等属性作为表单参数带入POST请求，只有原生的<button type="submit">或<input type="submit">元素被点击时，才会默认将自身的name和value提交到后端。

方案1：替换为原生submit按钮（最简便，无需额外JS） #

直接把两个<a>标签改为<button type="submit">，样式可以保留原有类名保持视觉一致，代码修改如下：

<form id="my-form" method="POST" action="{% url 'my_view' %}">
  {% csrf_token %}
  <div class="row">
    <div class="col-md-6">
      <div class="md-form mb-1">
        <textarea id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
      </div>
    </div>
    <div class="col-md-6">
      <div class="md-form mb-1">
        <textarea id="message_then" name="message_then" rows="2" class="form-control md-textarea"></textarea>
      </div>
    </div>
  </div>

  <div class="text-center text-md-left">
    <button type="submit" class="btn btn-primary" style="width: 78px;" name="clicked_btn" value="name1">Click1</button>
  </div>
  <div class="text-center text-md-left">
    <button type="submit" class="btn btn-primary" style="width: 78px;" name="clicked_btn" value="name2">Click2</button>
  </div>

</form>

后端直接通过request.POST.get('clicked_btn')即可获取到点击的按钮标识，返回name1或name2。

方案2：保留标签，添加隐藏参数传递标识 #

如果必须保留<a>标签的交互逻辑，可以在点击时向表单插入隐藏输入项再提交：

前端修改： #

<form id="my-form" method="POST" action="{% url 'my_view' %}">
  {% csrf_token %}
  <!-- 原有表单内容不变 -->
  <div class="row">
    <div class="col-md-6">
      <div class="md-form mb-1">
        <textarea id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
      </div>
    </div>
    <div class="col-md-6">
      <div class="md-form mb-1">
        <textarea id="message_then" name="message_then" rows="2" class="form-control md-textarea"></textarea>
      </div>
    </div>
  </div>

  <div class="text-center text-md-left">
    <a class="btn btn-primary" onclick="submitForm('name1')" style="width: 78px;">Click1</a>
  </div>
  <div class="text-center text-md-left">
    <a class="btn btn-primary" onclick="submitForm('name2')" style="width: 78px;">Click2</a>
  </div>

</form>

<script>
function submitForm(btnKey) {
  const form = document.getElementById('my-form');
  // 插入隐藏输入项传递按钮标识
  const hiddenInput = document.createElement('input');
  hiddenInput.type = 'hidden';
  hiddenInput.name = 'clicked_btn';
  hiddenInput.value = btnKey;
  form.appendChild(hiddenInput);
  form.submit();
}
</script>

后端取值逻辑和方案1一致： #

def my_view(request):
    if request.method == "POST":
        click_btn = request.POST.get("clicked_btn")
        if click_btn == "name1":
            # 处理Click1对应的业务逻辑
        elif click_btn == "name2":
            # 处理Click2对应的业务逻辑

内容的提问来源于stack exchange，提问作者Piotr Wasilewicz