在Django页面提交前添加确认提示弹窗的技术实现咨询

嘿，要实现提交前的确认弹窗其实很简单，核心是在前端监听表单的提交事件，触发确认提示后再决定是否允许提交。我根据你提供的代码场景，分两种常见情况给出具体方案：

一、针对Django Admin界面的方案 #

因为你在项目里使用了NameAdmin，直接在Admin类中引入自定义JavaScript就能搞定：

1. 修改admin.py，添加Media类引入JS文件 #

在NameAdmin里新增Media类，指定要加载的JS文件：

class NameAdmin(MasterDataBaseAdmin):
    form = forms.NameForm
    inlines = [AddressInline, RegistrationTypeInline]
    queryset = models.Name.objects.prefetch_related(
        "names", "name__id", "registrationstype"
    )

    # 新增Media类，引入自定义JS
    class Media:
        js = ('js/submit_confirm.js',)

2. 创建自定义JS文件 #

在你的项目static/js目录下创建submit_confirm.js文件，写入以下代码：

// 页面加载完成后监听表单提交
document.addEventListener('DOMContentLoaded', function() {
    // Django Admin的表单ID规则是「模型名小写 + _form」，Name模型对应name_form
    const adminForm = document.getElementById('name_form');
    
    if (adminForm) {
        adminForm.addEventListener('submit', function(e) {
            // 弹出确认弹窗
            const confirmMsg = "Are You Sure You Want To Save The Page!";
            // 如果用户点击取消，阻止表单提交
            if (!confirm(confirmMsg)) {
                e.preventDefault();
            }
        });
    }
});

3. 确认静态文件配置 #

确保你的Django项目settings.py里已经正确配置了静态文件路径：

STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / "static"]

二、针对自定义前端页面（调用ViewSet API）的方案 #

如果是你自己开发前端页面，调用NameViewSet的接口提交数据，那可以根据你用的前端技术来实现：

原生HTML+JS方案 #

<!-- 你的表单结构 -->
<form id="custom-name-form" method="POST" action="/api/names/">
    <!-- 表单字段 -->
    <button type="submit">Save Page</button>
</form>

<script>
const form = document.getElementById('custom-name-form');
form.addEventListener('submit', function(e) {
    if (!confirm("Are You Sure You Want To Save The Page!")) {
        // 用户取消，阻止提交
        e.preventDefault();
    }
    // 用户确认的话，表单会正常提交
});
</script>

Vue.js方案（如果用Vue开发前端） #

<template>
  <form @submit.prevent="handleSubmit">
    <!-- 表单字段 -->
    <button type="submit">Save Page</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {} // 你的表单数据
    }
  },
  methods: {
    async handleSubmit() {
      // 弹出确认框
      const isConfirm = confirm("Are You Sure You Want To Save The Page!");
      if (isConfirm) {
        // 用户确认后，调用API提交数据
        try {
          await this.$axios.post('/api/names/', this.formData);
          // 提交成功后的逻辑，比如提示跳转
          alert("Saved successfully!");
        } catch (err) {
          console.error(err);
        }
      }
    }
  }
}
</script>

注意事项 #

• Django Admin的表单ID可能会根据模型名变化，如果你不确定，可以打开Admin页面的开发者工具，查看表单的id属性；
• 如果Admin里有多个提交按钮（比如「保存」「保存并继续编辑」），这个方案会对所有提交操作生效，符合你的需求；
• 自定义前端页面中，如果你用的是React等其他框架，逻辑类似：监听提交事件，弹出确认框，根据用户选择决定是否执行提交逻辑。

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