Verstecktes Input-Feld anzeigen

bhalili

Mitglied
Hallo Freunde, ich möchte wenn ein Input-Feld gefüllt ist ein anderes Input-Feld angezeigt wird. Dazu habe ich ein Script gefunden das wenn eine Select-Box gewählt wird in diesem Fall bei value=1 nichts anzeigt und bei value=2 das versteckte Input-Feld angezeigt wird. Habe jetzt das ganze mit einem Input-Feld anstatt einer Select-Box versucht, nur funktioniert das nicht. Anbei das Script

HTML:
<!DOCTYPE html>

<html lang="de">

 <head>

 

<style>

.hide {

  display: none;

}

</style>



<script>

window.addEventListener("load", () => { // when the page loads

  document.getElementById("foo").addEventListener("change", function() {

    document.getElementById("nameFoo").classList.toggle("hide", this.value === "1")

  })

})

</script>



</head>



<body>



<select name="foo" id="foo" >

  <option value="1" selected>1</option>

  <option value="2">2</option>

</select>



<!-- <input type="text" id="foo" name="foo" value="2"> -->



<div id="nameFoo" class="hide">

  <input id="name" required />

</div>

  

  

</body>

</html>
 
Zuletzt bearbeitet:

bhalili

Mitglied
Hi, habe die Lösung gefunden. Anbei der Code:
HTML:
<html>
<?PHP  $alter = "0";   ?>
    <head>
        <title>Untitled Document</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            $(function() {
                $('[name="field1"]').on('input', function() {
                    $('[name="field2"]').toggle(this.value !== "");
                    $('[name="field3"]').toggle(this.value !== "");
                    $('[name="field4"]').toggle(this.value !== "");
                    
                    
                });
            });
        </script>
    </head>

    <body>
        <form>
            <input type="text" name="field1" value="<?PHP echo $alter; ?>" >
            <br><br>
            <input type="text" name="field2" value="" style="display:none"> <br>
            <input type="text" name="field3" value="" style="display:none"> <br>
            <select name="field4" style="display:none" >
              <option value="1" selected>1</option>
              <option value="2">2</option>
            </select>
            
            
            
            </form>
    </body>

</html>
 

basti1012

Erfahrenes Mitglied
2 Fragen dazu.
Hast du im Code noch mehr PHP?
Falls nein hat, de PHP Code ja so kaum Sinn, die 0 kann man da auch direkt ins Value-Feld schreiben.

Ich persönlich würde auf jQuery verzichten .
Du hast da nur paar Zeilen Code, wofür du ein großes jQuery Script für einbinden musst .
Eigentlicher unnötiger Datentransfer den man nicht braucht.
Ohne JQuery gibt es natürlich auch mehrere Wege , z. B. so ungefähr
HTML:
<!doctype html>
<html lang="de">
<head>
  <title>Untitled Document</title>
  <style>
    #weg {
      display: none
    }
  </style>
</head>
<body>
  <form>
    <input type="text" id="field1" value="">
    <div id="weg">
      <input type="text" value="">
      <input type="text" value="">
      <select>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </div>
  </form>
  <script>
      var ele = document.getElementById("field1");
      ele.addEventListener('keyup', function() {
        if (ele.value.length >= 1) {
          document.getElementById("weg").style.display = 'block';
        } else {
          document.getElementById("weg").style.display = 'none';
        }
      });
  </script>
</body>
</html>
bzw so sollte es auch klappen
HTML:
  <script>
      var ele = document.getElementById("field1");
      ele.addEventListener('keyup', function() {
           document.getElementById("weg").classList.toggle("hide", ele.value=='')
      });
  </script>
 
Zuletzt bearbeitet:

bhalili

Mitglied
2 Fragen dazu.
Hast du im Code noch mehr PHP?
Falls nein hat, de PHP Code ja so kaum Sinn, die 0 kann man da auch direkt ins Value-Feld schreiben.

Ich persönlich würde auf jQuery verzichten .
Du hast da nur paar Zeilen Code, wofür du ein großes jQuery Script für einbinden musst .
Eigentlicher unnötiger Datentransfer den man nicht braucht.
Ohne JQuery gibt es natürlich auch mehrere Wege , z. B. so ungefähr
HTML:
<!doctype html>
<html lang="de">
<head>
  <title>Untitled Document</title>
  <style>
    #weg {
      display: none
    }
  </style>
</head>
<body>
  <form>
    <input type="text" id="field1" value="">
    <div id="weg">
      <input type="text" value="">
      <input type="text" value="">
      <select>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </div>
  </form>
  <script>
      var ele = document.getElementById("field1");
      ele.addEventListener('keyup', function() {
        if (ele.value.length >= 1) {
          document.getElementById("weg").style.display = 'block';
        } else {
          document.getElementById("weg").style.display = 'none';
        }
      });
  </script>
</body>
</html>
bzw so sollte es auch klappen
HTML:
  <script>
      var ele = document.getElementById("field1");
      ele.addEventListener('keyup', function() {
           document.getElementById("weg").classList.toggle("hide", ele.value=='')
      });
  </script>
Hi basti1012, dein Script gefällt mir. Das Script funktioniert indem ich in Input-field1 etwas eingebe. Wie sieht es aus, wenn das value von Input-field1 mit php befüllt wird und das Script dann die anderen Inputfelder anzeigt.

HTML:
<input type="text" name="field1" value="<?PHP echo $alter; ?>" >
 

bhalili

Mitglied
Hi, anbei meine Lösung zum füllen des values mit PHP. Es werden die Felder erst angezeigt wenn der Wert größer 0 ist. Bin kein Javascript Programmierer aber durch ausprobieren hat es geklappt.

HTML:
<!DOCTYPE html>
<html lang="de">
<head>
    
<?PHP  $alter = "0"; ?>
    
  <title>Untitled Document</title>
    
  <style>
    #weg {
      display: none
    }
  </style>

</head>
<body>
    
  <form>
      
    <div id="weg">
        
      <input type="text" id="field1" value="<?PHP echo $alter; ?>">
      <input type="text" value="">
      <input type="text" value="">
      <select>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    
     </div>
    
  </form>
 
 <script>
var input = document.getElementById("field1");

if (input && input.value > 0) {
    
    document.getElementById("weg").style.display = 'block';
    
}
else {
    
    document.getElementById("weg").style.display = 'none';
}
 
 </script>
    
</body>
</html>
 

basti1012

Erfahrenes Mitglied
Ich verstehe dein Vorhaben nicht ganz. Du möchtest ja, wenn man in feld1 was reinschreibt, dass die anderen Felder angezeigt werden. Wenn PHP da was reinschreibt, sollen die Felder nicht erscheinen?

Wenn der User den Text ändern will, der von PHP reingesetzt wurde, sollen die Felder wieder kommen?
Was für Texte oder Zahlen werden von PHP da den reingesetzt?
Ist das ein Affenformular?

Wenn man wüsste, was du da genau vorhast, könnte man z. B. bei einen Affenformular bei einem gefüllten Input ( feld1 ) die ausgeblendeten Felder auch gar nicht erst ins HTML schreiben.

Aber wie gesagt ,man muss erst wissen, was du genau vorhast, dann könnte, man auch andere Lösungen suchen
 

basti1012

Erfahrenes Mitglied
Hi, anbei meine Lösung zum füllen des values mit PHP. Es werden die Felder erst angezeigt wenn der Wert größer 0 ist. Bin kein Javascript Programmierer aber durch ausprobieren hat es geklappt.

HTML:
<!DOCTYPE html>
<html lang="de">
<head>
 
<?PHP  $alter = "0"; ?>
 
  <title>Untitled Document</title>
 
  <style>
    #weg {
      display: none
    }
  </style>

</head>
<body>
 
  <form>
 
    <div id="weg">
   
      <input type="text" id="field1" value="<?PHP echo $alter; ?>">
      <input type="text" value="">
      <input type="text" value="">
      <select>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
 
     </div>
 
  </form>
 
 <script>
var input = document.getElementById("field1");

if (input && input.value > 0) {
 
    document.getElementById("weg").style.display = 'block';
 
}
else {
 
    document.getElementById("weg").style.display = 'none';
}
 
 </script>
 
</body>
</html>

Also , wenn du den Code so wie er jetzt ist testet , sollte gar nichts angezeigt werden .
Code:
if (input && input.value > 0) {
Das erste input in dieser if Abfrage ist meiner Meinung nach nicht relevant.
Abfragen, ob größer 0 ist, hat nur ein Sinn, wenn du immer Zahlen in dem Feld stehen hast.

Bedenke auch, dass dein jetziger Code ein Ändern der Sichtbarkeit der Felder nicht macht. Du hast jetzt kein Event, was beim Ändern von Feld1 feuert. Nur beim Start der Seite wird einmal abgefragt, was in feld1 steht. Soll es so sein, könnte der else Zweig auch weg.

Man müsste schon genauer wissen, was du vorhast, weil dein Code eröffnet mir irgendwie immer mehr Fragen von dein Vorhaben.

Edit: Um dich etwas zu verwirren , sage ich mal das dein Code auch mit CSS lösbar wäre, wenn du es ohne EVENT machst wie in post #5
 
Zuletzt bearbeitet:

bhalili

Mitglied
Hi, es wird nichts angezeigt weil für field1 value=0 ist, wenn ich oben in PHP für $alter = "1" angebe wird alles angezeigt.
Zu der Frage was ich vorhabe, ich baue einen Tarifrechner wo ich als erstes das Eintrittsalter berechne, denn es handelt sich dabei nicht immer um das tatsächliche Alter des Versicherungsnehmers. Das errechnete Alter (+(+/- Faktor) oder 0) wird in ein Input-Feld (Alter) angezeigt (nur lesbar) und man kann jetzt die Auswahl machen zu den weiteren Angaben wie Raucher (Ja/Nein), Versicherungsjahre und Leistung. Die Daten werden aus einer Mysql-Datenbank geholt bzw. angezeigt. Das ganze funktioniert hervorragend, nur wollte ich das die Felder ( Raucher, Versicherungsjahre und Leistung) am Anfang nicht gezeigt werden sondern nur die Eingaben für die Berechnung Eintrittsalter ( Geburtsdatum u. Eintrittsdatum). Erst wenn das Input-Feld Alter gefüllt ist, sollen die anderen Felder angezeigt werden.
 
Zuletzt bearbeitet: