how can i deliver two values to the django backend in jquery slider?

user_14950270 0
Viewed 72

I want to deliver two values to the Django backend in a GET form. The two values are values[0] and values[1]. How can I modify the input tag in 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>
html jquery
1 Answers

Assuming you're not using AJAX for this then you can achieve your goal by setting the slider from and to values in hidden fields within your form, as in the following example.

$(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>

Note that I made a couple of tweaks to make the logic more succinct. In addition, the fields are only visible for this example. In your production version they should be changed to type="hidden".

user_5194130
Related