✔ Problem mit innerHTML sobald ich ein Formular aus der Site mache

T

tdssoulhunter

Grünschnabel
Hallo Leute!

Ich habe ein Problem, sobal ich ein formular tag in den body setze!
ohne <form> funktioniert das ganze wie gewünscht aber sobald <form> drin ist, geht mein
innerhtml script nicht mehr!
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Selects</title>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
 <style rel="stylesheet" type="text/css">
 </style>

</head>

<body>
<!--<form action="innerhtml.php" method="post">-->

 <script type="text/javascript">
   function feld(nummer)
{
  if(nummer==1 || nummer==2 || nummer==3 || nummer==4 || nummer==8 || nummer==9 || nummer==10 || nummer==11 || nummer==14 || nummer==15 || nummer==16 || nummer==17 || nummer==20 || nummer==21 || nummer==22 || nummer==23 || nummer==26 || nummer==27 || nummer==28 || nummer==31 || nummer==32 || nummer==33)
  document.getElementById('groesse').innerHTML='<option value="0"> - </option><option value="1">S Ø230x150</option><option value="2">M Ø230x300</option><option value="3">L Ø350x150</option><option value="4">XL Ø350x300</option>';
  else if(nummer==5 || nummer==7 || nummer==12 || nummer==18 || nummer==24 || nummer==29 || nummer==34)
  document.getElementById('groesse').innerHTML='<option value="0"> - </option><option value="5">S Ø230x150</option><option value="6">L Ø350x150</option>';
  else if(nummer==6 || nummer==13 || nummer==19 || nummer==25 || nummer==30 || nummer==35)
  document.getElementById('groesse').innerHTML='<option value="0"> - </option><option value="2">M Ø230x300</option><option value="4">XL Ø350x300</option>';
  else  
  document.getElementById('groesse').innerHTML='<option value="0"> - </option><option value="1">5</option><option value="1">6</option>';
}

   function groesse(value)
{
   if(value==1)
     document.getElementById('bild').innerHTML='<table cellpadding="0" cellspacing="0"><tr><td><img alt="201" src="1.png" alt="201"></td><td><img alt="201" src="2.png"></td></tr><tr><td><img alt="101" src="3.png"></td><td><img alt="102" src="4.png"></td></tr></table>';
   if(value==2)
     document.getElementById('bild').innerHTML='<table cellpadding="0" cellspacing="0"><tr><td><img alt="101" src="3.png"></br><img alt="101" src="3.png"></td><td><img alt="102" src="4.png"></br><img alt="101" src="4.png"></td></tr></table>';
   if(value==3)
     document.getElementById('bild').innerHTML='<table cellpadding="0" cellspacing="0"><tr><td><img alt="201" src="2.png"><img alt="201" src="2.png"></td></tr><tr><td><img alt="101" src="3.png"><img alt="101" src="3.png"></td></tr></table>';
   if(value==4)
     document.getElementById('bild').innerHTML='<table cellpadding="0" cellspacing="0"><tr><td><img alt="101" src="3.png"><img alt="101" src="3.png"></td></tr><tr><td><img alt="101" src="3.png"><img alt="101" src="3.png"></td></tr></table>';
   if(value==5)
     document.getElementById('bild').innerHTML='<table cellpadding="0" cellspacing="0"><tr><td><img src="1.png" alt="201"></td><td><img alt="201" src="2.png"></td></tr></table>';
   if(value==6)
     document.getElementById('bild').innerHTML='<table cellpadding="0" cellspacing="0"><tr><td><img src="1.png" alt="201"></td><td><img alt="201" src="1.png" alt="201"></td></tr></table>';
}   
</script>


<div id="inhalt" name="inhalt">
  <select id="feld" name="feld" onchange="feld(this.value);">
  <option "selected"> - </option>
  <option value="1">A1</option>
  <option value="2">A2</option>
  <option value="3">A3</option>
  <option value="4">A4</option>
  <option value="5">A5</option>
  <option value="6">A6</option>
  <option value="7">B1</option>
  <option value="8">C1</option>
  <option value="9">C2</option>
  <option value="10">C3</option>
  <option value="11">C4</option>
  <option value="12">C5</option>
  <option value="13">C6</option>
  <option value="14">D1</option>
  <option value="15">D2</option>
  <option value="16">D3</option>
  <option value="17">D4</option>
  <option value="18">D5</option>
  <option value="19">D6</option>
  <option value="20">E1</option>
  <option value="21">E2</option>
  <option value="22">E3</option>
  <option value="23">E4</option>
  <option value="24">E5</option>
  <option value="25">E6</option>
  <option value="26">F1</option>
  <option value="27">F3</option>
  <option value="28">F4</option>
  <option value="29">F5</option>
  <option value="30">F6</option>
  <option value="31">G1</option>
  <option value="32">G3</option>
  <option value="33">G4</option>
  <option value="34">G5</option>
  <option value="35">G6</option>
  </select>
  <p></p>
  <select id="groesse" name="groesse" onchange="groesse(this.value);">
  </select>
  <p></p>
  <div id="bild" name="bild"></div>
  <input type=submit name="add" value="Hinzufügen" />
 
 
</div>
<!--</form>-->
<?php
print_r($_POST);
?>
</body>
</html>

Ich google schon seit 4h aber finde nichts, was mir die Augen öffnet.

P.s.: Ich bin recht neu in der Geschichte von dynamischen Webseiten, bitte nehmt mir Form- oder
Sauberkeitsfehler nicht übel!
Ausserdem hoffe ich darauf, das ich hier in der richtigen Kategorie bin. :-/
 
Der Grund findet sich in den gleichlautenden Funktionsnamen, wie die vergebenen ID-Bezeichner feld und groesse für die auszulösenden <select>-Elemente.

Mit ihrer Umbenennung funktioniert das Script innerhalb des Formularbereichs <form></form>.
Javascript: 
function field(nummer) {
    ...
}

function dimension(value) {
    ...
}
HTML: 
<select id="feld" name="feld" onchange="field(this.value);">
...
<select id="groesse" name="groesse" onchange="dimension(this.value);">
__________________________
[edit 09:23 Uhr] Tipp-Ex [/edit]
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück