Issue with form validation Javascript

Question

I am using Bootstrap and I have two identical forms. I am trying to add form submission to Google Search results and it works but when I include two of the same form it doesn't work because of the id being the same on both. How can I fix this? The ID needs to be the same because google looks for the "G". The reason I have two forms is because I have it displayed differently on mobile. Using media queries. Below is my code thanks.

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

It is bad practice to have repeated ids on a single page. Use different ids and keep the same name. — Haroldo_OK
– Haroldo_OK, Commented Feb 21, 2017 at 14:06
Are you sure it is necessary in the ID and not just in the NAME attribute??? As I can see from google.com search page they just use the name attribute and a custom id. — user2399035
– user2399035, Commented Feb 21, 2017 at 14:10
note: the syntax globalSearch.q.value.length gets the element by its name, not id — Kaddath
– Kaddath, Commented Feb 21, 2017 at 14:11
why two form!!, you can style the same form for mobile devices. — Shekhar Pankaj
– Shekhar Pankaj, Commented Feb 21, 2017 at 14:47

Eivind · Accepted Answer · 2017-02-21 14:21:15Z

1

You probably want to change the placeholder, so the user don't have to delete the text than type in a query. Please view updated function.

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

answered Feb 21, 2017 at 14:21

Eivind

8414 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

klepzers · Accepted Answer · 2017-02-21 14:16:18Z

1

Two elements can not share same ID. Either use CSS styling to make different looks in mobile, either hide one of forms from webserver (PHP/etc) side either dont use getElementById - instead, use 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>

answered Feb 21, 2017 at 14:16

klepzers

1495 bronze badges

Collectives™ on Stack Overflow

Issue with form validation Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related