dynamiske select/text felter

Kun testet i IE 7

<script type='text/javascript'>
    var visibleElement;
    function toggleVisibleElement(name){
        if(visibleElement){
            visibleElement.style.display = 'none';
        }
        visibleElement = document.getElementById(name);
        visibleElement.style.display = 'inline';
    }
</script>

<select size="50" height="10" name="type" onChange="toggleVisibleElement(this.value);">
    <option value="Skrivebord">Skrivebord</option>
    <option value="Mødebord">Mødebord</option>
</select>

<span id='Skrivebord' style='display: none;'>
    Skrivebord:
    Bredde:<br /><input type="text" name="bredde" value="bredde"><br />
        Dybde minimum:<br /><input type="text" name="dybde_min" value="dybde minimum"><br />
        Dybde maximum:<br /><input type="text" name="dybde_max" value="dybde maximum"><br />
        Højde:<br /><input type="text" name="hoejde" value="højde">
</span>
<span id='Mødebord' style='display: none;'>
    Mødebord:
    Diameter:<br /><input type="text" name="dia" value="diameter"><br />
    Højde:<br /><input type="text" name="hoejde" value="højde"><br />
</span>

/1

Kvadratrodenaf1>> God kode, men jeg ville nok bruge id og ikke name til at adressere felterne med, når nu du bruger getElementById().

lad os nu sige jeg skal have oprettet flere kategorier.
(skrivebord, mødebord, reol, skab) med vær deres mål-form.

hvad gør jeg da?

Opretter flere span-elementer:

<span id='Reol' style='display: none;'>
    Mødebord:
    Diameter:<br /><input type="text" name="dia" value="diameter"><br />
    Højde:<br /><input type="text" name="hoejde" value="højde"><br />
</span>

<span id='Skab' style='display: none;'>
    Mødebord:
    Diameter:<br /><input type="text" name="dia" value="diameter"><br />
    Højde:<br /><input type="text" name="hoejde" value="højde"><br />
</span>

Bare husk at rette span'ens id til det samme som value i option.

perfekt :) lig i jer et svar begge

læg*

Okidoke! =) Svar kommer her!

Og svar her.. Yes - det giver mere mening at bruge id i stedet for name.

/1.

Hej, jeg har lige et ekstra spm til jer. I kan selvfølgelig score lidt ekstra på det :)

jeg har nu lavet ovenstående, og det virker jo perfekt :)

men når jeg vil POST til databasen indsætte den alt, undtaget det der står i de <span>. dvs. bredde dybde_min, dybde_max, hoejde, diameter?

if (isset($_POST['submit'])) {
    include("db.php");
        $ak_bygning = $_POST['ak_bygning'];
        $ak_etage = $_POST['ak_etage'];
        $ak_rumnr = $_POST['ak_rumnr'];
        $type = $_POST['type'];
        $overflade = $_POST['overflade'];
        $farve = $_POST['farve'];
        $bredde = $_POST['bredde'];
        $dybde_min = $_POST['dybde_min'];
        $dybde_max = $_POST['dybde_max'];
        $hoejde = $_POST['hoejde'];
        $sokkel = $_POST['sokkel'];
        $diameter = $_POST['diameter'];
        $kommentar = $_POST['kommentar'];
        $projekt = $_SESSION['projekt'];
    mysql_query("INSERT INTO `$projekt` ( `ak_bygning` , `ak_etage` , `ak_rumnr` , `type` , `overflade` , `farve` , `bredde` , `dybde_min` , `dybde_max` , `hoejde` ,                 `sokkel` , `diameter` , `kommentar`) VALUES  ('$ak_bygning', '$ak_etage', '$ak_rumnr' , '$type' , '$overflade' , '$farve' , '$bredde' , '$dybde_min' , '$dybde_max' , '$hoejde' , '$sokkel' , '$diamter' , '$kommentar')");
}

Og de spans:  <span id='Skrivebord' style='display: none;'>
    Skrivebord:<br />
    Bredde:<br /><input type="text" name="bredde"><br />
        Dybde minimum:<br /><input type="text" name="dybde_min"><br />
        Dybde maximum:<br /><input type="text" name="dybde_max"><br />
        Højde:<br /><input type="text" name="hoejde">
</span>
<span id='Mødebord' style='display: none;'>
    Mødebord:<br />
    Diameter:<br /><input type="text" name="dia"><br />
    Højde:<br /><input type="text" name="hoejde"><br />
</span>

<span id='Reol' style='display: none;'>
    Reol:<br />
    Bredde:<br /><input type="text" name="bredde"><br />
        Dybde:<br /><input type="text" name="dybde_min"><br />
        Højde:<br /><input type="text" name="hoejde">
</span>
<span id='Skab' style='display: none;'>
    Skab:<br />
    Bredde:<br /><input type="text" name="bredde"><br />
        Dybde:<br /><input type="text" name="dybde_min"><br />
        Højde:<br /><input type="text" name="hoejde">
</span>

Er dine spans inde i form elementet?

har fået det til at virke :) ellers tak

havde lavet dette:

  <?
      echo "<select size=\"40\" height=\"10\" name=\"type\" onChange=\"toggleVisibleElement(this.value);\">";
        $sql = "SELECT `standard`, `maal` FROM `standard` GROUP BY `standard` ORDER BY `standard` asc";
       
$qh = mysql_query( $sql ) or die( mysql_error() );
while ( $row = mysql_fetch_assoc( $qh ) ) {
echo '<option value='.$row[standard].'>'.$row[standard].'</option>';
}
echo '</select></p>'; ?>

Men det ville den ikke være med til. fik en javascript "fejl på siden" så nu ligger de bare statisk

mht. at bruge id istedet for name:

<script type='text/javascript'>
    var visibleElement;
    function toggleVisibleElement(id){
        if(visibleElement){
            visibleElement.style.display = 'none';
        }
        visibleElement = document.getElementById(id);
        visibleElement.style.display = 'inline';
    }
</script>

hvad gør jeg forkert?

har de her, som jeg gerne ville kunne kalde. men de skal kunne sættes på mere end en option.:
<span id='1' style='display: none;'>
    Bredde:<br /><input type="text" name="bredde"><br />
        Højde:<br /><input type="text" name="hoejde">
            </span>


<span id='2' style='display: none;'>
    Bredde:<br /><input type="text" name="bredde"><br />
    Dybde:<br /><input type="text" name="dybde_min"><br />
        Højde:<br /><input type="text" name="hoejde">
</span>

<span id='3' style='display: none;'>
        Diameter:<br /><input type="text" name="diameter"><br />
        Højde:<br /><input type="text" name="hoejde">
</span>

<span id='4' style='display: none;'>
    Bredde:<br /><input type="text" name="bredde"><br />
        Dybde:<br /><input type="text" name="dybde_min"><br />
        Højde:<br /><input type="text" name="hoejde">
        Sokkel:<br /><input type="text" name="sokkel">
</span>

<span id='5' style='display: none;'>
    Bredde:<br /><input type="text" name="bredde"><br />
        Dybde min:<br /><input type="text" name="dybde_min"><br />
        Dybde max:<br /><input type="text" name="dybde_max"><br />
        Højde:<br /><input type="text" name="hoejde">
</span>

<span id='6' style='display: none;'>
    Bredde:<br /><input type="text" name="bredde"><br />
        Dybde min:<br /><input type="text" name="dybde_min"><br />
        Dybde max:<br /><input type="text" name="dybde_max"><br />
</span>

<span id='7' style='display: none;'>
    Bredde:<br /><input type="text" name="bredde"><br />
        Dybde:<br /><input type="text" name="dybde_min"><br />
</span>

vil gerne kunne kalde sådan her:

<select size="40" height="10" name="type" onChange="toggleVisibleElement(this.value);">
          <option value=""></option>
            <option id="2" value="Aflægningsbord – Fast">Aflægningsbord – Fast</option>
            <option id="7" value="Aflægningsbord – H/S El">Aflægningsbord – H/S El</option>
            <option id="7" value="Aflægningsbord – H/S Gas">Aflægningsbord – H/S Gas</option> 
            <option id="7" value="Aflægningsbord – H/S Manuel">Aflægningsbord – H/S Manuel</option>
            <option id="2" value="Arkivskab">Arkivskab</option>   
            <option  value="Barstol">Barstol</option>
            <option id="2" value="Brandskab">Brandskab</option>
            <option id="2" value="Brandskab HM">Brandskab HM</option>
            <option id="3" value="Cafebord">Cafebord</option> 
            <option id="2" value="Dueslag">Dueslag</option> 
            <option id="2" value="EDB-bord">EDB-bord</option>
            <option  value="Flipover">Flipover</option>
            <option id="2" value="Fryser">Fryser</option>
            <option id="2" value="Garderobeskab">Garderobeskab</option>
            <option id="4" value="Jalousiskab - Ben">Jalousiskab - Ben</option>
            <option id="4" value="Jalousiskab - Hjul">Jalousiskab - Hjul</option>
            <option id="4" value="Jalousiskab - Sokkel">Jalousiskab - Sokkel</option>
            <option id="2" value="Jalousiskab - Standard">Jalousiskab - Standard</option>
            <option id="2" value="Jalousiskab - Top">Jalousiskab - Top</option>
            <option id="2" value="Jalousiskab - Væg">Jalousiskab - Væg</option>
            <option  value="Kaffeautomat">Kaffeautomat</option>
            <option id="2" value="Kantinebord">Kantinebord</option>
            <option  value="Kantinestol m arm">Kantinestol m arm</option>
            <option  value="Kantinestol u arm">Kantinestol u arm</option>
            <option id="4" value="Klædeskab Sokkel">Klædeskab Sokkel</option>
            <option id="2" value="Klædeskab Standard">Klædeskab Standard</option>
            <option id="2" value="Kommode">Kommode</option>
            <option id="2" value="Kommode HM">Kommode HM</option>
            <option  value="Kontorstol m arm">Kontorstol m arm</option>
            <option  value="Kontorstol u arm">Kontorstol u arm</option>
            <option id="2" value="Kunst">Kunst</option>
            <option id="2" value="Køleskab">Køleskab</option>
            <option  value="Lampe - bord">Lampe - bord</option>
            <option  value="Lampe - gulv">Lampe - gulv</option>
            <option  value="Lampe - loft">Lampe - loft</option>
            <option  value="Lænestol">Lænestol</option>
            <option id="1" value="Lærred">Lærred</option>
            <option id="2" value="Mobilkassette m hjul">Mobilkassette m hjul</option>
            <option id="2" value="Mobilkassette u hjul">Mobilkassette u hjul</option>
              <option id="2" value="Mødebord - Elipse">Mødebord - Elipse</option>
              <option id="3" value="Mødebord - Halvcirkel">Mødebord - Halvcirkel</option>
              <option id="2" value="Mødebord">Mødebord</option>
              <option id="3" value="Mødebord - Rundt">Mødebord - Rundt</option>
              <option  value="Mødestol m arm">Mødestol m arm</option>
              <option  value="Mødestol u arm">Mødestol u arm</option>
              <option id="1" value="Opslagstavle">Opslagstavle</option>
              <option id="2" value="Pengeskab">Pengeskab</option>
              <option id="4" value="Reol - ben">Reol - ben</option>
              <option id="4" value="Reol - hjul">Reol - hjul</option>
              <option id="4" value="Reol - sokkel">Reol - sokkel</option>
              <option id="2" value="Reol - standard">Reol - standard</option>
              <option id="2" value="Reol - top">Reol - top</option>
              <option id="2" value="Reol - væg">Reol - væg</option>
              <option id="2" value="Sagsvogn">Sagsvogn</option>
              <option  value="Skammel">Skammel</option>
              <option id="1" value="Skillevæg">Skillevæg</option>
              <option id="2" value="Skranke">Skranke</option>
              <option id="5" value="Skrivebord - Fast">Skrivebord - Fast</option>
              <option id="6" value="Skrivebord - H/S El">Skrivebord - H/S El</option>
              <option id="6" value="Skrivebord - H/S Gas">Skrivebord - H/S Gas</option>
              <option id="6" value="Skrivebord - H/S Manuel">Skrivebord - H/S Manuel</option>
              <option id="2" value="Sofa">Sofa</option>
              <option id="2" value="Sofabord">Sofabord</option>
              <option id="2" value="Stigereol">Stigereol</option>
              <option  value="Stumtjener">Stumtjener</option>
              <option id="2" value="Stålskab">Stålskab</option>
              <option id="2" value="Stålskab HM">Stålskab HM</option>
              <option id="2" value="Tegningsskab">Tegningsskab</option>
              <option  value="Vandautomat">Vandautomat</option>
              <option id="1" value="Whiteboard">Whiteboard</option>
             
          </select>

opretter lige et spm med nogle point i :)

http://www.eksperten.dk/spm/807572