javascript - 如果 crash = false，Jquery 发送表单 POST 更改输入值

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>

在服务器上，当我收到带有折叠flase的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的变化值

为什么会这样？但是当我尝试将其设置为值或 null 或无时，它不起作用，只取范围输入的中间值？

我很困惑

感谢您的阅读

Answer 1

您正在使用.value设置值，但在jQuery中我们使用.val()并将值设置为0而不是null，因为数字类型输入不接受null。更改服务器端的逻辑以检查值是否为 0 而不是 null。

此外，使用 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>