Jquery send form POST change value of inputs if collapse = false

Question

Hi i'm trying to make a validation on my form and change the values that send through form if a collapse element(of that value) = False to a null value (i'm still kinda new to javascript and 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>

On the server when i received the data from POST request with collapse flase, i got price_min = '0' and price_max ='100000000000'

Expected results:

It should be price_min = null and price_max = null

I don't know why it doesn't set the POST data equal NULL , and i don't know why.

EDIT:

ok this is weird when i change my set value code to:

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

and send the form post it return server to the value equal to the middle value of the range input(50000000000), but when i tried to do this:

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

and on the server i actually got the changed value of price_min = 1234 and price_max = 12345

why does this work? but when i try to set it value or null or none it doesn't work and just take the middle value of the range input?

I'm so confused

Thank for reading

Answer 1

You are setting value with .value but in jQuery we use .val() and set value as 0 instead of null as number type input does not accept null. Change the logic at server side to check if value is 0 instead of null.

Also, use preventDefault as first line in the search button click so that button will not submit the form directly.

See below code

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