页面加载后自动单击按钮

Question

I have a starting page with some text, where when I click show images button in starting page, It will redirect to another page and displays images.

<form>
<select name="images" id="images">
        
        <option value="cars">Car Images</option>
        <option value="cycles">Cycle Images</option>
        <option value="bike">Bike Images</option>
</select>
<input id="getimages" type="submit" name="submit" value="Get Images">
</form>

when I select any of the option and click Get Images button, only then it will show images accordingly. But I want to display images with automatically selected option(first) when page loads with out clicking Get Images button. I tried using

document.getElementById("getimages").click()

but the page is reloading again and again. How can I solve this with JS/JQuery. I hope you understand the above issue. If not please let me know. Thanks.

Answer 1

If you auto click the submit button when page loads without any condition it will create an infinite loop.

You can use select onchange event.

<select name="images" id="images" onchange="document.getElementById("getimages").click()">

But it's not the optimum solution. I recommend you to use an ajax request to load images without any page refresh.

Answer 2

I don't know if I understood you well but if yes then this might help you: I don't have your JS code but I can guess that you have an event runned when clicked the input, so you could just add the same event which would run when the document loads. I mean something like that

const showImages = () => {
   // the code that shows the images
}

document.querySelector("#getimages").addEventListener("click", showImages())
document.addEventListener("load", showImages())