Fabian: Formular Elemente dis-/enablen

SELF-Forum

Formular Elemente dis-/enablen

Fabian
– Informationen zu den Bewertungsregeln

Tag.

Ich möchte auf meiner Website ein <input> die disabled ist enablen wenn man in einer <select box> ein bestimmtes item wählt folgendes funzt aber nur im Opera, kann mir jmd helfen?

HTML:
-----
-----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>FabSoft Development</title>
  <link rel="stylesheet" href="../stylesheet.css" type="text/css" />
</head>

<body>
<script language="JavaScript">
<!--
var var_show;
function show_altfont(var_show)
{
        if(var_show==0)
        {
  document.all.logoform.AltFont.removeAttribute("disabled","false");
        document.all.logoform.AltFont.removeAttribute("disabled","false");
        }
        else
        {
  document.all.logoform.AltFont.setAttribute("disabled","true","false");
        document.all.logoform.AltFont.setAttribute("disabled","true","false");
        }
}
//-->
</script>

<table style="text-align: left; background-color: rgb(192, 192, 192); width: 100%;" id="header" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td><span style="color: rgb(192, 192, 192);">&nbsp; &nbsp;</span></td>
    </tr>
    <tr>
      <td>
      <h1><img src="../images/logo.png" style="width: 800px; height: 100px;" alt="FabSoft Development" /></h1>
      <span style="color: rgb(192, 192, 192);"></span>
      </td>
    </tr>
    <tr>
      <td>
      <blockquote>
        <div id="tabs5"> <li><a href="main_home.html"><span>Home</span></a></li>
        <li id="current"><a href="main_form.html"><span>Design</span></a></li>
        <li><a href="main_projects.html"><span>Projekte</span></a></li>
        <li><a href="main_downloads.html"><span>Downloads</span></a></li>
        <li><a href="main_links.html"><span>Links</span></a></li>
        <a href="main_things.html"><span>Zeugs</span></a>
        </div>
      </blockquote>
      </td>
    </tr>
  </tbody>
</table>
<h1>&nbsp;</h1>
<h2><em>Design</em></h2>
<p>Wir k&ouml;nnen ihnen ein kostenloses Web2.0isches Logo
designen. Daf&uuml;r m&uuml;ssen Sie uns nur folgendes
Formularausf&uuml;llen:</p>
<p>
<script src="http://der-formular-service.com/wcformcheck.php" type="text/javascript"></script>Alle mit * gekenzeichniten Felder sind Pflichtfelder.</p>
<form name="logoform" method="post" action="http://der-formular-service.com" onsubmit="return WCformcheck();"><input name="formid" value="125782" type="hidden" /> <input name="formpass" value="973e0ea7b001e987af13caf0cee4b45a" type="hidden" /><input name="pflichtfelder" value="Text/URL/Email" type="hidden" /><br />
  <table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
    <tbody>
      <tr>
        <td>Nachname:</td>
        <td><input name="Nachname" size="20" type="text" /></td>
      </tr>
      <tr>
        <td>* Logo Text:&nbsp;</td>
        <td><input name="Text" size="20" type="text" /></td>
      </tr>
      <tr>
        <td>* Ihre Website URL:</td>
        <td><input name="URL" size="20" type="text" /></td>
      </tr>
      <tr>
        <td>* Ihre Email Adresse:</td>
        <td><input name="Email" size="20" type="text" /></td>
      </tr>
      <tr>
        <td colspan="2" rowspan="1"><span style="font-weight: bold;">Logo Design (optional)</span></td>
      </tr>
      <tr>
        <td>Schriftart</td>
        <td>
        <select name="Font">
        <option value="1" onclick="show_altfont(1)">TrebuchtMS</option>
        <option value="2" onclick="show_altfont(2)">Rounded</option>
        <option value="0" onclick="show_altfont(0)">Andere</option>
        </select>
  Name und Downloadlink der Schrift: <input disabled="disabled" name="AltFont" id="AltFont" /></td>
      </tr>
      <tr>
        <td>Mit Spiegelung: <img src="../images/form/mit-spiegelung.png" style="width: 165px; height: 80px;" alt="" align="middle" />&nbsp;<br />
Ohne Spiegelung:<img src="../images/form/ohne-spiegelung.png" style="width: 165px; height: 80px;" alt="" align="middle" /></td>
        <td>
        <select name="Speigelung">
        <option>Ohne</option>
        <option>Mit</option>
        </select>
        </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
&nbsp;<br />
  <input value="Abschicken" name="B1" type="submit" /><br />
</form>
<a target="_blank" href="http://der-formular-service.com"><img src="http://der-formular-service.com/wccheckbutton.php?formid=125782" border="0" /></a>
&nbsp; &nbsp;&nbsp;<br />
<p align="center"><a href="../index.html" title="Home" target="_blank">[Home]</a></p>
<table border="0" cellpadding="3" cellspacing="0" width="133">
</table>

</body>
</html>
-----
-----
:HTML

Vielen Dank im voraus, MFG Fabian.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Formular Elemente dis-/enablen

    dspb
    – Informationen zu den Bewertungsregeln

    Hallo,

    nutz das onChange Event der select box:

    <select name="Font" onChange="show_altfont(this.value);">
            <option value="1">TrebuchtMS</option>
            <option value="2">Rounded</option>
            <option value="0">Andere</option>
     </select>

    Jetzt funktioniert es im IE(7)

    Überarbeite auch nochmal die Referenzierung auf das input Element:

    document.getElementById('AltFont').removeAttribute("disabled");

    und es geht auch im FF

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Formular Elemente dis-/enablen

      Fabian
      – Informationen zu den Bewertungsregeln

      Danke für den Tipp mit dem >onChange< Event. Hab aber auch einen anderen Fehler gefunden, das: >>document.logoform.show.options[0].selected = true;<<
      war überflüssig und hat dem FF Probleme bereitet (Super Hilfe diese Fehlerkonsole vom Opera...)
      Und habe das >document.all< jezt auch ausgetauscht. Falls es irgendeinen interressiert hier der jeztige Code:

      HTML:
      ----
      ----
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>FabSoft Development</title>
        <link rel="stylesheet" href="../stylesheet.css" type="text/css" />

      <script language="JavaScript">
       <!--
       var var_show;
       function show_altfont(var_show)
       {
              if(var_show==0)
              {
        document.logoform.AltFont.removeAttribute("disabled","false");
              }
              else
              {
        document.logoform.AltFont.setAttribute("disabled","true","false");
              }
       }
       //-->
       </script>
      </head>

      <body>
      <table style="text-align: left; background-color: rgb(192, 192, 192); width: 100%;" id="header" border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td><span style="color: rgb(192, 192, 192);">&nbsp; &nbsp;</span></td>
          </tr>
          <tr>
            <td>
            <h1><img src="../images/logo.png" style="width: 800px; height: 100px;" alt="FabSoft Development" /></h1>
            <span style="color: rgb(192, 192, 192);"></span>
            </td>
          </tr>
          <tr>
            <td>
            <blockquote>
              <div id="tabs5"> <li><a href="main_home.html"><span>Home</span></a></li>
              <li id="current"><a href="main_form.html"><span>Design</span></a></li>
              <li><a href="main_projects.html"><span>Projekte</span></a></li>
              <li><a href="main_downloads.html"><span>Downloads</span></a></li>
              <li><a href="main_links.html"><span>Links</span></a></li>
              <a href="main_things.html"><span>Zeugs</span></a>
              </div>
            </blockquote>
            </td>
          </tr>
        </tbody>
      </table>
      <h1>&nbsp;</h1>
      <h2><em>Design</em></h2>
      <p>Wir k&ouml;nnen ihnen ein kostenloses Web2.0isches Logo
      designen. Daf&uuml;r m&uuml;ssen Sie uns nur folgendes
      Formularausf&uuml;llen:</p>
      <p>
      <script src="http://der-formular-service.com/wcformcheck.php" type="text/javascript"></script>Alle mit * gekenzeichniten Felder sind Pflichtfelder.</p>
      <form id="logoform" name="logoform" method="post" action="http://der-formular-service.com" onsubmit="return WCformcheck();"><input name="formid" value="125782" type="hidden" /> <input name="formpass" value="973e0ea7b001e987af13caf0cee4b45a" type="hidden" /><input name="pflichtfelder" value="Text/URL/Email" type="hidden" /><br />
        <table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
          <tbody>
            <tr>
              <td>Nachname:</td>
              <td><input name="Nachname" size="20" type="text" /></td>
            </tr>
            <tr>
              <td>* Logo Text:&nbsp;</td>
              <td><input name="Text" size="20" type="text" /></td>
            </tr>
            <tr>
              <td>* Ihre Website URL:</td>
              <td><input name="URL" size="20" type="text" /></td>
            </tr>
            <tr>
              <td>* Ihre Email Adresse:</td>
              <td><input name="Email" size="20" type="text" /></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="1"><span style="font-weight: bold;">Logo Design (optional)</span></td>
            </tr>
            <tr>
              <td>Schriftart</td>
              <td>
              <select name="Font" onChange="show_altfont(this.value);">
              <option value="1">TrebuchtMS</option>
              <option value="2">Rounded</option>
              <option value="0">Andere</option>
        {!options}
              </select>
        Name und Downloadlink der Schrift: <input disabled="disabled" name="AltFont" id="AltFont" /></td>
            </tr>
            <tr>
              <td>Mit Spiegelung: <img src="../images/form/mit-spiegelung.png" style="width: 165px; height: 80px;" alt="" align="middle" />&nbsp;<br />
      Ohne Spiegelung:<img src="../images/form/ohne-spiegelung.png" style="width: 165px; height: 80px;" alt="" align="middle" /></td>
              <td>
              <select name="Speigelung">
              <option>Ohne</option>
              <option>Mit</option>
              </select>
              </td>
            </tr>
            <tr>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      &nbsp;<br />
        <input value="Abschicken" name="B1" type="submit" /><br />
      </form>
      <a target="_blank" href="http://der-formular-service.com"><img src="http://der-formular-service.com/wccheckbutton.php?formid=125782" border="0" /></a>
      &nbsp; &nbsp;&nbsp;<br />
      <p align="center"><a href="../index.html" title="Home" target="_blank">[Home]</a></p>
      <table border="0" cellpadding="3" cellspacing="0" width="133">
      </table>

      </body>
      </html>
      ----
      ----
      :HTML

      THX & MFG Fabian.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Formular Elemente dis-/enablen

    plan_B
    – Informationen zu den Bewertungsregeln

    Hallo,
    ich sehe 2 Probleme, du benutzt:

    • das document.all-Objekt
    • onclick für option-Elemente

    besser wäre

      
var ele=document.forms.logoform.elements.AltFont;  
ele.disabled=false;  
  
// oder  
  
function show_altfont(var_show)  
{  
 document.forms.logoform.elements.AltFont.disabled = var_show!=0;  
}

    dann gib dem select element den onclick-Handler, oder besser noch einen onchange-Handler. Damit sind auch Tastatureingaben erfasst.

      
<select name="Font" onchange="mychange(this)">  
<option value="1" >TrebuchtMS</option>  
<option value="2" >Rounded</option>  
<option value="0" >Andere</option>  
</select>  


      
function mychange(sel)  
{  
 var i=sel.selectedIndex;  
  if (i > -1) {  
  if (sel.options[i].value == "0") show_altfont(sel.options[i].value);  
  }  
}

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln