Функция триггера при программном изменении поля ввода

У меня есть ползунок, который изменяет значение полей ввода с именами «workload1» и «workload2». Настроив ползунок, следует отправить форму test-form1. (У меня нет кнопки отправки, и все мои параметры фильтрации работают с прослушивателями событий)

После отправки формы страница перезагружается, и ползунок должен быть установлен на значения, которые пользователь настроил вручную. Поэтому, если кто-то перемещает ползунок, страница перезагружается, а ручки ползунка находятся в том же положении, в котором их переместил пользователь. Чтобы это произошло, я передаю «workload_min» и «workload_max» обратно в свой шаблон «myfile.html».

Теперь вопрос в том, как я могу вызвать запуск прослушивателя событий при перемещении ручек ползунка?

Я пробовал с dispatchEvent(event), однако, поскольку значения передаются обратно в шаблон, dispatchEvent(event) будет запускаться снова и снова при бесконечной перезагрузке страницы.

Я также пытался использовать простой addEventListener('input', function ()), но изменение поля ввода за счет перемещения ручек ползунка не обнаружено.

Кто-нибудь знает, как справиться с этой проблемой?

HTML:

<input form = "test-form1" type = "text" name = "workload1" id = "workload1" readonly = "readonly">
<input form = "test-form1" type = "text" name = "workload2" id = "workload2" readonly = "readonly">
<div id = "slider-range"></div>

сценарий:

$( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 20,
      step:20,
      max: 100,
      values: {% if workload_min %}
                  [{{ workload_min}}, {{workload_max }}]
              {% else %}
                  [ 20, 100 ]
              {% endif %},
      slide: function( event, ui ) {
        $( "#workload1" ).val(ui.values[ 0 ]+"%");
        $( "#workload2" ).val(ui.values[ 1 ]+"%");
      }
    });
    
    $( "#workload1" ).val( $( "#slider-range" ).slider( "values", 0 ) + "%" );
    $( "#workload2" ).val( $( "#slider-range" ).slider( "values", 1 ) + "%" );
});


var workload1 = document.getElementById('workload1')

var event = new Event('input')

workload1.addEventListener('input', function() {
    form.submit()
})

workload1.dispatchEvent(event)

вид.py:

def djangoFunction(request):
    workload_min = request.POST.get('workload1')
    workload_max = request.POST.get('workload2')

    # do some filtering and preprocessing
    context = {'workload_min: workload_min',
               'workload_max: workload_max'}
    return render(request, 'myfile.html', context)

Я не вижу оператора dispatchEvent в коде, которым вы поделились.

Heiko Theißen 15.04.2023 09:34

@HeikoTheißen Я только что добавил.

GCMeccariello 15.04.2023 09:39
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
56
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В документации jQuery UI Slider указана функция изменения , которую можно добавить к объекту конфигурации. Эта функция будет вызываться всякий раз, когда пользователь изменяет значение ползунка, перемещая один из его маркеров. Мы можем использовать эту функцию для отправки формы.

$(function() {
  $("#slider-range").slider({
    change: function() {
      console.info(`min: ${$('#workload1').val()}`);
      console.info(`max: ${$('#workload2').val()}`);
      console.info('submit form now');
      // form.submit();
    },
    range: true,
    min: 20,
    step: 20,
    max: 100,
    values: [40, 80],
    slide: function(event, ui) {
      $("#workload1").val(ui.values[0] + "%");
      $("#workload2").val(ui.values[1] + "%");
    }
  });

  $("#workload1").val($("#slider-range").slider("values", 0) + "%");
  $("#workload2").val($("#slider-range").slider("values", 1) + "%");
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

<link href = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" rel = "stylesheet"/>
<input form = "test-form1" type = "text" name = "workload1" id = "workload1" readonly = "readonly">
<input form = "test-form1" type = "text" name = "workload2" id = "workload2" readonly = "readonly">
<div id = "slider-range"></div>

Другие вопросы по теме