問題與表單驗證Javascript

我使用Bootstrap，我有兩個相同的形式。我正在嘗試向Google搜索結果添加表單提交，並且它可以正常工作，但是當我包含兩個相同的表單時，由於這兩個表單的ID相同，因此無法工作。我怎樣才能解決這個問題？該ID需要相同，因爲谷歌尋找「G」。我有兩種形式的原因是因爲我在移動設備上的顯示方式不同。使用媒體查詢。以下是我的代碼謝謝。問題與表單驗證Javascript

<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; 
     } 
    }

來源

2017-02-21 Tom

在單個頁面上重複ID是個壞習慣。使用不同的ID並保持相同的名稱。 –

「q」對於Google來說是必需的。我不能改變它 – Tom

你確定這是必要的ID，而不只是在名稱屬性？正如我可以從google.com搜索頁面看到的，他們只是使用name屬性和自定義ID。 –

你可能想改變佔位符，所以用戶不必刪除文本而不是輸入查詢。請查看更新的功能。

function validateSearch() { 
    var q = document.getElementById('q'); 
    if (q.value.length == 0) { 
    q.setAttribute('placeholder', 'Enter search term') 
    q.style.borderColor = "red"; 
    return false; 
    } 
}

來源

2017-02-21 14:21:15 Eivind

兩個元素不能共享相同的ID。無論是使用CSS樣式，使移動不同的外觀，無論是隱藏的web服務器的形式之一（PHP /等）側或者不使用的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>

來源

2017-02-21 14:16:18 klepzers

問題與表單驗證Javascript

回答

相關問題