Javascript for second search bar in a page not working-CodePudding

I have two separate search bars on a single html page. The logic of the code is for a google search to be initiated on a new window, using whatever search item is entered.

The first search bar works just fine, however the second one instead just appends the search query to the main domain, instead of opening a separate google search.

It is exactly the same codes, only the IDs are changed. I don't know why the second search does not work as expected. Please help.

<h1>Search button 1</h1>
<form  role="search" id="form">
      <input  type="search" id="query" name="q" placeholder="Enter your image URL here" aria-label="Search through site content">
      <button >
        <svg  viewBox="0 0 1024 1024"><path  d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
      </button>
    </form>
    <script>
      const f = document.getElementById('form');
      const q = document.getElementById('query');
      const google = 'https://www.google.com/search?q=';

      function submitted(event) {
        event.preventDefault();
        const url = google   ' '   q.value;
        const win = window.open(url, '_blank');
        win.focus();
      }

      f.addEventListener('submit', submitted);
    </script>
    

<h1>Search button 2</h1>

    <div >

    <form  role="search" id="form2">
      <input  type="search" id="query2" name="q" placeholder="Enter your image URL here" aria-label="Search through site content">
      <button >
        <svg  viewBox="0 0 1024 1024"><path  d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
      </button>
    </form>
</div>

 <script>
      const f = document.getElementById('form2');
      const q = document.getElementById('query2');
      const google = 'https://www.google.com/search?q=';

      function submitted(event) {
        event.preventDefault();
        const url = google   ' '   q.value;
        const win = window.open(url, '_blank');
        win.focus();
      }

      f.addEventListener('submit', submitted);
    </script>

CodePudding user response：

You're overwriting f,g,and google if you want to stick to this design (which i do not recommend) change those variables names :

<h1>Search button 1</h1>
  <form  role="search" id="form">
    <input  type="search" id="query" name="q" placeholder="Enter your image URL here" aria-label="Search through site content">
    <button >
      <svg  viewBox="0 0 1024 1024"><path  d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
    </button>
  </form>
<script>
    const f = document.getElementById('form');
    const q = document.getElementById('query');
    const google = 'https://www.google.com/search?q=';

    function submitted(event) {
      event.preventDefault();
      const url = google   ' '   q.value;
      const win = window.open(url, '_blank');
      win.focus();
    }

    f.addEventListener('submit', submitted);
</script>
     
  <h1>Search button 2</h1>

  <div >

  <form  role="search" id="form2">
    <input  type="search" id="query2" name="q" placeholder="Enter your image URL here" aria-label="Search through site content">
    <button >
      <svg  viewBox="0 0 1024 1024"><path  d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
    </button>
  </form>
</div>

<script>
    const ff = document.getElementById('form2');
    const qq = document.getElementById('query2');
    const googlee = 'https://www.google.com/search?q=';

    function submitted(event) {
      event.preventDefault();
      const url = googlee   ' '   qq.value;
      const win = window.open(url, '_blank');
      win.focus();
    }

    ff.addEventListener('submit', submitted);
</script>

otherwise, change your code a little like so :

<h1>Search button 1</h1>
<form  role="search" id="form">
      <input  type="search" id="query" name="q" placeholder="Enter your image URL here" aria-label="Search through site content">
      <button >
        <svg  viewBox="0 0 1024 1024"><path  d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
      </button>
    </form>

<h1>Search button 2</h1>

    <div >

    <form  role="search" id="form2">
      <input  type="search" id="query2" name="q" placeholder="Enter your image URL here" aria-label="Search through site content">
      <button >
        <svg  viewBox="0 0 1024 1024"><path  d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
      </button>
    </form>
</div>

 <script>
      const f = document.getElementById('form');
      const q = document.getElementById('query');
      const f2 = document.getElementById('form2');
      const q2 = document.getElementById('query2');
      const google = 'https://www.google.com/search?q=';

      function submitted(event,query) {
        event.preventDefault();
        const url = google   ' '   query.value;
        const win = window.open(url, '_blank');
        win.focus();
      }
      f.addEventListener('submit', (e)=>submitted(e,q));
      f2.addEventListener('submit', (e)=>submitted(e,q2));
</script>