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

Posted 2023-05-09

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

【英文标题】：Show a confirmation/dialog and send POST request within that dialog box only if the user select specific radio button

【发布时间】：2020-04-24 13:23:59

【问题描述】：

我需要显示一个确认/对话框并从对话框中发送 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();

        
      );

【问题讨论】：

这好像是前端的问题，你不能通过添加一些做逻辑的js来解决它吗？

感谢您的回复，这确实是我的想法，但是当我添加逻辑以检查单选按钮是否具有“等待”值时，什么也没有发生，没有向服务器发送请求，也没有 onclick 事件被触发。我会将我的 JS 代码添加到问题中。

所以第一个问题修复了按钮现在触发并调用模式并从是按钮触发提交请求我不得不将 jquery 调用更改为 $('document').on("click" , "#save", function() );

【参考方案1】：

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