Replace the src attribute of an image from a text field in a form

Question

I am trying to find a way of loading an image from a directory after the user enters text inside a text field with a submit button. (simply put a search button that displays the result) However the client does not have a database and it not willing to update his currently outdated setup.(pictures are taken at an amusement park and sent through FTP to a folder on his server.) His current site is in php. My difficulty lies in creating a modern website with the option for client to search for their image on his site. I was wondering if it was possible to have an images src attribute change depending on what clients write in a text field they submit. (If possible changing the image attribute would also avoid reloading the page every time someone does a search?)

Answer 1

Although this sounds like a bad setup, you can definitely change the src attribute of an element through javascript dependent on user interaction.

First you need to put an event listened on the input element that you want to watch

let myInput = document.getElementByID('whateverYourIDis')
myInput.onchange = function(){ 

let theImage = document.getElementById('idOfImage')

let searchTerm = myInput.value;
theImage.src = searchTerm;
  }

This will simply change the src attribute to equal whatever the user types in the input, youll need to add some code to use the value of the input to search your file structure for a matching file