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

I have a form in which I wanted to have the Submit button have a pop-up to ask the user if they are sure they want to submit the form with the options 'OK' and 'cancel'. This seemed to work on all of my other forms but this one is not. Instead of showing the pop-up and asking the user for confirmation, it just submits.

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

Wondering if this might be because of a * with the JS or another part of the logic in the form...

想知道这可能是因为与JS的冲突还是形式中的另一部分逻辑......

Code:

码：

{% 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 %}

1 个解决方案

#1

From what I know of JS, you can't really do this with a submit button. So the best option is to replace the submit button with a normal button and submit through the JS function.

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

To do this you will need to give the form an id:

为此，您需要为表单提供一个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:

JS：

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

#1