Søg
Avatar billede mikkel_strack Nybegynder
22. december 2004 - 19:31 Der er 17 kommentarer og
1 løsning

En simpel form der skifter på onchange

Jeg sidder og forsøger mig med at lave en form der kan skifte udseende på onchange i et select-felt.

Det jeg har lavet virker fint i opera og firefox, men ikke i IE.

Kan nogen fortælle mig hvor det går galt??

Koden nedenfor

God jul - Mikkel

*********

<html>
<head>
<script type="text/javascript">

function check(myValue)
{
if (myValue == 1){
formField = '<select><option value="1">hejhej<option value="2">hejhej2</select>'
swapText(formField)
}
if (myValue == 2){
formField = '<input type="text" name="teste" value=""></input>'
swapText(formField)
}

};

function swapText(formField)
{
document.getElementById("formField").innerHTML=formField
};

</script>
</head>


<body>


<table>
<tr>
<form action="#" method="post" name="test">
  <td>
  <select onchange="check(this.value);">
    <option value="1">test1<option value="2">test2
  </select>
  </td>
</tr>
<tr>
  <td id="formField"><select><option value="1">hejhej<option value="2">hejhej2</select>
  </td>
</tr>
</table>

</form>


</body>
</html>
Avatar billede olebole Juniormester
22. december 2004 - 20:00 #1
<ole>

<html>
<head>
<script type="text/javascript">
function check(myValue) {
    if (myValue == 1){
        document.getElementById("formField").innerHTML = '<select><option value="1">hejhej</option><option value="2">hejhej2</option></select>'
    }
    if (myValue == 2){
        document.getElementById("formField").innerHTML = '<input type="text" name="teste" value="">'
    }
};
</script>
</head>
<body>
<table>
<tr>
<form action="#" method="post" name="test">
  <td>
  <select onchange="check(this.value);">
    <option value="1">test1</option>
    <option value="2">test2</option>
  </select>
  </td>
</tr>
<tr>
  <td id="formField">
  <select>
      <option value="1">hejhej</option>
    <option value="2">hejhej2</option>
  </select>
  </td>
</tr>
</table>
</form>
</body>
</html>

/mvh  *<();o)
</bole>
Avatar billede olebole Juniormester
22. december 2004 - 20:06 #2
Oooops ... det skal da også lige være valid HTML. Du kan ikke 'neste' tabel og form på den måde. Skriv sådan i stedet:

<form action="#" method="post" name="test" style="display:inline">
<table>
<tr>
  <td>
  <select onchange="check(this.value);">
    <option value="1">test1</option>
    <option value="2">test2</option>
  </select>
  </td>
</tr>
<tr>
  <td id="formField">
  <select>
      <option value="1">hejhej</option>
    <option value="2">hejhej2</option>
  </select>
  </td>
</tr>
</table>
</form>
Avatar billede mikkel_strack Nybegynder
22. december 2004 - 20:09 #3
Mange tak :o)

Er der en særlig grund til det første jeg lavede ikke virkede?? Noget jeg skal skrive mig bag ørene til en anden gang??
Avatar billede olebole Juniormester
22. december 2004 - 20:43 #4
Der er et par HTML-detaljer:
1. En option har et lukke-tag. Har tags lukke-tag, bør man bruge det.
2. Et input har ikke noget lukke-tag, så det må du ikke selv 'opfinde'.
Her er en oversigt i tvivlstilfælde:
  http://www.w3.org/TR/html401/index/elements.html

Din JavaScript-kode er for så vidt ikke så skidt endda - men det er IE. Koden virker faktisk i Mozilla.
Problemet er, at man kan adressere et element, der har en id med denne alene. Derfor tror tumpede IE, at du i denne linie prøver at sætte en celle lig med et input-element:
  formField = '<input type="text" name="teste" value=""></input>'
... og det kan man naturligvis ikke.

Du kunne dog have undgået det ved at være lidt mere pertentlig med dine variabel scopes:
En variabel, der er ankommet til en funktion som et argument, kan kun læses indenfor funktionen. Det samme gælder en variabel, der er erklæret med ordet 'var' indenfor funktionen.
Er variablen erklæret med 'var' udenfor alle funktioner, er den global - og kan således læses i alle funktioner.

Prøv dette - det hjælper nok på forståelsen:

<script type="text/JavaScript">
var formField = "Globalt erklæret variabel";
function myFuncA() {
    var formField = "Lokalt erklæret variabel";
    alert("formField: " + formField);
   
    var hest = "Endnu en lokalt erklæret variabel";
    alert("hest: " + hest);
}
function myFuncB() {
    alert("formField: " + formField);
    alert("hest: " + hest);
}
</script>

<button onclick="myFuncA()">Test funktion A</button>
<button onclick="myFuncB()">Test funktion B</button>

Du kunne således have skrevet:

function check(myValue)
{
var formField;
if (myValue == 1){
... osv, osv ...

Så havde du været ude over problemerne i IE  :)
Avatar billede olebole Juniormester
22. december 2004 - 20:43 #5
... og selvtak  *<();o)
Avatar billede olebole Juniormester
22. december 2004 - 20:45 #6
Der burde selvfølgelig stå:
  "Problemet er, at man i IE kan adressere et element, der har en id med denne alene."
så misforståelser ikke opstår. Det er _kun_ IE, der godtager den adressering
Avatar billede mikkel_strack Nybegynder
22. december 2004 - 21:41 #7
Takker for forklaring :o)

Jeg kager ofte rundt i de der html-tags. Heldigvis for mig gør det sjældent den store forskel...eller måske ærgeligt nok...for ellers havde jeg måske fået det rettet?!?

Jeg ved ikke helt om jeg misforstår dig mht. de der variable. Er problemet ikke kun at der er navnesammenfald, og IE så derfor tror det er noget andet end det i virkeligheden er??

Men tak igen...er altid rart at lære noget nyt :o)
Avatar billede olebole Juniormester
22. december 2004 - 21:58 #8
Jo, det er på grund af navnesammenfald og det kan man jo let komme ud for - jo større kode, jo lettere.
Derfor er det god kodeskik at erklære variabler lokalt, hvis de kun skal bruges indenfor én og samme funktion. På den måde holder du det gobale variabelrum så 'rent' som muligt - og mulighederne for fejl ved navnesammenfald mindskes betydeligt. Sådan sparer du mange grå hår og et stort antal debugging timer  :)
Avatar billede olebole Juniormester
22. december 2004 - 22:03 #9
... altså, hvis du havde skrevet:

function check(myValue)
{
var formField;
if (myValue == 1){
... osv, osv ...

ville funktionen altid kikke på sin lokale 'formField' (den, vi erklærer med 'var'). Den ville være rystende ligeglad med, at der ligger noget udenfor funktionen, der hedder det samme.

En funktion leder først sig selv igennem efter en variabel. Er den ikke explicit erklæret her, begynder den at lede udenfor.
Dog vil den aldrig kunne se en variabel, der er erklæret inde i en anden funktion.

Det er ikke altid lige til at forstå i første hug - men flere ord og lidt forskellige vinkler plejer at hjælpe  ;o)
Avatar billede mikkel_strack Nybegynder
23. december 2004 - 04:54 #10
Ironisk nok viste det sig da jeg havde fået det lavet, at det så kun virkede i IE.

Hverken Firefox eller opera postede data fra de formfelter jeg havde skiftet :o(
Avatar billede mikkel_strack Nybegynder
23. december 2004 - 05:13 #11
Og det gør det så nu...:o)

Skulle åbenbart ha set læst lidt bedre efter i et af dine svar. At mine <form> og <table> stod lidt blandet betøde åbenbart at det ik virkede....men sjovt nok først efter jeg onChange..

Jeg må til at være lidt mere omhyggelig :o)
Avatar billede olebole Juniormester
23. december 2004 - 05:13 #12
Meget ironisk ... lidt for ironisk:
  http://tjenester.dk/x-codes.dk/eksperten/ironi/
Virker fint  :)
Avatar billede olebole Juniormester
23. december 2004 - 05:15 #13
Hehe ... jeg havde ikke opdateret siden her  :)
Avatar billede mikkel_strack Nybegynder
23. december 2004 - 05:28 #14
Utroligt som ma blir klogere dag for dag...heh

Er ikke tit man får så fin hjælp for sølle 30 points, så spytter gerne lidt oveni hvis du ellers kan fortælle mig hvordan man gør :o)
Avatar billede olebole Juniormester
23. december 2004 - 05:44 #15
Hehe ... nej, det er fint med 30 points. Du kan kikke i min kode ... der er ikke noget mystisk i den  :)
Avatar billede olebole Juniormester
23. december 2004 - 05:47 #16
Hele dokumentet, som det ligger på serveren, ser sådan ud (renset for DTD, styles, o.a):

<html>
<head>
<script type="text/javascript">
function check(myValue) {
    if (myValue == 1){
        document.getElementById("formField").innerHTML = '<select name="mySecondSelect"><option value="1">hejhej</option><option value="2">hejhej2</option></select>'
    }
    if (myValue == 2){
        document.getElementById("formField").innerHTML = '<input type="text" name="teste" value="">'
    }
};
</script>
</head>
<body>

<?
print "Du postede:<xmp>";
var_dump($_POST);
print "</xmp><hr><br>";
?>

<form action="<?=$_SERVER["PHP_SELF"]?>" method="post" name="test" style="display:inline">
<table>
<tr>
  <td>
  <select name="myFirstSelect" onchange="check(this.value);">
    <option value="1">test1</option>
    <option value="2">test2</option>
  </select>
  </td>
</tr>
<tr>
  <td id="formField">
  <select name="mySecondSelect">
      <option value="1">hejhej</option>
    <option value="2">hejhej2</option>
  </select>
  </td>
</tr>
</table>
<button type="submit">Submit</button>
</form>

</body>
</html>
Avatar billede olebole Juniormester
23. december 2004 - 05:49 #17
Ahaaaa ... du har sikkert glemt et name her:
  <select name="mySecondSelect">
Avatar billede olebole Juniormester
23. december 2004 - 05:50 #18
... og det samme her:
  document.getElementById("formField").innerHTML = '<select name="mySecondSelect"><option value="1">hejhej</option><option value="2">hejhej2</option></select>'
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 09:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58 Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
25/0713:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
White papers
Flere white papers »