PHP submit-Action und JS-Popup

[hannes111]

Bei Betätigung eines Eingabefeldes wird üblicherweise ein Auswerteprogramm gestartet. Der Wunsch ist, dass vorab ein Popup mit zusätzlichen Abfragen erscheint.
Die in <form id="myForm" action="mySubmit.php" method="POST" > angebene action ruft ein PHP-File oder eine JS-Funktion auf. Ich habe versucht zuerst eine JS-Hilfsfunkton aufzurufen, die das Popup öffnet, die Daten des Popup mittels ajax einsetzt, und dann erst das PHP-submit-File aufruft. Das Problem ist, in der JS-Hilfsfunktion ist $_POST leer (und damit auch im submit-File).
Im Prinzip hat PHP ja recht, der Server baut die Date erst mit Neuaufruf eines Scripts auf. Nur, was kann man tun?

Ich bin in JS neu. Danke für eure Tipps.

 <!----------------------------------- JS Functions ----------------------------------------------------- -->
  <script language=javascript>

   function multiFct()  
   {
     <?php  
        //var_dump($_POST);  //nur zum Test, $_POST ist leer
     ?>

     //some JS code ...............e.g. a PopUp prompt("lala..");
     var val = "xxx";

     //den Eingabewert des Popup einsetzen
     $.ajax({                //das funktionierte nicht
           type: "POST",
           url: "submitMy.php",  
           dataType:'text',
           data: {'key' : val},
           success: function(val)
           {
             console.log(val);
           }
         });

     window.location.href =   'submitMy.php';  //bei Aufruf ist $_POST leer
     //auch bei untenstehender Aufrufmethode ist $_POST leer
     //document.getElementById('ViewMyForm').action = "submitMy.php"
     //document.getElementById('ViewMyForm').target = "iframe2";    
     //document.getElementById('ViewMyForm').submit();             // Submit the page

    return true;
}
</script>

<?php       //------------- PHP --------------------
 //echo '<form id="ViewMyForm" action="submitMy.php"  method="POST" >'; //direkt, das funktioniert
  echo '<form id="ViewMyForm" action="javascript:multiFct();"  method="POST" >'; //indirekt über JS-Funktion

 echo '<input type = "submit" name="myName" value="13" id="myId" method="POST" >';
 echo '<input .....   //ganz viele Felder
 echo '</form>';
 ?>

[Arne Drews]

Lass doch das Formular zunächst mal ohne Ajax direkt an die submitMy.php senden und schaue, was dort in $_POST steht.
Wenn das dann auch leer ist, stimmt mit Deinem Formular, respektive der Übertragung etwas nicht.

Dann solltest Du das JavaScript nicht im action aufrufen, sondern am besten per EventListener auf dem Submit-Element.

Da Du einen Mix verwendest, muss ich fragen: Bindest Du jQuery ein oder hast Du den $.ajax-Request einfach nur im Netz gefunden?

[hannes111]

Danke für die schnelle Nachricht. Ohne die ganzen Ajax, JS Geschichten funktioniert das Formular einwandfrei.
Den $.ajax-Request habe ich, wie Du vermutet hast, im Netz gefunden und mit jQuery hatte ich mich bis jetzt nicht befasst.
Im Netz habe ich gerade gefunden https://www.html-seminar.de/jquery-tutorial.htm
Mit Eventlistener habe ich mich bisher nicht befasst, ich muss mich damit zuerst auseinandersetzen.

Es gäbe noch eine andere Möglichkeit, die Action statt über <form action=.. im <input onclick=javascript:fkt(key, val) aufzurufen. Dann könnte man die sonst per POST übertragenen Daten der JS-Funktion als Parameter mitgeben. Mir würde das nicht so sehr gefallen, weil der action Aufruf bei jedem der Tausend Felder definiert wird.

[tomBuilder]

Bei arbeiten mit js lohnt sich die entwicklerkonsole !!

Zudem glaube ich, du suchst solche eine einfache Möglichkeit:
https://wiki.selfhtml.org/wiki/JavaS...M/Event/submit

[hannes111]

Danke für das einfache Beispiel einen Eventlistener aufzusetzen.
Ich will noch präzisieren was ich machen will:
Bei Betätigen des <input Feldes, wird der eingeloggte User, für dieses Feld (eine Freiwilligentätigkeit) in eine DB eingetragen. Zusätzlich soll ein Popup mit 3 Radiobuttons ( 'sehr gern' 'gern' 'ok') erscheinen. Diese Werte werden ebenfalls in die DB abgelegt.
Ob der Popup erscheinen soll, ist abhängig vom value des Eingabefeldes.

[tomBuilder]

Bei Betätigen des <input Feldes, wird der eingeloggte
User, für dieses Feld (eine Freiwilligentätigkeit) in eine DB eingetragen. Zusätzlich soll ein Popup mit 3 Radiobuttons ( 'sehr gern' 'gern' 'ok') erscheinen.

Ich denke ja, Du willst

- erst das popup aufmachen
- dann alles verschicken

alles verschicken geht sagst Du, fehlt nur noch das

1.)
bei oder eher nach der eingabe eines inputfeldes
2
das popup (oder was auch immer) die radiobuttons anzeigt und
3.)
nach deren betätigen submittet wird.

du sucht andere evnetlistener.

https://developer.mozilla.org/en-US/...nt/input_event

links gibts ne grosse auswahl wie onchange, onclick, onblur, onfocus ....

findest schon was

[kaminbausatz]

zum Nachdenken:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
   <?php
      echo '<pre>';
        print_r($_GET);
      echo '</pre>';
   ?>
  <form  id=myForm onsubmit = "javascript:return formFunc()">
    <input name=fieldToDelete>
    <button name=action value=delete>Test</button>
    <dialog id=myDialog>
      <label for=myDialogField>Eingabe:</label>
      <input name=myDialogField id=myDialogField>
    </dialog>
  </form>
  <script>
    formFunc = () => {
      console.log ( 'Form ausgelöst') 
      myDialog.showModal()  
      return false
    }
  </script>
</body>
</html>

[hannes111]

Inzwischen habe ich eine Lösung, ganz ohne JS, ajax, iQuery, Eventlistener. Auch wenn sie vielleicht archaisch aussieht, sie ist sehr einfach.

Der <input.. des Formulars ruft das submitMy.php auf, wie gewohnt. Das submitMy.php entscheidet ob es ein Popup braucht und setzt gegebenfalls eine session-Variable mit dem empfangenen POST-key.

submitMy.php:

$_SESSION['KeyStr'] = $key;  //löst in ViewBewREB ein Popup zur Eingabe des Wunsches aus
//Zur Info, keyStr sieht so aus: '0000*01_07_2019*1*0*0*1*11*0*0*BUT' 

Im Formular ViewBewREB:

 //------- Popup für Wunsch Eingabe --------------
  if (isset($_SESSION['KeyStr']))  //Variable in submitMy gesetzt als Popup Aufforderung
  {
      $keyStr = $_SESSION['KeyStr'];
      unset($_SESSION['KeyStr']);
      $nam1 = setzeWunschInNameStr($keyStr, 1);
      $nam2 = setzeWunschInNameStr($keyStr, 2);
      $nam3 = setzeWunschInNameStr($keyStr, 3);
      echo '<div class="absolute">';
      echo '<form id="PopupForm" action="'.PREF_SUB.'submitMy.php"  method="POST" >';
      echo "<h2>Bitte ausw&auml;hlen:  </h2>";
      echo '<input type="submit" value="sehr gern" name="'.$nam1.'" style="heigt:20px; width:200px; font-size:x-large;" method="POST">';
      echo '</br></br>';
      echo '<input type="submit" value="gern" name="'.$nam2.'" style="heigt:20px; width:200px; font-size:x-large;" method="POST">';
      echo '</br></br>';
      echo '<input type="submit" value="ok" name="'.$nam3.'" style="heigt:20px; width:200px; font-size:x-large;" method="POST">';
      echo '</form>';
      echo '</div>';
  } 

Es wird zusätzlicher HTML Code eingeschleust, der einen Rahmen mit 3 <input.. überlagert.
Die <input schicken den keyStr erneut an submitMy.php, wo der Wunsch in die DB eingetragen wird.

Das zugehörige CSS:

<style>
    .absolute{
      position: absolute;
      top:  500px;
      right: 50%;
      width:  auto;
      border:  3px solid #73AD21;
      padding: 10px;
      background-color: antiquewhite;
    }
    </style>

Das Ergebnis sieht dann so aus wie im Anhang.

Für eure Tips bedanke ich mich, auch wenn ich es etwas anders gelöst habe.

[tomBuilder]

Es wird zusätzlicher HTML Code eingeschleust, der einen Rahmen mit 3 <input.. überlagert.

eingescheusst )))
genau so meinte ich das, kann man auch gut mir js machen - ein hidden wegschalten oder so -
ajax und query sind dafür eigentlich nicht nortwendig.