дублирующиеся входы при добавлении с использованием jQuery - PullRequest
0 голосов
/ 25 апреля 2018

Этот вопрос, возможно, уже задавался, но я вроде как потерян.вот код:

    <form class="ui form attached fluid loading segment" onsubmit="return contact(this)">
    <div class="field">
    <label>Preferred Tour</label>
        <div class="field">
          <?php
            $conn=mysqli_connect('####','####','####','####');

            echo '<select required id="tourInfo">';
            echo '<option value="" selected disabled>--Preferred Tour--</option>';
            $db = mysqli_query($conn, "SELECT `id`,`tourprice`,`tourname` FROM `available_tours`");
            while ($d=mysqli_fetch_assoc($db)) {

              echo "<option value=".$d['id']." id=".$d['tourname']. " data-price=".$d['tourprice'].">".$d['tourname']."</option>";

            }

            echo "</select>";
          ?>
        </div>   
    </div>
    <div class="field" id="hiddenTortu" style="display: none;"> 
    <label>Attention</label> 
        <div class="ui icon">
          <p><b>The minimum of people for this tour is 5, less than 5 the tour is not realisable</b></p>
        </div>
    </div>
    <div class="field">  
      <label>Available Time</label>
      <div class="field">
        <?php
          $conn=mysqli_connect('####','####','####','####');

          echo '<select name="gender" required id="timeInfo">';
          echo '<option value="" selected disabled>--Preferred Time--</option>';
          $db = mysqli_query($conn, "SELECT `time_real` FROM `available_time`");
          while ($d=mysqli_fetch_assoc($db)) {
            echo "<option value=".$d['time_real'].">".$d['time_real']."</option>";
          }

          echo "</select>";
        ?>
      </div>
    </div>
  <div class="two fields"> 
      <div class="field" id="pax"> 
          <label>Please specify the number of People according to the perred tour selection</label>

Здесь начинается проблема со следующим скриптом в соответствии с выбором тура. Я пытаюсь установить минимум и максимум, чтобы пользователь не мог выбрать больше чисел длялюди в туре. Проблема в в том, что, когда пользователь выбирает первый вариант, а затем понимает, что лучшим вариантом является другой, когда он / она делает другой выбор, ввод, созданный с помощью jQuery, который был добавлен, остается и из-за новогоВыбор нового входа создан. Намерение состоит в том, что если пользователь выбирает вариант 1, добавление ввода появляется согласно варианту 1, но если пользователь сожалеет и предпочитает вариант 2, то ввод для опции 1 исчезает, а новый ввод согласно варианту 2Появляется и так далее для всех условий.

          <script>
                $(document).ready(function(){
                  $('#tourInfo').on('change', function() {
                    if ( this.value == '1')
                    {
                      $("#pax").append($('<input placeholder="Number of People" type="number" id="peopleInfo" min="1" max="2"  value="1" required>'));
                                  (function ($) {
                          $.fn.restrict = function () {
                              return this.each(function(){
                                  if (this.type && 'number' === this.type.toLowerCase()) {
                                      $(this).on('change', function(){
                                          var _self = this,
                                              v = parseFloat(_self.value),
                                              min = parseFloat(_self.min),
                                              max = parseFloat(_self.max);
                                          if (v >= min && v <= max){
                                              _self.value = v;
                                          }
                                          else {
                                              _self.value = v < min ? min : max;
                                          }
                                      });
                                  }
                              });
                          };
                      })(jQuery);

                      $('#peopleInfo').restrict();

                    }
                    else if (this.value == '2')

                      $("#pax").append($('<input placeholder="Number of People" type="number" id="peopleInfo" min="3" max="5"  value="3" required>'));
                                  (function ($) {
                          $.fn.restrict = function () {
                              return this.each(function(){
                                  if (this.type && 'number' === this.type.toLowerCase()) {
                                      $(this).on('change', function(){
                                          var _self = this,
                                              v = parseFloat(_self.value),
                                              min = parseFloat(_self.min),
                                              max = parseFloat(_self.max);
                                          if (v >= min && v <= max){
                                              _self.value = v;
                                          }
                                          else {
                                              _self.value = v < min ? min : max;
                                          }
                                      });
                                  }
                              });
                          };
                      })(jQuery);

                      $('#peopleInfo').restrict();
                    }
                    else if (this.value == '3')
                    {
                      $("#pax").append($('<input placeholder="Number of People" type="number" id="peopleInfo" min="6" max="15"  value="6" required>'));
                                  (function ($) {
                          $.fn.restrict = function () {
                              return this.each(function(){
                                  if (this.type && 'number' === this.type.toLowerCase()) {
                                      $(this).on('change', function(){
                                          var _self = this,
                                              v = parseFloat(_self.value),
                                              min = parseFloat(_self.min),
                                              max = parseFloat(_self.max);
                                          if (v >= min && v <= max){
                                              _self.value = v;
                                          }
                                          else {
                                              _self.value = v < min ? min : max;
                                          }
                                      });
                                  }
                              });
                          };
                      })(jQuery);
                      $('#peopleInfo').restrict();
                    }...

                              ...});
                          };
                      })(jQuery);

                      $('#peopleInfo').restrict();
                    }
                  });
            });
        </script>
      </div> 
      <div class="field"> 
          <label><br>Date of Tour</label>
          <input type="text" readonly required id="tourDate" class="datepicker-here form-control" placeholder="ex. August 03, 1998">
      </div>  
  </div>
  <div style="text-align:center">
    <div>
      <label>Ensure all details have been filled correctly</label>
    </div>
    <button class="ui green submit button">Submit Details</button>
  </div> 
</form>
</div>

Не могли бы вы помочь мне, пожалуйста !!!

Спасибо заранее.

1 Ответ

0 голосов
/ 25 апреля 2018

Переместите ваш скрипт изнутри div с id pax, затем очистите html элемента с id pax перед добавлением:

 //Using JQuery
 $('#pax').html('');
...