'javascript/jquery only affects first element

I have this html code for a search form and i would like to use jquery to edit the url to

let searchform, searchurl, i; searchurl = window.location.href;

searchform = document.querySelector("form.dgwt-wcas-search-form");
searchform.action = searchform.action + "index.php";
<form class="dgwt-wcas-search-form" role="search" action="https://www.myurl.com/" method="get">
        <div class="dgwt-wcas-sf-wrapp">
                        <label class="screen-reader-text" for="dgwt-wcas-search-input-3">Products search</label>
            <input id="dgwt-wcas-search-input-3" type="search" class="dgwt-wcas-search-input" name="s" value="" placeholder="Search for products..." autocomplete="off">
            <div class="dgwt-wcas-preloader" style="right: 81.2812px;"></div>
                            <button type="submit" aria-label="Search" class="dgwt-wcas-search-submit">Search</button>
            <input type="hidden" name="post_type" value="product">
            <input type="hidden" name="dgwt_wcas" value="1">
</div>
</form>

<form class="dgwt-wcas-search-form" role="search" action="https://www.myurl.com/" method="get">
        <div class="dgwt-wcas-sf-wrapp">
                        <label class="screen-reader-text" for="dgwt-wcas-search-input-3">Products search</label>
            <input id="dgwt-wcas-search-input-3" type="search" class="dgwt-wcas-search-input" name="s" value="" placeholder="Search for products..." autocomplete="off">
            <div class="dgwt-wcas-preloader" style="right: 81.2812px;"></div>
                            <button type="submit" aria-label="Search" class="dgwt-wcas-search-submit">Search</button>       
            <input type="hidden" name="post_type" value="product">
            <input type="hidden" name="dgwt_wcas" value="1">
                    </div>
    </form>

The script only changes the first url in searchbox into https://www.myurl.com/index.php but the second searchbox will not get the script to run.

I would like two search forms to change the url from https://www.myurl.com/ to https://www.myurl.com/index.php

Any help would be greatly appreciated.

Thank you

javascripthtmljquery


Solution 1:[1]

It's because you're using a wrong document function to query, you should have used "querySelectorAll" instead of "querySelector" so that it returns all items that match the query.

After that, you'll need to loop over the array of forms and set action for each form just like you're doing.

Solution 2:[2]

let searchform, searchurl, i;
searchurl = window.location.href;

searchform = document.querySelector("form.dgwt-wcas-search-form");
searchform.action = searchform.action + "index.php";
<form class="dgwt-wcas-search-form" role="search" action="https://www.myurl.com/" method="get">
  <div class="dgwt-wcas-sf-wrapp">
    <label class="screen-reader-text" for="dgwt-wcas-search-input-3">Products search</label>
    <input id="dgwt-wcas-search-input-3" type="search" class="dgwt-wcas-search-input" name="s" value="" placeholder="Search for products..." autocomplete="off">
    <div class="dgwt-wcas-preloader" style="right: 81.2812px;"></div>
    <button type="submit" aria-label="Search" class="dgwt-wcas-search-submit">Search</button>
    <input type="hidden" name="post_type" value="product">
    <input type="hidden" name="dgwt_wcas" value="1">
  </div>
</form>

<form class="dgwt-wcas-search-form" role="search" action="https://www.myurl.com/" method="get">
  <div class="dgwt-wcas-sf-wrapp">
    <label class="screen-reader-text" for="dgwt-wcas-search-input-3">Products search</label>
    <input id="dgwt-wcas-search-input-3" type="search" class="dgwt-wcas-search-input" name="s" value="" placeholder="Search for products..." autocomplete="off">
    <div class="dgwt-wcas-preloader" style="right: 81.2812px;"></div>
    <button type="submit" aria-label="Search" class="dgwt-wcas-search-submit">Search</button>
    <input type="hidden" name="post_type" value="product">
    <input type="hidden" name="dgwt_wcas" value="1">
  </div>
</form>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 David Millar
Solution 2 Fabian S.

Related Questions