javascript/jquery only affects first element-CodePudding

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

<form  role="search" action="https://www.myurl.com/" method="get">
        <div >
                        <label  for="dgwt-wcas-search-input-3">Products search</label>
            <input id="dgwt-wcas-search-input-3" type="search"  name="s" value="" placeholder="Search for products..." autocomplete="off">
            <div  style="right: 81.2812px;"></div>
                            <button type="submit" aria-label="Search" >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

CodePudding user response：

It's because you're using a wrong document function to query, you should have used "querySelectorAll" instead of "querySelector"

After that, you'll need to set action for each form just like you're doing

CodePudding user response：

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

searchform = document.querySelector("form.dgwt-wcas-search-form");
searchform.action = searchform.action   "index.php";

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

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