Question

我正在处理一个搜索表单，其中必须根据客户名称，手机号码，入住日期和退房日期获取搜索结果。但是，“姓名和手机号码”需要文本字段。另外，“入住和退房日期”具有文本字段，但我正在对该字段使用jquery datepicker函数。

注意：第一个文本字段代表姓名和电话号码，第二个文本字段代表入住和退房日期。默认情况下，第一个字段显示，而Jquery Code隐藏第二个字段。第二个字段用于显示日期日历。

HTML代码：

<form method="POST" action="searched_page.php">
        <div class="input-gpfrm input-gpfrm-lg">
            <select id="srch-form" name="srch-option" required="">
                <option value="">Search by</option>
                <option value="name">Customer Name</option>
                <option value="mobile_no">Mobile Number</option>
                <option value="arrival_dt">Check-in date</option>
                <option value="departure_dt">Check-out date</option>
            </select>
        </div>
        <div class="input-gpfrm input-gpfrm-lg">
            <input type="text" id="dtls" name="querystr" placeholder="Search by Details" required>
            <input type="text" id="datepicker5" name="querystr" placeholder="Search by Date" required>
        </div>
        <input type="submit" name="search" value="Search">
    </form>

日期选择器JS代码：

<script type="text/javascript">
  function showDays() 
  {

  }   

$("#datepicker5").datepicker({
    dateFormat: 'dd/mm/yy',
    onSelect: showDays
});

</script>

因此（考虑以下Jquery代码），当选择名称和移动号码选项（从下拉列表中）时，日期的文本字段将隐藏，名称和编号的文本字段将显示，日期的文本字段将显示，日期的文本字段将显示选择入住和退房日期选项时，姓名和号码将隐藏。

用于隐藏和显示文本字段的jQuery代码

<script type="text/javascript">
        $(function() {
            $('#datepicker5').hide(); 
            $('#srch-form').change(function()
            {
                if($('#srch-form').val() == 'arrival_dt' || $('#srch-form').val() == 'departure_dt') 
                {
                    $('#datepicker5').show();
                    $('#dtls').hide();
                } else {
                    $('#datepicker5').hide();
                    $('#dtls').show();
                } 
            });
        });
</script>

现在，我的查询是上述所有内容均正常运行，但搜索按钮无效。当我从选项第一个文本字段中选择入住日期和入住日期时，上述的“名称和编号”字段反之亦然，反之亦然。但是，当我单击“提交”按钮时，该按钮无法执行用PHP编写的代码。就是说，我的搜索结果没有出现。我试图删除Jquery代码，它工作正常。因此，我认为这可能是一个愚蠢的错误，但是可以提供任何帮助。预先感谢。

Answer 1

问题在于两个文本输入字段都具有required属性。除非两个字段都已填写，否则表单不会发布。

您可以使用jQuery prop()或attr()添加或删除required属性。下面的代码段使用jquery required从隐藏字段中删除了prop属性。

$(function() {
  $('#datepicker5').hide(); 
  $('#srch-form').change(function()
  {
    if($('#srch-form').val() == 'arrival_dt' || $('#srch-form').val() == 'departure_dt') 
    {
      $('#datepicker5').prop('required', true).show();
      $('#dtls').prop('required', false).hide(); // remove required
    } else {
      $('#datepicker5').prop('required', false).hide();  // remove required
      $('#dtls').prop('required', true).show();
    } 
  });
  
  // below code is here to demonstrate the form has posted but should be removed from your code
  $('form').submit(function(){ alert("form has been posted"); return false; });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="searched_page.php">
        <div class="input-gpfrm input-gpfrm-lg">
            <select id="srch-form" name="srch-option" required="">
                <option value="">Search by</option>
                <option value="name">Customer Name</option>
                <option value="mobile_no">Mobile Number</option>
                <option value="arrival_dt">Check-in date</option>
                <option value="departure_dt">Check-out date</option>
            </select>
        </div>
        <div class="input-gpfrm input-gpfrm-lg">
            <input type="text" id="dtls" name="querystr" placeholder="Search by Details" required>
            <input type="text" id="datepicker5" name="querystr" placeholder="Search by Date" required>
        </div>
        <input type="submit" name="search" value="Search">
    </form>

注意，您应该删除在提交表单时发出警报的代码，这只是为了证明表单已成功发布。

单击提交按钮无法获取数据

1 个答案: