JQuery отправить форму POST изменить значение входных данных, если collapse = false

Question

Привет, я пытаюсь сделать проверку в моей форме и изменить значения , которые отправляются через форму, если элемент свертывания (этого значения) = False для нулевого значения (я все еще вроденовичок в javascript и Jquery).

if (document.getElementById("filter_form")) {
    var slider1 = document.getElementById("price_min");
    var slider2 = document.getElementById("price_max");
    
    output1.value = slider1.value; // Display the default slider value
    output2.value = slider2.value;

    output1.oninput = function() {
        slider1.value = this.value;
    }
    output2.oninput = function() {
        slider2.value = this.value;
    }
    // Update the current slider value (each time you drag the slider handle)
    slider1.oninput = function() {
        output1.value = this.value;
    }
    slider2.oninput = function() {
        output2.value = this.value;
    }
}
$(document).ready(function() {
  $('#search').click(function(event) {
    if ($('#price').attr("aria-expanded") == "true") {
      var price_min = Number($('#price_min').val());
      var price_max = Number($('#price_max').val());
    } else {
      var price_min = null;
      var price_max = null;
      $('#price_min').value = null;
      $('#price_max').value = null;
    }
    if (price_min > price_max) {
      event.preventDefault();
      iziToast.warning({
        title: 'Fail!',
        message: 'min price cant be larger than max price',
        position: 'bottomRight'
      }); //my alert
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
<form method="POST" action="/search_url/'">
  <div class="form-group">
    <p>
      <button id="price" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample-1" aria-expanded="false" aria-controls="collapseExample-1" style="width: 100%">
                  Price
                </button>
    </p>
    <div class="collapse" id="collapseExample-1">
      <div>Min: <input type="number" id="price_min_value" min="0" max="100000000000" value="0" /></div>
      <input type="range" id="price_min" class="form-control" min="0" max="100000000000" value="0" name="price_min">
      <div>Max: <input type="number" id="price_max_value" min="0" max="100000000000" value="100000000000" /></div>
      <input type="range" id="price_max" class="form-control" min="0" max="100000000000" value="100000000000" name="price_max">
    </div>
  </div>
  <button class="btn btn-primary mr-1" id="search">Search</button>
</form>

На сервере, когда я получил данные из запроса POST с развалом, я получил price_min = '0' и price_max = '100000000000'

Ожидаемые результаты:

Это должны быть price_min = null и price_max = null

Я не знаю, почему он не устанавливает данные POST равными NULL , и я не знаю почему.

РЕДАКТИРОВАТЬ:

хорошо, это странно, когда я изменяю свой код установленного значения на:

$('#price_min').val("");
$('#price_max').val("");

и отправьте форму после того, как она вернет сервер на значение, равное среднему значению диапазона ввода (50000000000), но когда я попытался это сделать:

$('#price_min').val("1234");
$('#price_max').val("12345");

и наСервер я действительно получил измененное значение Price_min = 1234 и Price_max = 12345

Почему это работает? но когда я пытаюсь установить его значение или ноль или ничего, он не работает и просто принимает среднее значение диапазона ввода?

Я так растерялся

Спасибо за чтение

Answer 1

Вы устанавливаете значение с помощью .value, но в jQuery мы используем .val() и устанавливаем значение как 0 вместо нуля, так как ввод числового типа не принимает ноль. Измените логику на стороне сервера, чтобы проверить, что значение равно 0, а не нулю.

Кроме того, используйте preventDefault в качестве первой строки при нажатии кнопки поиска, чтобы кнопка не отправляла форму напрямую.

см. Ниже код

$(document).ready(function() {
  $('#search').click(function(event) {
    event.preventDefault(); // it will prevent default behavior of button clicked
    console.log('button clicked');
    if ($('#price').attr("aria-expanded") == "true") {
      var price_min = new Number($('#price_min').val());
      var price_max = new Number($('#price_max').val());
    } else {
      var price_min = 0;
      var price_max = 0;
      $('#price_min').val(price_min);
      $('#price_max').val(price_max);
    }
    if (price_min > price_max) {
      iziToast.warning({
        title: 'Fail!',
        message: 'min price cant be larger than max price',
        position: 'bottomRight'
      }); //my alert
    } else {
      $("#searchForm").submit();
   }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
<form method="POST" action="/search_url/'" id="searchForm">
  <div class="form-group">
    <p>
      <button id="price" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample-1" aria-expanded="false" aria-controls="collapseExample-1" style="width: 100%">
                  Price
                </button>
    </p>
    <div class="collapse" id="collapseExample-1">
      <div>Min: <input type="number" id="price_min_value" min="0" max="100000000000" value="0" /></div>
      <input type="range" id="price_min" class="form-control" min="0" max="100000000000" value="0" name="price_min">
      <div>Max: <input type="number" id="price_max_value" min="0" max="100000000000" value="100000000000" /></div>
      <input type="range" id="price_max" class="form-control" min="0" max="100000000000" value="100000000000" name="price_max">
    </div>
  </div>
  <button class="btn btn-primary mr-1" id="search">Search</button>
</form>