Question

我使用的是Bootstrap，我有两种相同的形式。我正在尝试将表单提交添加到Google搜索结果中并且它可以正常工作，但是当我包含两个相同的表单时，它不起作用，因为两者的ID相同。我怎样才能解决这个问题？ ID必须相同，因为Google会查找＆＃34; G＆＃34;。我有两种形式的原因是因为我在移动设备上的显示方式不同。使用媒体查询。以下是我的代码谢谢。

<form name="globalSearch" class="navbar-form" role="search" form action="" onsubmit="return validateSearch()">
        <div class="input-group add-on">
          <input type="hidden" name="cx" value="" />
          <input type="hidden" name="cof" value="FORID:11;NB:1" />
          <input type="hidden" name="ie" value="UTF-8" />
          <input class="form-control" placeholder="Search entire site..." id="q" name="q" type="text">
          <div class="input-group-btn">
            <button class="btn btn-default btnSubmit" type="submit">
              <i class="glyphicon glyphicon-search"></i>
            </button>
          </div>
        </div>
</form>

function validateSearch() {
        if (globalSearch.q.value.length == 0) {
            document.getElementById("q").value = "Enter a Value";
            document.getElementById("q").style.color = "red";
            return false;
        }
    }

Answer 1

两个元素不能共享相同的ID。要么使用CSS样式在移动设备上制作不同的外观，要么从webserver（PHP / etc）侧隐藏其中一个表单要么不使用getElementById - 而是使用jQuery：

<form name="globalSearch" ... >
<input name="q" data-input-type="desktop" id="q">
..
</form>
<script>
 function validateSearch() {

     var field = $("input[data-input-type="desktop"]');
     field.val("Enter value here...");
     field.css("color","red");
 }
 </script>

Answer 2

您可能想要更改占位符，因此用户不必删除文本而不是在查询中键入。请查看更新的功能。

    $('#Rank').on('change', function() {
  alert( "Dropdown Changed");
// here you can make hidden dropdowns visible
})

表单验证问题Javascript

2 个答案: