Formular wählbar

mac2ooo · 29. Januar 2007

Hallo,

Ich möchte für ein Projekt ein Log-in-Formular erstellen, welches per Radiobox gewählt werden kann. Der User soll eine Log-in Möglichkeit wählen können und dann die entsprächen felder ausfüllen. Sobald er sich für eine Möglichkeit entscheid, sollen die anderen Felder grau werden. Und eventuelle eingaben gelöscht werden. Nach Möglichkeit sollten die Felder beim laden der Seite schon grau und passiv sein erst wenn der User eine Ratio wählt. Kann er die nötigen felder ausfüllen. Kann ich so was mit Javascript machen, wenn ja wie?

Code:

<form name="myform" method="post" action=""> 
<p><span class="style1">Login<br />
<input name="logintyp" type="radio" value="a" style="width: 20px" /> Email / 
Passwort<br />
Email <input name="email" type="text" /><br />
<input name="logina" type="radio" value="pin" />PIN&nbsp;
<input name="typa1" type="text" /><br />
<input name="logina" type="radio" value="passwort" style="height: 20px" />Passwort
<input name="typa2" type="text" /><br />
<br />
</span></p>
<p><span class="style1"><input name="logintyp" type="radio" value="b" />Kundennummer 
/&nbsp; Passwort<br />
<br />
Kundennummer<input name="kunndenummer" type="text" /><br />
<input name="loginb" type="radio" value="pin" />PIN
<input name="pin2" type="text" /><br />
<input name="loginb" type="radio" value="passwort" />Passwort
<input name="passwort2" type="text" DISABLED /></span> <span class="style1">
<br />
<br />
<input name="Button1" type="submit" value="Login" /></span></p>

</form>

vielen Dank für euere Hilfe und Informationen.

Quaese · 30. Januar 2007

Hi,

versuchs mal hiermit:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>www.tutorials.de</title>
<script type="text/javascript">
  <!--
function toggleForm(objRadio){
	var strChk = (objRadio.value == "a")? "a_b" : "b_a";

	if(objRadio.checked){
  	for(var i=0; i<2; i++){
	    var arrInput = document.getElementById("toggle_"+strChk.split("_")[i]).getElementsByTagName("input");

	    for(var j=0; j<arrInput.length;j++){
	      arrInput[j].disabled = i;
	    }
    }
  }
}
 //-->
</script>
</head>
<body>

<form name="myform" method="post" action="">

<div><span class="style1">Login<br />
<input name="logintyp" type="radio" value="a" style="width: 20px" checked="checked" onclick="toggleForm(this)"; /> Email /
Passwort
<p id="toggle_a">
Email <input name="email" type="text" /><br />
<input name="logina" type="radio" value="pin" />PIN&nbsp;
<input name="typa1" type="text" /><br />
<input name="logina" type="radio" value="passwort" style="height: 20px" />Passwort
<input name="typa2" type="text" /><br />
<br />
</span></p></div>

<div style="margin: 42px 0 0 0;"><span class="style1"><input name="logintyp" type="radio" value="b" onclick="toggleForm(this)"; />Kundennummer
/&nbsp; Passwort
<p id="toggle_b">
Kundennummer<input name="kunndenummer" disabled="disabled" type="text" /><br />
<input name="loginb" type="radio" disabled="disabled" value="pin" />PIN
<input name="pin2" type="text" disabled="disabled" /><br />
<input name="loginb" type="radio" disabled="disabled" value="passwort" />Passwort
<input name="passwort2" type="text" disabled="disabled" /></span> <span class="style1">
<br />
<br /></p>
<input name="Button1" type="submit" value="Login" /></span></div>

</form>
</body>
</html>

Prinzip: Die verschiedenen Formularteile werden in Container mit IDs gepackt. Über diese Container werden die
enthaltenen INPUTS durchlaufen und entsprechend aktiviert bzw. deaktiviert.

Ciao
Quaese

mac2ooo · 30. Januar 2007

Hallo, danke!

ja so hatte ich das gemeint.

Jetzt habe ich aber noch die frage wie ich diese Funktion weiter auf die Radio Felder PIN/Passwort auslegen kann.

Ich habe gesehen das du über Gruppen arbeitest. A und B kann ich noch A1 und B2 dazufügen und dann entsprechend weiter gruppen einfügen? Oder bau ich das Script dadurch zu lang?

Code:

<script type="text/javascript">
  <!--
function toggleForm(objRadio){
	var strChk = (objRadio.value == "a")? "a_b" : "b_a";

	if(objRadio.checked){
  	for(var i=0; i<2; i++){
	    var arrInput = document.getElementById("toggle_"+strChk.split("_")[i]).getElementsByTagName("input");

	    for(var j=0; j<arrInput.length;j++){
	      arrInput[j].disabled = i;
	    }
    }
  }
}
 //-->
  <!--
function toggle1Form(objRadio){
	var strChk = (objRadio.value == "a")? "a1_b1" : "b1_a1";

	if(objRadio.checked){
  	for(var i=0; i<2; i++){
	    var arrInput = document.getElementById("toggle1_"+strChk.split("_")[i]).getElementsByTagName("input");

	    for(var j=0; j<arrInput.length;j++){
	      arrInput[j].disabled = i;
	    }
    }
  }
}
 //-->
</script>

Oder mach ich hier was falsch?

Quaese · 31. Januar 2007

Hi,

ein Gruppieren ist beim Aktivieren/Deaktivieren nicht notwendig. Vielmehr ist wichtig, die Gruppe zu kennen, in welcher
die Aktion stattfinden soll. Im Beispiel entspricht Email/Passwort der Gruppe 1, Kundennummer/Passwort der zweiten
Gruppe. In der Funktion wird geprüft, ob es sich um die PIN oder das Passwort handelt und die entsprechende Option
aktiviert bzw. deaktiviert.

Code:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>www.tutorials.de</title>
<script type="text/javascript">
  <!--
function toggleForm(objRadio){
  var strChk = (objRadio.value == "a")? "a_b" : "b_a";

  if(objRadio.checked){
    for(var i=0; i<2; i++){
      var arrInput = document.getElementById("toggle_"+strChk.split("_")[i]).getElementsByTagName("input");

      for(var j=0; j<arrInput.length;j++){
        arrInput[j].disabled = i;
        if(arrInput[j].checked) arrInput[j].checked = false;
      }
    }
  }
}

function togglePinPw(objRadio, intGroup){
  var strGroup = (objRadio.value.split("_")[1] == "a")? "1" : "2";

  if(objRadio.value=="pin"){
    objRadio.form.elements["pin"+intGroup].disabled = false;
    objRadio.form.elements["passwort"+intGroup].disabled = true;
  }else{
    objRadio.form.elements["pin"+intGroup].disabled = true;
    objRadio.form.elements["passwort"+intGroup].disabled = false;
  }
}
 //-->
</script>
</head>
<body>
<form name="myform" method="post" action="">
<div><span class="style1">Login<br />
<input name="logintyp" type="radio" value="a" style="width: 20px" checked="checked" onclick="toggleForm(this)"; /> Email /
Passwort
<p id="toggle_a">
Email <input name="email" type="text" /><br />
<input name="logina" type="radio" value="pin" onclick="togglePinPw(this, 1);" />PIN&nbsp;
<input name="pin1" type="text" /><br />
<input name="logina" type="radio" value="passwort" onclick="togglePinPw(this, 1);" style="height: 20px" />Passwort
<input name="passwort1" type="text" /><br />
<br />
</span></p></div>

<div style="margin: 42px 0 0 0;"><span class="style1"><input name="logintyp" type="radio" value="b" onclick="toggleForm(this)"; />Kundennummer
/&nbsp; Passwort
<p id="toggle_b">
Kundennummer<input name="kunndenummer" disabled="disabled" type="text" /><br />
<input name="loginb" type="radio" disabled="disabled" onclick="togglePinPw(this, 2);" value="pin" />PIN
<input name="pin2" type="text" disabled="disabled" /><br />
<input name="loginb" type="radio" disabled="disabled" onclick="togglePinPw(this, 2);" value="passwort" />Passwort
<input name="passwort2" type="text" disabled="disabled" /></span> <span class="style1">
<br />
<br /></p>
<input name="Button1" type="submit" value="Login" /></span></div>
</form>
</body>
</html>

Ebenfalls sollten in der Formularwechsel-Funktion berücksichtigt werden, dass beim Aktivieren bereits getätigte
Einstellungen zurückgesetzt werden.

Ciao
Quaese

Formular wählbar

mac2ooo

Mitglied

Quaese

Moderator

mac2ooo

Mitglied

Quaese

Moderator

Neue Beiträge