When I choose an option and click the button, I wanna open the image. Why this doesn't work?

<form action="#" method="post">
<select name="carlist">
  <option value="renault">Renault</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input name="submit" type="button" value="Show the car!" onclick="location.href='images/<?php echo($_POST['carlist']); ?>.jpg'" />
</form>

It opens only images/.jpg, like the PHP code didn't work.

When I choose an option and click the button, I wanna open the image. Why this doesn't work?

<form action="#" method="post">
<select name="carlist">
  <option value="renault">Renault</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input name="submit" type="button" value="Show the car!" onclick="location.href='images/<?php echo($_POST['carlist']); ?>.jpg'" />
</form>

It opens only images/.jpg, like the PHP code didn't work.

• javascript
• php
• html
• html-select

Share Follow edited Sep 1, 2022 at 18:41 aynber 23k99 gold badges5454 silver badges6868 bronze badges asked Mar 22, 2016 at 19:38 Orbit09Orbit09 21533 gold badges66 silver badges1313 bronze badges 1

• type="submit" instead of button? – user3253002 Commented Mar 22, 2016 at 19:54

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Try this:

<form action="#" method="post">
<select id="carlist">
  <option value="renault">Renault</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input name="submit" type="button" value="Show the car!" onclick="location.href='images/' + document.getElementById('carlist').value + '.jpg'" />
</form>

No PHP necessary at all.

You seem confused about the order of execution of PHP and Javascript. Your <?php-code?> is executed before you even load the page, so there are no $_POST variables defined. That is why it is evaluated to an empty string. Only when you submit the form, $_POST contains your form data on the consecutive page load. However, you never get to submit the form, because 1) you have no button with type="submit" and 2) - even if you did - it would probably be prevented by the execution of your onclick-Javascript.

To solve you problem you probably should use either Javascript or PHP, but not both.

Javascript-Solution:

<select id="carlist">
  <option value="renault">Renault</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="button" onclick="location.href='images/'+document.getElementById('carlist').value+'.jpg';"/>

PHP-Solution:

<?php if(isset($_POST["carlist"])) {header("Location: images/".$_POST["carlist"].".jpg");}?>
<form action="#" method="post">
<select name="carlist">
  <option value="renault">Renault</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input type="submit" value="Show the car!"/>
</form>

You need to change type button to submit. Because button don't run PHP code. But If you don't want to change button to submit then you need to add some javascript for execute the process. This is the code after I edited.

<form action="#" method="post">
<select name="carlist">
<option value="renault">Renault</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

<input name="submit" type="submit" value="Show the car!" onclick="location.href='images/<?php echo($_POST['carlist']); ?>.jpg'" />
</form>

PHP is a server side language. It means that you can't use it in client side inside browser. A browser side (client side) language is JavaScript and you need to use it for stuff like this. PHP runs only on rendering page when your page is rendering $_POST['carlist'] is empty (is not set). Because you haven't posted carlist attribute from previous page by submitting a form that contains carlist input. As jayms said you can set an id for your select tag and get it by JavaScript code like document.getElementbyId.