Avatar billede henrik6666 Nybegynder
26. november 2008 - 13:57 Der er 16 kommentarer

Indføre tekst i formularscript

Jeg har nedenstående lille script og det virker tilfredstillende nok. Det skifter mellem forskellige billeder og når der trykkes på submit sender dem variablerne (dd og beskrivelse) videre til næste side men er der nogen der kan udbygge det til at jeg også viser en tekst under billedet ? Forstået på den måde at hver billede har sin egen unikke tekst ..

<html>
<body>
<form method=post action="side2.php">
<img id="imageToSwap" src="billede1.jpg">

<br><br>

<select name="dd" id="dd" onChange="swapImage()">
<option value="billede1.jpg">nr1</option>
<option value="billede2.jpg">nr2</option>
<option value="billede3.jpg">nr3</option>

</select>
<br><br>
<input type="text" name="beskrivelse">
<br><br>
<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("dd");
    image.src = dropd.value;   
};
</script>
<br><br>
<input type=submit value="Videre">
</form>
</body>
</html>
Avatar billede hkhgubbi Nybegynder
26. november 2008 - 14:35 #1
Kan du ikke lave et felt med sit eget ID og benytte dig af innerHTML når du skifter billede?!
Avatar billede hkhgubbi Nybegynder
26. november 2008 - 14:42 #2
<html>
<body>
<form method="post" action="side2.php">
<img id="imageToSwap" src="billede1.jpg">

<br><br>

<select name="dd" id="dd" onChange="swapImage()">
<option value="billede1.jpg">nr1</option>
<option value="billede2.jpg">nr2</option>
<option value="billede3.jpg">nr3</option>

</select>

<div id="TekstFelt"></div>

<br><br>
<input type="text" name="beskrivelse">
<br><br>
<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("dd");
    image.src = dropd.value;
    var txt = document.getElementById("TekstFelt");
    txt.innerHTML = "Det tekst du have skrevet, kan evt. hentes fra et Array";
};
</script>
<br><br>
<input type=submit value="Videre">
</form>
</body>
</html>
Avatar billede olebole Juniormester
26. november 2008 - 14:49 #3
<ole>

Undgå så vidt muligt innerHTML. Brugen af den indebærer en del uhensigtsmæssigheder - og så har den aldrig været en del af nogen standard.

Jeg forstår ikke, hvad det er, du vil lave, så prøv at forklare dig lidt tydeligere  ;o)

/mvh
</bole>
Avatar billede henrik6666 Nybegynder
26. november 2008 - 15:00 #4
Inden man submitter formen skal man have mulighed for at se de forskellige billeder og hvert billede har 4 tekster tilknyttet. Når du så submitter formen viderefører du variablerne men det sidste har jeg styr på ;-)
Avatar billede henrik6666 Nybegynder
26. november 2008 - 15:14 #5
Måske jeg forklarer mig bedre her :

Nedenstående kode viser en selectboks og ved klik vises et billede men jeg vil gerne have at der både vises et billede og 4 linier undet billedet. Ved submit viderefører jeg så en variable som jeg på side2.php kan bruge ..

Så spørgsmålet er : Vil nogen hjælpe mig til at vise hvordan det kan scriptes ?

<html>
<body>
<form method=post action="side2.php">
<img id="imageToSwap" src="billede1.jpg">

<br><br>

<select name="dd" id="dd" onChange="swapImage()">
<option value="billede1.jpg">nr1</option>
<option value="billede2.jpg">nr2</option>
<option value="billede3.jpg">nr3</option>

</select>
<br>
<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("dd");
    image.src = dropd.value;   
};
</script>
<br>
<input type=submit value="Videre">
</form>
</body>
</html>

<html>
<body>
<form method=post action="side2.php">
<img id="imageToSwap" src="billede1.jpg">

<br><br>

<select name="dd" id="dd" onChange="swapImage()">
<option value="billede1.jpg">nr1</option>
<option value="billede2.jpg">nr2</option>
<option value="billede3.jpg">nr3</option>

</select>
<br><br>
<input type="text" name="beskrivelse">
<br><br>
<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("dd");
    image.src = dropd.value;   
};
</script>
<br><br>
<input type=submit value="Videre">
</form>
</body>
</html>
Avatar billede henrik6666 Nybegynder
26. november 2008 - 15:15 #6
Hmmm ..det kører for mig :-(
Avatar billede olebole Juniormester
26. november 2008 - 15:19 #7
"[...] hvert billede har 4 tekster tilknyttet." >> ehhhh - og hvor er de mon henne? Det er jo lidt svært at få fat i dem, hvis de ligger i en skotøjsæske i Bagsvær  =)
Avatar billede henrik6666 Nybegynder
26. november 2008 - 16:30 #8
Teksterne skal vel komme fra et array men jeg ved ikke hvor jeg skal placere det eller hvordan jeg laver det i javascript.
Avatar billede hkhgubbi Nybegynder
26. november 2008 - 20:09 #9
<html>
<body onload="java script: swapImage();">
<form method="post" action="side2.php">
<img id="imageToSwap" src="billede1.jpg">

<br><br>

<select name="dd" id="dd" onChange="swapImage()">
<option value="0">nr1</option>
<option value="1">nr2</option>
<option value="2">nr3</option>

</select>

<div id="TekstFelt"></div>

<br><br>
<input type="text" name="beskrivelse">
<br><br>
<script type="text/javascript">
function swapImage(){
    var Billeder = Array("billede1.jpg", "billede2.jpg", "billede3.jpg");
    var Tekst = Array("Tekst1", "Tekst2", "Tekst3");
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("dd");
    image.src = Billeder[dropd.value];
    var txt = document.getElementById("TekstFelt");
    txt.innerHTML = Tekst[dropd.value];
};
</script>
<br><br>
<input type=submit value="Videre">
</form>
</body>
</html>
Avatar billede henrik6666 Nybegynder
26. november 2008 - 21:43 #10
Tak for input hkhgubbi men jeg selv lige i dette øjeblik blevet færdig med et andet forslag der opfylder mit ønske :-)
Avatar billede henrik6666 Nybegynder
26. november 2008 - 22:00 #11
Det virker umiddelbart fint i min foretrukne browser. Læg et svar hkhgubbi ..
Avatar billede olebole Juniormester
26. november 2008 - 22:01 #12
Hvorfor ikke bare bruge valid og tidssvarende kode? I stedet for linjen:
    txt.innerHTML = Tekst[dropd.value];

- kan du passende skrive:
    txt.firstChild.nodeValue = Tekst[dropd.value];

- og:
    <div id="TekstFelt">&nbsp;</div>
Avatar billede henrik6666 Nybegynder
26. november 2008 - 22:11 #13
For god orden skyld paster jeg lige mit forslag som nok trænger til en smule optimering :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function display(obj,id1,id2,id3) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
}
</script>
</head>

<body>
<form method=post action="side2.php">
<table width="340" cellspacing="0" cellpadding="2">
<thead>
<tr>
<td>
<select name="type" onChange="display(this,'billede1','billede2','billede3');">
<option>Please select:</option>
<option value="billede1">billede1</option>
<option value="billede2">billede2</option>
<option value="billede3">billede3</option>
</select>
</td>
</tr>
</thead>

<tbody id="billede1" style="display: none;">
<tr>
<td>Billede 1 : <img src="billede1.jpg" alt=""></td>
</tr><tr>
<td>Tekst 1</td>
</tr><tr>
<td>Tekst 2</td>
</tr><tr>
<td>Tekst 3</td>
</tr><tr>
<td>Tekst 4</td>
</tr>
</tbody>

<tbody id="billede2" style="display: none;">
<tr>
<td><img src="billede2.jpg" alt=""></td>
</tr><tr>
<td>Tekst 1</td>
</tr><tr>
<td>Tekst 2</td>
</tr><tr>
<td>Tekst 3</td>
</tr><tr>
<td>Tekst 4</td>
</tr>
</tbody>

<tbody id="billede3" style="display: none;">
<tr>
<td><img src="billede3.jpg" alt=""></td>
</tr><tr>
<td>Tekst 1</td>
</tr><tr>
<td>Tekst 2</td>
</tr><tr>
<td>Tekst 3</td>
</tr><tr>
<td>Tekst 4</td>
</tr>
</tbody>

<tfoot>
<tr>
<td colspan="2"><input type=submit value="Videre"></td>
</tr>
</tfoot>

</table>

</form>
</body>
</html>
Avatar billede olebole Juniormester
26. november 2008 - 22:31 #14
Jeg kan absolut ikke se begrundelsen for at bruge en tabel. Det er et dårligt valg, så prøv f.eks. at bygge strukturen i div i stedet. Desuden giver det ikke mening at give et tbody-element display-værdien 'block'.

Når det er sagt, kan scriptet sexes lidt op:

<script type="text/javascript">
var oActID = null;
function display(obj) {
    if (obj.selectedIndex<1) return false;
    var sId = obj.value;
    if (oActPic) oActPic.style.display = "none";
    oActPic = document.getElementById(sId);
    oActPic.style.display = "block"
}
</script>

<select name="type" onchange="display(this)">
    <option>Please select:</option>
    <option value="billede1">billede1</option>
    <option value="billede2">billede2</option>
    <option value="billede3">billede3</option>
</select>
Avatar billede hkhgubbi Nybegynder
27. november 2008 - 08:17 #15
-> olebole
Kan godt forstå du ikke kan se mening med tabelerne. Derudover har jeg et problem med "firstChild.nodeValue", da det der ikke er muligt at bruge hverken <br> eller <br />.
Avatar billede hkhgubbi Nybegynder
27. november 2008 - 08:17 #16
Svar...!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester