Блог

Главная - Вопросы по программированию - Как преобразовать элементы управления пользовательского интерфейса jQuery в контракт элемента формы?

Как преобразовать элементы управления пользовательского интерфейса jQuery в контракт элемента формы?

#html #jquery #forms #jquery-ui

#HTML #jquery #формы #jquery-ui

Вопрос:

Я поместил ползунок в форму, но обнаружил, что он не отправляет свое значение в качестве параметра get

https://jsfiddle.net/dimskraft/284x06da/3/

id Ни ползунок, ни значение ползунка не отображаются в URL-адресе действия. Почему и как исправить?

Ответ №1:

Одним из способов исправить это было бы иметь скрытое поле ввода в форме и обновлять его значение на основе события изменения слайдера.

Здесь я добавил поле ввода с именем input1 , чтобы вы видели это в конечном URL-адресе. Кроме того, вы можете присвоить его начальное значение с помощью атрибута value . Я дал value="0"

https://jsfiddle.net/fhp81qyb/

 $( "#slider" ).slider({
  change: function( event, ui ) {
    $('#input1').val(ui.value);
  }
});

<input type="hidden" name="input1" id="input1" value="0"></input>

Комментарии:

1. Почему функция slider не генерирует его автоматически?

2. У тега формы должна быть вкладка ввода для отправки значений в URL, но, глядя на то, как jQueryUI преобразует ползунок div , он не создает input тег, поэтому он не отображается автоматически. Я не знаю точно, почему они решили не добавлять input тег, но я предполагаю, что они разработали его как виджет, чтобы сохранить его универсальным.

Ответ №2:

Слайдер не является элементом формы; следовательно, он не включен в данные формы.

Пример: https://jsfiddle.net/Twisty/qfbgh0z4/5 /

HTML

 <form action="http://localhost" method="get" target="_blank">
  <div id="slider"></div>
  <input type="hidden" name="slider-value" id="slider-value" value="0" />
  <input type="submit" value="Submit">
</form>

JavaScript

 $(function() {
  $("#slider").slider({
    slide: function(e, ui) {
      $("#slider-value").val(ui.value);
    }
  });
});