✔ Ansprache von Formularfeldern

T

Tarta

Grünschnabel
Hallo zusammen,

habe zu so später Stunde mal eine Frage, da ich einfach nicht weiterkomme.
Ich habe folgende Funktion geschrieben:

function changeAbility(Spalte) {
if (document.form1.rad_1.checked == true) {
Check = confirm("Alle Daten in Spalte "+Spalte+" werden gelöscht! Sind Sie sicher?");
if (Check == true) {
document.form1.inp_8_1.disabled = true;
document.form1.inp_8_1.value = '';
} else {
document.form1.rad_1.checked = false;
}
} else {
document.form1.inp_8_1.disabled = false;
}
}

Diese Funktion deaktiviert das Textfeld, wenn man eine Checkbox aktiviert und umgekehrt. Dazu kommt noch eine kleine Warnmeldung ob der Inhalt wirklich gelöscht werden soll.

So weit so gut... Nun brauche ich aber eine gewisse dynamik -> Soll heissen, dass es nicht nur das eine Formularfeld gibt, sondern ganz viele. Ich möchte gerne eine ganze Spalte mit einer Checkbox aktivieren/deaktivieren können. Die Formularfelder sind nach folgendem System benannt "inp_8_1": wobei die Stelle mit der "1" die Spalte angibt. Meine Frage ist, ob es möglich ist mit Hilfe von z.B.: regulären Ausdrücken die "8" variabel zu machen. Ich hoffe, dass mein Problem damit verständlich genug wird.

Vielen Dank schonmal für jegliche Hilfe!

Stefan
 
Hi,

wenn die erste Zahl in inp_0_1 die Nummer der Textbox angibt, die zweite die Spaltennummer, kannst Du
die Felder in einer while-Schleife durchlaufen. Als Abbruchbedingung wird die Existenz eines weiteren
Textfeldes verwendet. Zum dynamischen Ermitteln des Feldelementes wird das Objekt elements verwendet.

Beispiel:
Code: 
<!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>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
  <!--
function changeAbility(objCheck, intSpalte) {
  var objForm = objCheck.form;
  var intChecks = 0;

  if (objCheck.checked == true) {
    Check = confirm("Alle Daten in Spalte "+intSpalte+" werden gelöscht! Sind Sie sicher?");
    if (Check == true) {
      // Erstes Textfeld aus Spalte (= Index 0)
      var objText = objForm.elements["inp_"+intChecks+"_"+intSpalte];

      // Alle Textfelder durchlaufen
      while(objText){
      	objText.disabled = true;
        objText.value    = "";
        intChecks++;
        objText = objForm.elements["inp_"+intChecks+"_"+intSpalte];  // Nächstes Textfeld ermitteln
      }
    }else{
    	objCheck.checked = false;
    }
  }else{
    var objText = objForm.elements["inp_"+intChecks+"_"+intSpalte];
    while(objText){
      objText.disabled = false;
      intChecks++;
      objText = objForm.elements["inp_"+intChecks+"_"+intSpalte];
    }
  }
}
  -->
</script>
</head>
<body>
<h1>Voraussetzung</h1>
<p>Der erste Index im Textfeldname entspricht der Textfeldnummer (beginnend bei 0),<br />
der zweite der Spaltennummer.</p>
<h2>Beispiel: <b>inp_2_1</b></h2>
<p>2 - drittes Textfeld in der Spalte<br />1 - 1-te Spalte</p>
<form name="form1" id="form1" method="" action="#">
  <table>
    <tr>
      <td><input type="checkbox" name="rad_1" id="rad_1" onclick="changeAbility(this, 1);" />Spalte 1</td>
      <td><input type="checkbox" name="rad_2" id="rad_2" onclick="changeAbility(this, 2);" />Spalte 2</td>
    </tr>
    <tr>
      <td>
        <input type="text" name="inp_0_1" id="inp_0_1" value="0_1" /><br />
        <input type="text" name="inp_1_1" id="inp_1_1" value="1_1" /><br />
        <input type="text" name="inp_2_1" id="inp_2_1" value="2_1" /><br />
      </td>
      <td>
      	<input type="text" name="inp_0_2" id="inp_0_2" value="0_2" /><br />
      	<input type="text" name="inp_1_2" id="inp_1_2" value="1_2" /><br />
      	<input type="text" name="inp_2_2" id="inp_2_2" value="2_2" /><br />
      </td>
    </tr>
  </table>
</form>
</body>
</html>
Ciao
Quaese
 
Hi Quaese,

vielen Dank schonmal für Deine sehr ausführliche Antwort. Funktioniert ja so einwandfrei, ich bin jedoch abhängig von der ID im Namen des Textfeldes, da diese die Zugehörigkeit in der Datenbank angibt. Ich habe überlegt nun einfach noch einen Laufindex mit einzubauen:
=> inp_1_2_3 (Laufindex_ID_Spalte)

Das Problem ist jetzt natürlich, dass Deine Funktion eindeutige Namen für das Formularelement erfordert. Gibt es da eine Möglichkeit so eine Art "*" einzubauen, die eine Position variabel hält?
=> inp_1_*_3

Kenne mich leider nicht wirklich gut mit JavaScript aus, brauche das aber dringend für meine PHP-Anwendung.

Vielen Dank nochmal für die Hilfe!

Stefan
 
Hi,

völlig andere Vorgehensweise.

Du gruppierst die Textfelder jeder Spalte in einem umschliessenden Element (hier: DIV). Diese Element erhalten
eine eindeutige IDs der Form spalte_1, spalte_2 usw.

Mit Hilfe der Methode getElementsByTagName können nun gezielt alle INPUTs innerhalb eines Containers
angesprochen und bearbeitet werden. Die Routine wird somit unabhängig von Name oder IDs.

Beispiel:
Code: 
<!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>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript">
  <!--
function changeCol(objCheck, intSpalte){
  var objForm = objCheck.form;
  // Alle Inputs innerhalb der Spalte in Array schreiben
  var arrInputs = document.getElementById("spalte_"+intSpalte).getElementsByTagName("input");

  if (objCheck.checked == true) {
    Check = confirm("Alle Daten in Spalte "+intSpalte+" werden gelöscht! Sind Sie sicher?");
    if (Check == true) {
    // Alle Textfelder durchlaufen
      for(var i=0; i<arrInputs.length; i++){
        // Falls es sich um ein Textfeld handelt
      	if(arrInputs[i].type == "text"){
          arrInputs[i].disabled = true;
          arrInputs[i].value    = "";
        }
      }
    }else{
      objCheck.checked = false;
    }
  }else{
    // Alle Textfelder durchlaufen
    for(var i=0; i<arrInputs.length; i++){
    	// Falls es sich um ein Textfeld handelt
    	if(arrInputs[i].type == "text")
      	arrInputs[i].disabled = false;
    }
  }
}
  -->
</script>
</head>
<body>
<h1 id="opac_id">Voraussetzung</h1>
<p>Die Textfelder einer Spalte sind in Container mit ID der Form <b>spalte_1</b>, <b>spalte_2</b> usw.
enthalten.</p>
<form name="form1" id="form1" method="" action="#">
  <table>
    <tr>
      <td><input type="checkbox" name="rad_1" id="rad_1" onclick="changeCol(this, 1);" />Spalte 1</td>
      <td><input type="checkbox" name="rad_2" id="rad_2" onclick="changeCol(this, 2);" />Spalte 2</td>
    </tr>
    <tr>
      <td>
        <div id="spalte_1">
          <input type="text" name="inp_0_1" id="inp_0_1" value="0_1" /><br />
          <input type="text" name="inp_1_1" id="inp_1_1" value="1_1" /><br />
          <input type="text" name="inp_2_1" id="inp_2_1" value="2_1" /><br />
        </div>
      </td>
      <td>
        <div id="spalte_2">
          <input type="text" name="inp_0_2" id="inp_0_2" value="0_2" /><br />
          <input type="text" name="inp_1_2" id="inp_1_2" value="1_2" /><br />
          <input type="text" name="inp_2_2" id="inp_2_2" value="2_2" /><br />
        </div>
      </td>
    </tr>
  </table>
</form>
</body>
</html>
Ciao
Quaese
 
Hi Quaese,

ich habe das nun so gelöst, dass ich Dein erstes Beispiel verwende und die ID getrennt über die Session weitergebe und per Matrix-Position später wieder darauf verweise.

Beim zweiten Beispiel wäre das Problem, dass man mehrere Formularfelder in eine Tabellenzelle packen muss, was mir persönlich nicht so gut gepasst hätte!

Danke für die Hilfe.

Stefan
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück