Показать предупреждение, если значение не выбрано в выпадающем списке в jquery - PullRequest
Новая
       13

Показать предупреждение, если значение не выбрано в выпадающем списке в jquery

0 голосов
/ 13 декабря 2018

Я пытаюсь показать всплывающее окно с предупреждением, когда пользователь не выбрал значение из выпадающего списка

Вот мой 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 Я хотел бы показать предупреждение

Может ли кто-нибудь помочь мне

Заранее спасибо.

Ответы [ 3 ]

0 голосов
/ 13 декабря 2018

Оказывается, проблема была проста - предупреждение работает, оно просто не доходит до поведения отправки по умолчанию, которое включает в себя обновление страницы.

Если вы препятствуете выполнению настройки по умолчанию, выможет подтвердить, а затем решить, что делать оттуда.Прилагается рабочий фрагмент. 

$('#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>
0 голосов
/ 13 декабря 2018

Попробуйте, не забудьте установить Jquery: -) 

 if ($("#reminderclosereason option:selected").val() === "0") {
        console.log("Hi");
    }
0 голосов
/ 13 декабря 2018

Попробуйте это 

$(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, прежде чем вызывать это.

Надеюсь, это поможет вам

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...