Javascript 更改价格范围时提交的表格

当两个范围值都更改时，我尝试提交表单。代码结构是-

<div class="card price-range-div">
   <div class="card-header">
      <h4 class="panel-title">Search By Budget</h4>
   </div>
   <div class="card-body">
      <div class="form-group">
         <div class="price-slider">
            <span>
                  <label for="">Price from</label>
                  <input readonly name="priceFrom" id="priceFrom" type="number" value="200000" min="200000" max="1000000"/>
                  <label for="">Price to</label>
                  <input readonly name="priceTo" id="priceTo" type="number" value="1000000" min="200000" max="1000000"/>
            </span>
            <input id="first-input" value="200000" min="200000" max="1000000" step="500" type="range">
            <input id="second-input" value="300000" min="300000" max="1000000" step="500" type="range">
         </div>
      </div>
   </div>
</div>
</div>

---

理解和实现这一点的一个非常简单的方法是创建一个跟踪每个输入状态的变量。一旦这两个变量都被“更改”，那么您就知道应该立即提交表单。该解决方案不能很好地扩展到几十个输入，但肯定会适用于2个输入

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<div class="card price-range-div">
    <div class="card-header">
        <h4 class="panel-title">Search By Budget</h4>
    </div>
    <div class="card-body">
        <div class="form-group">
            <div class="price-slider">
            <span>
                    <label for="">Price from</label>
                    <input readonly name="priceFrom" id="priceFrom" type="number" value="200000" min="200000" max="1000000"/>
                    <label for="">Price to</label>
                    <input readonly name="priceTo" id="priceTo" type="number" value="1000000" min="200000" max="1000000"/>
            </span>
            <input id="first-input" class="trackedInputs" value="200000" min="200000" max="1000000" step="500" type="range">
            <input id="second-input" class="trackedInputs" value="300000" min="300000" max="1000000" step="500" type="range">
            </div>
        </div>
    </div>
</div>

<script>
$(function(){
    //create variables to track a value change
    input1Changed = false;
    input2Changed = false;
    //fire our handler, whenever one of the two inputs changes
    $("input#first-input").change(function() {
        input1Changed = true;
        if(input1Changed && input2Changed) {
            alert("Submit the form here!");
        }
    });
    $("input#second-input").change(function() {
        input2Changed = true;
        if(input1Changed && input2Changed) {
            alert("Submit the form here!");
        }
    });
});
</script>

按预算搜索
价格来自
价格
$（函数（）{
//创建变量以跟踪值更改
input1Changed=false；
input2Changed=false；
//只要两个输入中的一个发生变化，就启动我们的处理程序
$（“输入#第一个输入”）.change（函数（）{
input1Changed=真；
如果（输入1更改和输入2更改）{
警告（“在此提交表单！”）；
}
});
$（“输入#第二个输入”）.change（函数（）{
input2Changed=true；
如果（输入1更改和输入2更改）{
警告（“在此提交表单！”）；
}
});
});

感谢Pendo提供的解决方案。谢谢你，伙计。在提交表单和页面加载后，您能帮我保留价格范围值吗？？？如果可能的话？这是我在表单提交和页面加载后保留滑块范围值的问题-我会检查一下。如果我的答案有帮助，请将其标记为答案。非常感谢。完成@pendo。非常感谢。

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<div class="card price-range-div">
    <div class="card-header">
        <h4 class="panel-title">Search By Budget</h4>
    </div>
    <div class="card-body">
        <div class="form-group">
            <div class="price-slider">
            <span>
                    <label for="">Price from</label>
                    <input readonly name="priceFrom" id="priceFrom" type="number" value="200000" min="200000" max="1000000"/>
                    <label for="">Price to</label>
                    <input readonly name="priceTo" id="priceTo" type="number" value="1000000" min="200000" max="1000000"/>
            </span>
            <input id="first-input" class="trackedInputs" value="200000" min="200000" max="1000000" step="500" type="range">
            <input id="second-input" class="trackedInputs" value="300000" min="300000" max="1000000" step="500" type="range">
            </div>
        </div>
    </div>
</div>

<script>
$(function(){
    //create variables to track a value change
    input1Changed = false;
    input2Changed = false;
    //fire our handler, whenever one of the two inputs changes
    $("input#first-input").change(function() {
        input1Changed = true;
        if(input1Changed && input2Changed) {
            alert("Submit the form here!");
        }
    });
    $("input#second-input").change(function() {
        input2Changed = true;
        if(input1Changed && input2Changed) {
            alert("Submit the form here!");
        }
    });
});
</script>