Taking input from the browser and returning a graphic

[tmezz]

Hello,

 

Quite new to everything so please accept my apologies up front. I am looking to take 3 to 4 inputs (drop down, check box, something) from a page or form and return a graphic. For example:

 

Select your favorite apple:

 

Choices:

red

green

 

Select how you like your apple:

 

Choices:

sliced

peeled

unpeeled

 

Submit

 

Return a picture of the apple choice green or red and in the form of how they liked to eat the apple.

 

I think this is pretty easy but my powers of googling have been failing me. I appreciate anyones help in pointing me in the right direction.

 

Thanks

[Ingolme]

You can either do it using a server-side language or by using Javascript. Using a server-side language requires reloading the page.

 

If you use Javascript, you use DOM methods to access the dropdown elements, then compare them. Once you have a result you can access an <img> element using DOM methods and modify its src property to show a different image.

 

If you decide to use a server-side language, you need to get the variables sent by a POST or GET methods, do the comparisons and print out an <img> tag putting a particular value in the src attribute. Getting more specific would require knowing what server-side language you plan to use.

[tmezz]

Thanks for the feedback. I'll look into using Javascript. Reloading the page sounds like something that may not be desirable. If I wanted to store previous results in a database would that be a big deal? I found some info around using php to bind javascript to mysql.

[Ingolme]

Javascript can send information to PHP using AJAX. W3Schools has an AJAX tutorial.

[tmezz]

Ok, last question.. If you did use the submit button as like a refresh would it be easier to do it server side?

[Ingolme]

You can have a button there, it doesn't necessarily have to be a submit button.

[justsomeguy]

Note also that the PHP or other server-side code for processing the form would be about the same regardless of whether it is ajax or a regular submit. The only difference might be the output that it sends. A regular submit would result in a normal HTML page as output, where an ajax request would typically result in a JSON structure being sent as output back to Javascript.