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

Question

I need to show a confirmation/dialog and send the POST request from within the dialogbox only if the user select a radiobutton among other radiobuttons with the value "waiting". In all other cases no confirmation/dialog needs to show up and the POST request needs to get fired directly from the #save element.

Here is the form element in my 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>

The POST endpoint in my controller

    @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 ...;
}

Please bear in mind that I am taking over a project so haven't designed the architecture and currently I have to deal with some special cases as you can see the button is defined as an anchor element (with id save).

The results achieved so far when trying several examples:

A) The save button will either fire the POST request and show the dialog (while it should not)without waiting for user confirmation

OR

B)If any of the radiobutton has the selected value "waiting" the request is fired but don't reach the server.

I had some difficulty to think how I could achieve that, I saw lot of examples on stack like this example dialogbox ajax on how to send from within a dialogbox but I think in my case I would need some validation logic before sending as an asynchronous call? (AJAX)

Here is my JS code with some simple logic to check if radiobutton has "waiting" value.

    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

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