Use a form with option elements to generate custom iframes

Question

1

I am making a website for a school project.

The idea is a website that allows you to filter different results from Cricket stores in New Zealand and then have them all in one place using iframes eg. if one filter was to sort by lowest price, the iframes would have the URL "www.cricketwebiste.com/sortby=lowest/"

I've made a form so far:

<br>
<select id="brand">
  <option value="brand">Brand</option>
  <option value="graynicolls">Gray-Nicolls</option>
  <option value="kookaburra">Kookaburra</option>
  <option value="m&h">Millichamp and Hall</option>
  <option value="newbalance">New Balance</option>
</select>
<br><br>
<input type="button" onclick="getOption()" value="Submit">

My question is: how would I use the data from a submitted form to generate these iframes so that it would go to a page with multiple iframes with different websites. that all have that filter on? eg. cricketwebsite.com/kookaburra

Answer 1

You could do it in multiple ways. In all of them you'll have to listen to the events on or in the form element.

This first example listens for the change event on the <select> element. The change event happens when the value of a form element has been changed and triggers event handlers listening to that event. The event handler in this case is a function called selectBrand .

The selectBrand function gets the current value of the <select> element, which is the value of the value attribute on the selected <option> element. It then concatenates the value with the URL that needs to go before it and sets the src property of the <iframe> element which changes the URL of the iframe.

Now your iframe content has been changed.

 const select = document.getElementById('brand'); const iframe = document.getElementById('iframe'); const url = 'www.cricketwebiste.com/'; function selectBrand(event) { const { value } = event.target; const src = url + value; console.log(src); // This show the result. iframe.src = src; } select.addEventListener('change', selectBrand);

 <select id="brand"> <option value="brand">Brand</option> <option value="graynicolls">Gray-Nicolls</option> <option value="kookaburra">Kookaburra</option> <option value="m&h">Millichamp and Hall</option> <option value="newbalance">New Balance</option> </select> <iframe id="iframe" src="brand"></iframe>

Otherwise you could listen for the submit event on a <form> element that is wrapping your inputs and other elements you need. A submit event happens whenever the submit button has been clicked in a form. This button needs to be an <input type="submit"> or <button type="submit"></button> element for it to count.

The regular behavior of the <form> element is to send all your data in the form through a HTTP request to a designated endpoint. But we'll cancel that behavior with event.preventDefault() which, like the name suggests, prevents the default behavior of a submit.

Instead you'll want to extract the values from the form that you need. You can do that with aFormData constructor. This will create an iterable object with name-value pairs of the elements in the form. With the FormData.get() you can get the specific value of a form element, in this case the 'brands' field, which is your <select> element.

It then does the same thing as the example above.

 const form = document.forms['brand-form']; const iframe = document.getElementById('iframe'); const url = 'www.cricketwebiste.com/'; function selectBrand(event) { event.preventDefault(); const { target } = event; const formData = new FormData(target); const value = formData.get('brand'); const src = url + value; console.log(src); // This show the result. iframe.src = src; } form.addEventListener('submit', selectBrand);

 <form name="brand-form"> <select id="brand" name="brand"> <option value="brand">Brand</option> <option value="graynicolls">Gray-Nicolls</option> <option value="kookaburra">Kookaburra</option> <option value="m&h">Millichamp and Hall</option> <option value="newbalance">New Balance</option> </select> <input type="submit" value="submit"> </form> <iframe id="iframe" src="brand"></iframe>

I hope this is clear enough and will help you get further with your project. If you have any questions or comments, feel free to leave them below.