html - 如何在 jquery slider 中向 django 后端传递两个值？

Question

我想以 GET 形式向 Django 后端传递两个值。这两个值是 values[0]和 values[1] .如何修改 HTML 中的输入标签？

$(function() {
  $("#slider-range").slider({
    range: true,
    min: 1910,
    max: 2019,
    values: [1950, 2010],
    slide: function(event, ui) {
      $("#amount").val(ui.values[0] + "won - " + ui.values[1] + "won");
    }
  });
  
  $("#amount").val($("#slider-range").slider("values", 0) + "won - " + $("#slider-range").slider("values", 1) + "won");
});

<FORM NAME="myForm" method="GET" action="{%url 'search_result'%}">
  <p>
    <label for="amount">won:</label>
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;" aria-valuemin="">
  </p>
  <input type="submit" value="search" id="search_button">
</FORM>

Answer 1

假设您没有为此使用 AJAX，那么您可以通过在表单中​​的隐藏字段中设置 slider 值来实现您的目标，如下例所示。

$(function() {
  let updateSliderFields = () => {
    let values = $("#slider-range").slider("values")
    $('#from').val(values[0]);
    $('#to').val(values[1]);  
    $("#amount").val(`${values[0]} won - ${values[1]} won`);
  }
  
  $("#slider-range").slider({
    range: true,
    min: 1910,
    max: 2019,
    values: [1950, 2010],
    slide: updateSliderFields
  });
  
  updateSliderFields();
});

#amount {
  border: 0;
  color: #f6931f;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<form name="myForm" method="GET" action="{%url 'search_result'%}">
  <p>
    <label for="amount">won:</label>
    <div id="slider-range"></div>
    <input type="text" id="amount" readonly aria-valuemin="" />
  </p>
  
  <input type="text" id="from" />
  <input type="text" id="to" />
  <input type="submit" value="search" id="search_button">
</form>

请注意，我做了一些调整以使逻辑更简洁。此外，这些字段仅在本示例中可见。在您的生产版本中，它们应更改为 type="hidden" .