How to make max price be required if min price entered?

4 Views

So basically it works like person inputs min price (but forgets to input max price) then he presses search (it won’t search and a wording comes out beside the max price that asks him to input max budget….. 

<form role="search" id="myform1" name="form" method="get" action="<?php echo home_url( '/properties/' ); ?>" >
    <div class="mini-field" id="minfield">
        <input input name="pricefrom" class="txt-field-input-mini formattingNumber" placeholder="Price from" style="width:159px;"id="min">
        <p><input input name="priceto" class="txt-field-input-mini formattingNumber" placeholder="Price to" title="Please input maximum price budget" style="width:159px;" id="max"></p>
    </div>
    <button type="submit" class="start-search-btn" id=search>Start Search<img src="<?php echo get_template_directory_uri();?>/images/search-img-white.png"  alt="Start Search" class="start-search-img"/></button>
</form>
Post Views: 4

Related posts

Leave a Reply

2 comments

  1. Set the Conditions like these:-

    `if ($("#min").val()== ""){
    /*Do Your Search*/
}
else{
    if($("#min").val()!== "" && $("#max").val()!==""){
        /*Do Your Search*/ 
    }
}`

    Update your code like this:-

    $(document).ready(function(){
   $("#myform1").submit(function(event){
       if ($("#min").val()== "" ){
          /*Do Your Search*/
       }
       else{
          if($("#min").val()!== "" && $("#max").val()!==""){
              /*Do Your Search*/ 
          }
          else{event.preventDefault();//this doesn't allow submit function to execute
              alert("Please Fill the details");
          }
       }
   });

  2. Since you are triggering a ‘submit’ event, you MUST cancel it if you don’t want the form to submit. (Building on Gaurav Kalyan’s answer)

    <script> 
$(document).ready(function() { 
    $('#myform1').on('submit', function(e) {

        // If min value is set but NO max value is set, cancel the submit
        if ($('#min').val() && !$('#max').val()) { 
            e.preventDefault(); // Cancel the default event of submitting the form
            alert("fill details; return false"); 
        } 
    }); 
}); 
</script>