Platzhalter bei dem Input Value eintragen

[overHead]

Hallo Leute,

ich habe mal ne Frage.
Ich habe eine Formular mit 8 Inputfeldern und ich möchte hinter jedem Input Feld ein Copy Icon und ein Löschen Icons setzen. (das habe ich schon)
Damit ich bei jedem Feld per onclick Event den Platzhalter (Auszugs aus der Datenbank) direkt als Value eintragen lassen kann und ggfs. auch wieder löschen kann.

Leider funktioniert das nicht richtig.
Anbei mal mein JS Code, weild er ab dem zweiten Feld gar nichts mehr macht.
Vielleicht habt ihr ja eine Idee, was falsch ist und ob man eventuell den Code komprimieren kann.

<script>
function myFunction_1() {
  document.getElementById("ctrl_1305").value = "{{file::get-lfz_query_rtschein.html5?field=bauteil1_def}}";
}
function myFunction_2() {
  document.getElementById("ctrl_1677").value = "{{file::get-lfz_query_rtschein.html5?field=bauteil2_def}}";
}
function myFunction_3() {
  document.getElementById("ctrl_1681").value = "{{file::get-lfz_query_rtschein.html5?field=bauteil3_def}}";
}
function myFunction_4() {
  document.getElementById("ctrl_1685").value = "{{file::get-lfz_query_rtschein.html5?field=bauteil4_def}}";
}
function myFunction_5() {
  document.getElementById("ctrl_1689").value = "{{file::get-lfz_query_rtschein.html5?field=bauteil5_def}}";
}
function myFunction_6() {
  document.getElementById("ctrl_1693").value = "{{file::get-lfz_query_rtschein.html5?field=bauteil6_def}}";
}
function myFunction_7() {
  document.getElementById("ctrl_1697").value = "{{file::get-lfz_query_rtschein.html5?field=bauteil7_def}}";
}
function myFunction_8() {
  document.getElementById("ctrl_1701").value = "{{file::get-lfz_query_rtschein.html5?field=bauteil8_def}}";
}
function myFunction_1_clear() {
  document.getElementById("ctrl_1305").value = "";
}
function myFunction_2_clear() {
  document.getElementById("ctrl_1677").value = "";
}
function myFunction_3_clear() {
  document.getElementById("ctrl_1681").value = "";
}
function myFunction_4_clear() {
  document.getElementById("ctrl_1685").value = "";
}
function myFunction_5_clear() {
  document.getElementById("ctrl_1689").value = "";
}
function myFunction_6_clear() {
  document.getElementById("ctrl_1693").value = "";
}
function myFunction_7_clear() {
  document.getElementById("ctrl_1697").value = "";
}
function myFunction_8_clear() {
  document.getElementById("ctrl_1701").value = "";
}
</script>

Hinter jeden Input Feld habe ich den Code stehen.

<span onclick="myFunction_[nummer der funktion]()" style="cursor: pointer;"><i class="material-icons" style="font-size: 20px; line-height: 0;" title="Platzhalter übernehmen">content_copy</i></span>
  <span onclick="myFunction_[nummer der funktion]_clear()" style="cursor: pointer;"><i class="material-icons" style="font-size: 20px; line-height: 0;" title="Wert löschen">clear</i></span>

Ich hoffe ihr könnt mir irgendwie helfen.

[Doi]

Hallo overHead,

also mit diesem Weg machst Du Deinem Namen zumindest alle Ehre
Spaß bei Seite, besser Du durchläufst Deine Input-Felder und bindest dann die entsprechenden Funktionen.

Schau mal, vielleicht bringt Dich das weiter:

var inputs = document.querySelectorAll('form input');

inputs.forEach(function(input, index){
  input.parentNode.querySelector('.add').addEventListener('click', function(){
    input.value = "{{file::get-lfz_query_rtschein.html5?field=bautei" + index + "_def}}";
  }, false);
  
  input.parentNode.querySelector('.clear').addEventListener('click', function(){
    input.value = "";
  }, false);
});

Ich habe den span's zusätzlich noch die Klasse add oder clear gegeben, worüber ich später einfach die entsprechenden Events binden kann.

[overHead]

Hallo Doi,

danke für deine Hilfe.
Leider keine Benachrichtigung an gehabt.

Ich habe jetzt deinen Code in den normalen script tag eingefügt und den Span's die class add und clear verpasst, aber irgendwie funktioniert das nicht. Nach Klick auf die Icons setzt er mir keinen Value wert.
Habe ich noch was vergessen?

Und warum funktioniert eigentlich meine Variante nicht?
Auch wenn Sie extrem groß ist.

[Doi]

Hallo Doi,

danke für deine Hilfe.
Leider keine Benachrichtigung an gehabt.

Ich habe jetzt deinen Code in den normalen script tag eingefügt und den Span's die class add und clear verpasst, aber irgendwie funktioniert das nicht. Nach Klick auf die Icons setzt er mir keinen Value wert.
Habe ich noch was vergessen?

Und warum funktioniert eigentlich meine Variante nicht?
Auch wenn Sie extrem groß ist.

Hallo overHead,

das kann jetzt mehrere Gründe haben, dafür müsstest Du mir bitte nochmal etwas mehr Code zur Verfügung stellen. Am besten das gesamte Formular sowie die Initialisierung des Skripts.

Versucht du das eigentlich im Backend oder im Frontend?

[overHead]

Hallo Doi,

mehr code kann ich dir nicht schicken.
Also doch, aber ich habe das ganze mit dem Formulargenerator angelegt und habe dann in dem Formular einen HTML Code reingesetzt mit dem script Tag und dann habe ich deinen Code reingesetzt.

Ich habe mal mir den Fehler ausgeben lassen.

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at eingabemaske-warenbegleitschein1.html?pid=35470:345
    at NodeList.forEach (<anonymous>)
    at eingabemaske-warenbegleitschein1.html?pid=35470:344

Hier der Code vom Formular:

<form action="eingabemaske-warenbegleitschein1.html?pid=34470" id="redirect" method="post" enctype="application/x-www-form-urlencoded">
    <div class="formbody">
              <input type="hidden" name="FORM_SUBMIT" value="auto_form_36">
        <input type="hidden" name="REQUEST_TOKEN" value="[...]">
                                  <table>
          
<script>
var inputs = document.querySelectorAll('form input');

inputs.forEach(function(input, index){
  input.parentNode.querySelector('.add').addEventListener('click', function(){
    input.value = "";
  }, false);
  
  input.parentNode.querySelector('.clear').addEventListener('click', function(){
    input.value = "";
  }, false);
});
</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

  <tr class="row_1 odd">
    <td class="col_0 col_first">
            <label for="ctrl_1302" class="lfd invisible">
              LFD-Nr.          </label>
      </td>
    <td class="col_1 col_last">
        
  <input type="text" name="lfd" id="ctrl_1302" class="text lfd invisible" value="14510" maxlength="5">

      </td>
  </tr>



  <tr class="row_2 even">
    <td class="col_0 col_first">
            <label for="ctrl_1303" class="gnummer invisible">
              Gerätenummer          </label>
      </td>
    <td class="col_1 col_last">
        
  <input type="text" name="gnummer" id="ctrl_1303" class="text gnummer invisible" value="[Gerätenummer]">

      </td>
  </tr>



  <tr class="row_3 odd">
    <td class="col_0 col_first">
            <label for="ctrl_1304" class="customlabel ticket invisible">
              Ticketnummer          </label>
      </td>
    <td class="col_1 col_last">
        
  <input type="text" name="ticket" id="ctrl_1304" class="text customlabel ticket invisible" value="[Ticket]">

      </td>
  </tr>



  <tr class="row_4 even">
    <td class="col_0 col_first">
            <label for="ctrl_1305" class="component">
              Bauteil 1          </label>
      </td>
    <td class="col_1 col_last">
        
  <input type="text" name="bauteil1" id="ctrl_1305" class="text component" value="" placeholder="Schlüssel">
  <span class="add" style="cursor: pointer;"><i class="material-icons add" style="font-size: 20px; line-height: 0;" title="Platzhalter übernehmen">content_copy</i></span>
  <span class="clear" style="cursor: pointer;"><i class="material-icons clear" style="font-size: 20px; line-height: 0;" title="Wert löschen">clear</i></span>

      </td>
  </tr>


  <tr class="row_5 row_last odd">
    <td class="col_0 col_first">&nbsp;</td>
    <td class="col_1 col_last">
      <div class="submit_container">
                              <input type="submit" id="ctrl_1343" class="submit" value="Erstellen / Speichern">
                        </div>
    </td>
  </tr>

        </table>
          </div>
  </form>

Gerätenummer und Ticketnummer muss ich leider ausblenden.

[Doi]

Hallo Doi,

mehr code kann ich dir nicht schicken.
Also doch, aber ich habe das ganze mit dem Formulargenerator angelegt und habe dann in dem Formular einen HTML Code reingesetzt mit dem script Tag und dann habe ich deinen Code reingesetzt.
. . .
Gerätenummer und Ticketnummer muss ich leider ausblenden.

Hallo overHead,

das reicht um es zu reproduzieren, danke.

Irgendwie scheint aus der "add"-Methode der Inhalt entfernt worden zu sein.
Des Weiteren tritt der Fehler auf, da im Code-Beispiel immer davon ausgegangen wird, dass hinter jedem Input-Feld ein span mit add oder clear vorhanden ist.
Am besten versuchst du das Script nach Deinem Formular zu laden, oder zumindest unterhalb Deiner Felder.

Ich habe den Code nochmal für Deine Zwecke angepasst, hier der Code mit Erläuterung:

<script>
var inputs = document.querySelectorAll('form#redirect input'); // Beschränken auf das Formular mit der ID "redirect"

inputs.forEach(function(input, index){ // Durchlaufen der gefundenen Input-Felder
  
  var _add = input.parentNode.querySelector('.add'); // Zwischenspeichern des SPANs mit der Klasse ".add" um abzufragen ob diese überhaupt existiert
  if(_add){  
    _add.addEventListener('click', function(){  // Event binden
      input.value = "{{file::get-lfz_query_rtschein.html5?field=bautei" + index + "_def}}"; // Inhalt in das Input-Feld schreiben
    }, false);
  }
  
  var _clear = input.parentNode.querySelector('.clear');
  if(_clear){ 
    _clear.addEventListener('click', function(){
      input.value = ""; // Input-Feld leeren
    }, false);
  }
});
</script>

EDIT: Solltest du das Skript nicht nach deinem Formular einbinden können, müsstest du den Code wie folgt umschließen:

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    // Code hier
  });
</script>