Question

我有一个表单，其中我想让提交按钮有一个弹出窗口，询问用户是否确定要提交带有“确定”和“取消”选项的表单。这似乎适用于我的所有其他形式，但这不是。它不是显示弹出窗口并要求用户进行确认，而是提交。

想知道这是否是因为与JS的冲突或表格中的其他部分逻辑......

代码：

{% extends "prod/page_base.html" %}

{% load dajaxice_templatetags %}
{% load static %}

{% block title %}{{ edit_add }} product configuration{% endblock %}

{% block dajax %}
    {% dajaxice_js_import %}
    <script src="{% static 'dajax/jquery.dajax.core.js' %}"></script>
{% endblock %}

{% block script %}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    if ($("#id_line").val() != "group1" && $("#id_line").val() != "group2") {
        $("#group_fields").hide();
    }
    $("#id_line").click(function() {
        if ($("#id_line").val() != "group1" && $("#id_line").val() != "group2") {
            $("#group_fields").hide();
        }
        else {
            $("#group_fields").show();
        }
    });
});
</script>
{{ form.media }}
{% endblock %}

{% block pagetitle %}{{ edit_add }} Product Configuration{% endblock %}

{% block page_content %}

{% if form.errors or formset.errors %}
<p class='error_note'><strong>Please correct the error{{ form.errors|pluralize }} below.</strong></p>
{% endif %}

    <form class="edit" method="post" enctype="multipart/form-data">{% csrf_token %}
        {{ form.non_field_errors }}
        <p>
        {{ form.name.errors }}
        <label for="id_name">Product Name:</label>
        {{ form.name }}
        </p>
        <p>
        {{ form.line.errors }}
        <label for="id_line">Product Line:</label>
        {{ form.line }}
        </p>
        <div id="group_fields">
        <p>
        {{ form.type.errors }}
        <label for="id_type">Type:</label>
        {{ form.type }}
        </p>
        </div>
        <p>
        {{ form.reason_for_change.errors }}
        <label for="id_reason_for_change">Reason for change (mandatory):</label>
        {{ form.reason_for_change }}
        </p>
        <input class="button" type="Submit" value="Commit changes" onclick="return confirm('Submit changes?')">
    </form>

{% endblock %}

Answer 1

据我所知，你可以通过提交按钮真正做到这一点。所以最好的选择是用普通按钮替换提交按钮并通过JS函数提交。

要执行此操作，您需要为表单提供一个id：

<form id="form1" class="edit" method="post" enctype="multipart/form-data">{% csrf_token %}
    {{ form.non_field_errors }}
    <p>
    {{ form.name.errors }}
    <label for="id_name">Product Name:</label>
    {{ form.name }}
    </p>
    <p>
    {{ form.line.errors }}
    <label for="id_line">Product Line:</label>
    {{ form.line }}
    </p>
    <div id="group_fields">
    <p>
    {{ form.type.errors }}
    <label for="id_type">Type:</label>
    {{ form.type }}
    </p>
    </div>
    <p>
    {{ form.reason_for_change.errors }}
    <label for="id_reason_for_change">Reason for change (mandatory):</label>
    {{ form.reason_for_change }}
    </p>
    <input class="button" value="Commit changes" onclick="confirm('Submit changes?')">
</form>

JS：

function confirm(str){
    confirm = window.confirm(str);
    if (confirm == true){
        document.getElementById('form1').submit();
    }
}

Django OnClick提交按钮未显示确认弹出窗口

1 个答案: