Question

当用户未从下拉列表中选择任何值时，我试图显示警报弹出窗口

这是我的html：

<div id="reminder" class="popup-layout">
    <form id="reminderForm" method="post">
    <div class="modal followup-modal ui-draggable" id="reminderPopupdrag" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div id="errorInPopup" class="error displayInlineBlock"></div>
                <div class="modal-header">
                    <h5 class="modal-title">select_followup</h5>
                </div>
                <div class="modal-body">
                    <table class="width100percent">
                        <tbody><tr>
                            <td>
                                <label><input type="radio" name="reminder" id="reminder-1" value="1" class="element full-width verticalAlignMiddle">close_with_reminder</label>                            </td>
                            <td class="textAlignRight">
                                <input type="text" id="reminderdate" name="reminderdate" class="marginRight5 displayNone">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <input type="text" name="reminderText" id="reminderText" value="" class="element displayNone width-full marginTop5" placeholder="add_remark_here">                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <label><input type="radio" name="reminder" id="reminder-2" value="2" class="element full-width">close_without_reminder</label>                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <select name="reminderclosereason" id="reminderclosereason" class="element displayNone width100percent">
    <option value="0">Select value</option>
    <option value="6">Advertisements</option>
    <option value="4">Another reason:</option>
    <option value="17">Checking  financial terms and conditions</option>
    <option value="16">Company not leasable</option>
    <option value="18">Future potential clients  </option>
    <option value="20">Offer is of vehicle type in which we do not do business</option>
    <option value="12">Open application</option>
    <option value="13">Order</option>
    <option value="10">Other ticket already in progress</option>
    <option value="11">Out of office reply </option>
    <option value="50">Portal, ad removed, payment, offer withdrawn</option>
    <option value="7">SPAM</option>
    <option value="9">Unsubscribe MFO Mailing</option>
    <option value="2">Vehicle/part is sold (indicate order number!)</option>
    <option value="8">Vehicle/part not on stock (is looking for something else)</option>
    <option value="1">Vehicles too expensive</option>
</select>                            </td>
                        </tr>
                    </tbody></table>
                </div>
                <div class="modal-footer">
                        <input type="submit" name="send" id="sendPreview" value="Save" class="defaultbutton displayNone">                </div>
            </div>
        </div>
    </div>
    </form>
</div>

我已经在我的js函数页面中尝试过这种方法：

var TICKET = {};

TICKET.preview = {

    init: function () {
        this.bindUI();
    },

    bindUI: function () {
        var self = this;
        $('#send').click(function () {
            self.followupPopup();
        });

        $(document).on('change', 'input[name=reminder]', function () {
            $('#sendPreview').show();

            if ($(this).val() == 1) {

                $('#reminderdate').datetimepicker({
                    showOn: "button",
                    buttonImage:vbdBaseUrl + '/images/calendar.png',
                    dateFormat:'dd-mm-yy',
                    timeFormat: 'HH:mm',
                    buttonImageOnly: true,
                    controlType: 'select',
                    showWeek: true,
                    firstDay: 1,
                    oneLine : true,
                });

                /**
                 * To display the tomorrows date and time as 8AM by default in datepicker input box.
                 */
                var today = new Date();
                var tomorrow = new Date();
                tomorrow.setDate(today.getDate() + 1);
                tomorrow.setHours(8);
                tomorrow.setMinutes(0);
                $('#reminderdate').datetimepicker('setDate', new Date(tomorrow));
                $('#reminderText').show();
                $('#reminderdate').show();
                $('.ui-datepicker-trigger').show();
                $('#reminderclosereason').hide();
                $('#saveReminder').show();

                return true;
            }

            $('#reminderText').hide();
            $('#reminderdate').hide();
            $('.ui-datepicker-trigger').hide();
            $('#reminderclosereason').show();
            $('#saveReminder').show();

        });

        $('#reminderForm').submit(function() {
            if ('' == $('#reminderclosereason').val() && $('input[name=reminder]:checked').val()!= 1) {
                $('#errorInPopup').html('please select close reason');

                return false;
            }
        });
    },

    followupPopup: function () {
        var request = BAS.ajax;

        request.url = vbdBaseUrl + '/ticket/mail/follow-up';

        request.method = 'POST';

        request.data = {
            ticketId : ticketId
        }

        request.ajaxRequest(function(response) {
            $('#reminderPopup').html(response);
            $('#reminderPopupdrag').draggable();
            $('.popup-dragable').show();
        });
    }

};

$(function () {
    TICKET.preview.init();
});

我尝试了很多解决方案。但在我看来，这些都不起作用。我不了解在这种情况下有什么问题。我正在尝试检查条件，如果未选择下拉值或下拉值为0我想显示警报

谁能帮我

谢谢。

Answer 1

事实证明，问题很简单-警报可以正常工作，只是在默认的提交行为（包括页面刷新）之前没有出现。

如果防止发生默认情况，则可以进行验证，然后从那里决定要做什么。随附的是有效的代码段。

$('#reminderForm').submit(function(e) {
  e.preventDefault(); // Stop your form from submitting.
  if ('0' === $('#reminderclosereason').val()) {
    alert();
    $('#errorInPopup').html('Please select close reason');
    return false;
  } else {
    this.submit();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="reminder" class="popup-layout">
  <form id="reminderForm" method="post">
    <div class="modal followup-modal ui-draggable" id="reminderPopupdrag" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div id="errorInPopup" class="error displayInlineBlock"></div>
          <div class="modal-header">
            <h5 class="modal-title">select_followup</h5>
          </div>
          <div class="modal-body">
            <table class="width100percent">
              <tbody>
                <tr>
                  <td>
                    <label><input type="radio" name="reminder" id="reminder-1" value="1" class="element full-width verticalAlignMiddle">close_with_reminder</label> </td>
                  <td class="textAlignRight">
                    <input type="text" id="reminderdate" name="reminderdate" class="marginRight5 displayNone">
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <input type="text" name="reminderText" id="reminderText" value="" class="element displayNone width-full marginTop5" placeholder="add_remark_here"> </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <label><input type="radio" name="reminder" id="reminder-2" value="2" class="element full-width">close_without_reminder</label> </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <select name="reminderclosereason" id="reminderclosereason" class="element displayNone width100percent">
                      <option value="0">Select value</option>
                      <option value="6">Advertisements</option>
                      <option value="4">Another reason:</option>
                      <option value="17">Checking financial terms and conditions</option>
                      <option value="16">Company not leasable</option>
                      <option value="18">Future potential clients </option>
                      <option value="20">Offer is of vehicle type in which we do not do business</option>
                      <option value="12">Open application</option>
                      <option value="13">Order</option>
                      <option value="10">Other ticket already in progress</option>
                      <option value="11">Out of office reply </option>
                      <option value="50">Portal, ad removed, payment, offer withdrawn</option>
                      <option value="7">SPAM</option>
                      <option value="9">Unsubscribe MFO Mailing</option>
                      <option value="2">Vehicle/part is sold (indicate order number!)</option>
                      <option value="8">Vehicle/part not on stock (is looking for something else)</option>
                      <option value="1">Vehicles too expensive</option>
                    </select>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="modal-footer">
            <input type="submit" name="send" id="sendPreview" value="Save" class="defaultbutton displayNone"> </div>
        </div>
      </div>
    </div>
  </form>
</div>

Answer 2

尝试一下，别忘了安装Jquery：-）

 if ($("#reminderclosereason option:selected").val() === "0") {
        console.log("Hi");
    }

Answer 3

尝试

$(document).ready(function(){
    $('#reminderForm').submit(function(e) {
       e.preventDefault();
       if ($(document).find('#reminderclosereason').val())==0) {
          alert('please select close reason');
          $('#errorInPopup').html('please select close reason');
          return false;
       } 
   });
});

在调用此之前，请不要忘记导入jquery.js。

希望这对您有帮助

如果未在jquery的下拉列表中选择值，则显示警报消息

3 个答案: