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
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.
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>