如果CSS和JavaScript中的其他文本框不为空,请禁用文本框

时间:2017-09-03 13:57:56

标签: javascript jquery html

我有一个包含文本框的搜索表单。我想问的是,如果textbox1(Hotel (num_rooms))不为空,则textbox2(Packages(num_days))将被停用,或者如果textbox2(Packages(num_days))不为空,则textbox1(Hotel (num_rooms))将被禁用。因为此搜索表单将根据用户的输入导致不同的输出。如果用户尝试将数据放入textbox1并提交,那么它将根据用户对酒店的偏好返回大量建议。

<form action="Filtered-SearchResult.php" method="post">
  <div class="SearchForm">
<label id="Form"><h3 style="color:beige; text-align:left;">Search Form</h3></label><br>
<br>
<input type="text" name="location" class="searchtext" id="locate" placeholder="location" onkeyup="LettersOnly(this)" /><br>
<input type="text" name="from_budget" class="searchtext" placeholder="minimum budget" style="width:150px;" onkeyup="NumbersOnly(this)" />
<input type="text" name="to_budget" class="searchtext" placeholder="maximum budget" style="width:150px;" onkeyup="NumbersOnly(this)" /><br>
<input type="text" name="person" class="searchtext" placeholder="no of person" onkeyup="NumbersOnly(this)" /><br>
<input type="text" name="no_of_rooms" class="searchtext" style="width:150px;" placeholder="hotel(num_rooms)" onkeyup="NumbersOnly(this)" />
<input type="text" name="no_of_days" class="searchtext" style="width:150px;" placeholder="Packages(num_days)" onkeyup="NumbersOnly(this)" />
<script>
  function LettersOnly(input) {
    var regex = /[^a-zA-Z ]/gi;
    input.value = input.value.replace(regex, "");
  }

  function NumbersOnly(input) {
    var regex1 = /[^0-9]/gi;
    input.value = input.value.replace(regex1, "");
  }
</script>
<input type="submit" name="search1" value="Show Prices" id="Prices2" />
  </div>
</form>

Search Form Picture(Sample Output)

1 个答案:

答案 0 :(得分:0)

您可以为没有房间而且没有像这样的日子写一个更改事件。 您可以相应地添加更多条件

$("#no_of_days").change(function(){

    if($(this).val() == ""){
        $("#no_of_rooms").attr("disabled", false);
    }else{
        $("#no_of_rooms").attr("disabled", true);
    }
  });

  $("#no_of_rooms").change(function(){
    if($(this).val() == ""){
        $("#no_of_days").attr("disabled", false);
    }else{
        $("#no_of_days").attr("disabled", true);
    }
  });