0

I want my website to post an image as a result of a select option value that includes only text. For instance:

<select name="facebook" id="facebook">
  <option value="Facebook"> Facebook </option>
</select>
<button type="submit" name="submit"> Submit </button>

The select tag above shows one option with the value "Facebook". When you choose this option and click submit, I want the website to post an image of the Facebook logo (retrieved from a folder or an image URL) based on the option value that was chosen.

Furthermore I insert the values into a table table_1, and select the values from the table to echo them on the website. This is the idea of retrieving values and post them as text, but as I said I want to retrieve information but post an image instead.

double-beep
  • 5,031
  • 17
  • 33
  • 41
Tobias Ringsø
  • 1
  • where do you want to post it to? – Argee May 25 '20 at 06:53
  • Hi, which language did you use on your backend? – qdequippe May 25 '20 at 06:54
  • @Argee, I haven't specified any file I want to post the result in. But The main idea is to retrieve images that I already have stored in a folder, and post the specified image of the select option on perhaps the index page. I don't know if this is what you meant, or? – Tobias Ringsø May 26 '20 at 10:07
  • Hi @qdequippe, I don't fully understand what you meant by what language I used on my backend. However, the only programming languages I know and use are PHP, HTML and CSS. – Tobias Ringsø May 26 '20 at 10:11

1 Answers1

1

Add an img element next to your button without a source (src="") and then modify it with jQuery using .attr(). To find the option that is selected from the dropdown (#select) you use the :selected selector and get the value (val()) of it.

$(document).on('click', '#submit', function() {
  $('#logo').attr('src', '//via.placeholder.com/150?text=' + $('#select').find(':selected').val()); // replace this with whatever you want
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="logoSelect" id="select">
  <option value="facebook"> Facebook </option>
  <option value="twitter"> Twitter </option>
  <option value="google"> Google </option>
  <option value="instagram"> Instagram </option>
</select>
<button id="submit" type="submit" name="submit"> Submit </button>
<br/><br/>
<img id="logo" src=""></img>

You can also achieve this by using pure JavaScript with the onclick and .selectIndex methods:

const logoImgElem = document.getElementById('logo');
const selectElem = document.getElementById('select');
document.getElementById('submit').onclick = function() {
  logoImgElem.src = '//via.placeholder.com/150?text=' + select.options[select.selectedIndex].text;
};
<select name="logoSelect" id="select">
  <option value="facebook"> Facebook </option>
  <option value="twitter"> Twitter </option>
  <option value="google"> Google </option>
  <option value="instagram"> Instagram </option>
</select>
<button id="submit" type="submit" name="submit"> Submit </button>
<br/><br/>
<img id="logo" src=""></img>
double-beep
  • 5,031
  • 17
  • 33
  • 41
  • Thank you for the answer @double-beep. I have a question though, I tried to enter the link you put in the ` – Tobias Ringsø May 26 '20 at 10:16