(Javascript) onFocus på en option, skal resultere i at et annet element som forandrer seg

[thewarclown]

Hei, jeg utvikler for tiden en priskalkulator for et rekkverksfirma.

Den lages i PHP og HTML.

 

Den er ca ferdig, men kunden hadde et "last minute request": Når kunden trykker på <select> og selecter en av <option>'sa.. så utifra hvilken option personen har trykket på, så skal et bilde vises ved siden av hele <form>en. Altså et bilde av produktet de har valgt i selecten!

 

Noen som har lyst til å forklare meg / hjelpe meg med åssen jeg gjør det?

 

Mvh,

Simen

[trash__]

Javascript er dessverre ikke min sterke side, men klarte å skrape sammen noe som skal få jobben gjort;

 

<script type="text/javascript">
function preview() {
if(document.getElementById("rekkverk").value == 1) { document.getElementById("preview").innerHTML = "1 er valgt"; }
if(document.getElementById("rekkverk").value == 2) { document.getElementById("preview").innerHTML = "2 er valgt"; }
if(document.getElementById("rekkverk").value == 3) { document.getElementById("preview").innerHTML = "3 er valgt"; }
}
</script>

 

I scriptet over kan du bytte ut "rekkverk" med iden på select-boksen, og "preview" med iden på diven hvor du ønsker å forhåndsvise bildet. Inne i select-taggen må du også legge til at onFocus="preview()", som sørger for at preview-funksjonen kjøres hver gang brukeren bytter valg.

 

document.getElementById("rekkverk").value

returnerer verdien som for øyeblikket er valgt i selecten med id "rekkverk".

document.getElementById("preview").innerHTML = "bla";

setter innholdet i diven med id "preview" til "bla". Her kan du sette inn det riktige bildet ved å bruke standard <img>.

 

Som sagt er dette hverken vakkert eller best-practice, men dette bør kunne gi deg en idé til hvordan du kan gjennomføre det

[thewarclown]

Liker det jeg ser! Sjekket ikke tråden før nå. Har sånn ca fått det til allerede, på en annen måte - og selvfølgelig ved hjelp av en anna person da min kunnskap rundt JavaScript er tilnærmet lik 0.

 

http://dreamdev.no/pkskalk/kalkulator.php

 

Problemet her, er at jeg ikke får satt en value på optionsa. Legger ved link til pastebin, så om du kunne sett over åssen det fungerer - og kanskje sagt ifra om det er enkelt å legge til value på de.. da hadde jeg loved you long time!

 

Tusen hjertelig takk for hjelp btw :-)

 

 

Pastebin: http://pastebin.com/yWnbV7cC

[trash__]

Her har jeg prøvd meg litt frem, og det ser ut til å fungere. La på en value bak alle alternativene i optionsData, og endret opprettelsen av options til å sette riktig value istedenfor ' '. Nok en gang, Javascript er ikke mitt felt, men håper dette kan brukes allikevel Endret 20. juni 2011 av w0bni

[thewarclown]

Sikker på dette? Får ikke ut valuen fortsatt.

 

Om du kan litt om PHP, prøv å kjør scriptet - og print ut valuen til det som blir selecta.

 

 

Edit: Nevermind, jeg er bare utrolig dum. Tusen hjertelig takk for hjelpen. Du har vært en engel

Endret 20. juni 2011 av whoreclown

[thewarclown]

Sendte deg en melding w0bni!