仅当用户选择特定单选按钮时，才在该对话框中显示确认/对话框并发送 POST 请求

Question

我需要显示一个确认/对话框并从对话框中发送 POST 请求只有当用户在其他单选按钮中选择一个单选按钮时，其值为“等待”。在所有其他情况下，不需要显示确认/对话框，并且需要直接从 #save 元素触发 POST 请求。

这是我的 JSP 中的表单元素：

<form:form id="saveform" modelAttribute="form" action="#">
<div class="row form-group radio">
    <label class="col-xs-12 control-label text-right">
        <spring:message code="indicatorX"/> :
    </label>
    <div class="col-xs-12">
        <div class="has-error">
            <form:errors path="indicatorX" cssClass="help-block error" />
        </div>
        <label class="radio-inline radio-inline-espace">
            <form:radiobutton path="indicatorX" value="true" class="js-close" data-collapse="divX"/>
            <spring:message code="yes"/>
        </label>
        <label class="radio-inline radio-inline-espace">
            <form:radiobutton path="indicatorX" value="false" class="js-open" data-collapse="divX"/>
            <spring:message code="no"/>
        </label>
        <label class="radio-inline radio-inline-espace">
            <form:radiobutton path="indicatorX" value="waiting" class="js-close" data-collapse="divX"/>
            <spring:message code="Not responded"/>
        </label>
    </div>
</div>
<div class="row form-group radio">
    <label class="col-xs-12 control-label text-right">
        <spring:message code="indicatorY"/> :
    </label>
    <div class="col-xs-12">
        <div class="has-error">
            <form:errors path="indicatorX" cssClass="help-block error" />
        </div>
        <label class="radio-inline radio-inline-espace">
            <form:radiobutton path="indicatorY" value="true" class="js-close" data-collapse="divY"/>
            <spring:message code="yes"/>
        </label>
        <label class="radio-inline radio-inline-espace">
            <form:radiobutton path="indicatorY" value="false" class="js-open" data-collapse="divY"/>
            <spring:message code="no"/>
        </label>
        <label class="radio-inline radio-inline-espace">
            <form:radiobutton path="indicatorY" value="waiting" class="js-close" data-collapse="divY"/>
            <spring:message code="Not responded"/>
        </label>
    </div>
</div>
<a id="save" class="btn btn-primary" href="#modalConfirmation" data-toggle="modal" data-backdrop="static">
    <spring:message code="saveRecord" />
</a>
<!--  Modal element to confirm if user want to save -->
<div id="modalConfirmation" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" data-show="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body">
                <spring:message code="MSG-XXX"/>
            </div>
            <div class="modal-footer">
                <button id="confirmYes" class="btn btn-default" data-dismiss="modal">
                    <spring:message code="no"/>
                </button>
                <button id="confirmYes" class="btn btn-primary" data-dismiss="modal">
                    <spring:message code="yes"/>
                </button>
            </div>
        </div>
    </div>
</div>

我的控制器中的 POST 端点

    @RequestMapping(value = "/save", method = RequestMethod.POST)
public String save(@ModelAttribute FormObject form,
    BindingResult validation, RedirectAttributes redirectAttributes, ModelMap model) {
    LOG.info("webapp: method = save");

    //validation logic
    //service logic
    return ...;
}

请记住，我正在接手一个项目，所以还没有设计架构，目前我必须处理一些特殊情况，因为您可以看到按钮被定义为 锚元素 （带 id 保存）。

尝试了几个例子目前取得的结果：

A) 保存按钮将触发 POST 请求并显示对话框（虽然它不应该），而无需等待用户确认

或

B)如果任何单选按钮的选定值“等待”，则请求会被触发但不会到达服务器。

我很难思考如何实现这一点，我在堆栈上看到了很多类似 example dialogbox ajax 的示例，关于如何从对话框中发送，但我认为在我的情况下，我需要一些验证逻辑，然后才能发送为异步调用？ (AJAX)

这是我的 JS 代码，其中包含一些简单的逻辑来检查单选按钮是否具有“等待”值。

    var selectedValOne = $("[name='indicatorX']:checked").val();
    var selectedValTwo = $("[name='indicatorY']:checked").val();

    $('document').on(
      "click",
      "#save",
      function() {

        if (selectedValOne === 'waiting' || selectedValTwo === 'waiting') {
          $("#modalConfirmation").modal("show");

          $('#confirmYes').on('click', function() {
            showProgressbar();
            $("#saveform").attr(
              'action',
              PATH_CONTEXT +
              '/savingcontext/save');
            $("#saveform").submit();

          });

        } else {

          showProgressbar();
          $("#saveform").attr(
            'action',
            PATH_CONTEXT +
            '/savingcontext/save');
          $("#saveform").submit();

        }
      });

Answer 1

该按钮现在触发并调用模式并从“是”按钮触发提交请求我必须将 jquery 调用更改为 $('document').on("click", "#save", function() {});