Question

如果有人提交表单后如何显示弹出框？例如，在提交表单后，我想要一个弹出框，显示“已成功提交”。我现在的观点是它只是重定向到一个页面“成功提交”。而不是这个，我想要一个弹出窗口与背景中的表单一起出现。

def addDog(request):
  if request.method == "POST":
    form = DogForm(request.POST)
    if form.is_valid():
      post = form.save(commit=False)
      post.save()
      return HttpResponse("Successfully submitted")
    else:
      print("Unable to save. Form is not valid")
      print(form.errors)
  else:
    form = DogForm()
  return render(request, "app/addDog.html", {"form":form})

Answer 1

您需要在JavaScript中实现此功能。在较高级别，向您所在的同一端点发出AJAX POST请求。成功后，请使用window.alert("Successfully submitted!")。

如果这是您网站上JS的范围，那么jQuery有点矫枉过正，但使用jQuery提供示例最简单：

$("#submit-button").on("click", function() {
    $.post("http://some/endpoint/here", $("#my-form").serialize())
        .done(function() { window.alert("Successfully submitted!"); })
        .fail(function() { window.alert("Submission failed!"); });
});

此处使用的功能包括：$.post $().on和$().serialize。

这可以在vanilla JavaScript中没有太多问题的情况下实现，但它更冗长，所以我不打算在这个例子中这样做。

Answer 2

您需要在模板中的表单提交事件上添加Javascript

<form method="post" id="DogForm">
    {% csrf_token %}
    <table>
      {{ form.as_table }}     

    </table>
    <button type="submit">Save</button>

  </form>
<script>
$("#DogForm").on('submit', function(event) {
      alert("New Dog Added");
</script>

表单提交后弹出窗口django

2 个答案: