Auswerten von Formulardaten in JavaScript

onclick Button submit und GET-Methode Pseudo-POST-Methode Echtes Formular PHP-Script

Senden mit onclick Button

Eigentlich ist es hier kein echtes Formular





Ausgabe:
mit onclick
<form>
   <input type="text" id="inputID1" value="onclick" />
   <br><br>
   <input type="button" value="Absenden" onclick="ausDialog(document.getElementById('inputID1').value, 'Ausgabe1');" />
</form>
<br>
<p id="Ausgabe1">mit onclick</p> 

<script>
 function ausDialog(wert,wo) 
 {				
	document.getElementById(wo).innerText = `Wert ist: ${wert}`;      		
 }
</script>

Senden mit submit und GET-Methode

Die (eine) Seite wird neu geladen (zum in "action" angegebenem Ziel, darum werden Werte auf der Seite zurückgesetzt) und die URL, als "Übergabe", ausgewertet





Ausgabe:
mit onclick
	
   <form action="form.html#get" method="get">
     <input type="text" id="inputID2" name="Ausgabe2" value="Wert vom Textinput" />
     <input type="submit" value="Absenden"  />
   </form>


<script>
 // URL auswerten
 url= document.URL.replace("#get","").split("?");
 if(url[1] != null) 
 {   	// Im Beispiel gibt es bloss ein Fall... sonst müsste ein foreach verwendet werden
	u1 = url[1].split("=");
	ausDialog(u1[1],u1[0]) 
 }
	
 function ausDialog(wert,wo) 
 {				
	document.getElementById(wo).innerText = `Wert ist: ${wert}`;      		
 }
</script>

Senden mit submit und Pseudo-POST-Methode

Daten, die mit HTTPS übermittelt wurden, können nicht mit JS ausgewertet werden.
Hier wird ganz einfach die Formulardaten ausgelesen.






Ausgabe:
mit onclick
<form target="_blank" id="post" action="form.php?Ausgabe2=WertvomTextinput2&Mehrnoch=ZwiterEintrag" method="post" >
	<br>
   <input type="text" id="inputID3" name="Ausgabe3" value="Wert vom Textinput" />
   <br><br>
   <input type="submit" id="SubmitID3A" name="FormStarter" value="Absenden Intern"  /><br>
   <input type="submit" id="SubmitID3B" name="FormStarter" value="Absenden Extern"  />
	<br><br>
</form>

Ausgabe:
<div id="Ausgabe3">mit onclick</div>
	
<script>

    document.getElementById("post").addEventListener("submit", function(event) {
    event.preventDefault();
	const klick = event.submitter.value;
	console.log("Geklickt :", klick); 
		const formData = new FormData(this);	 
    	const postData = Object.fromEntries(formData.entries());
	if(klick == "Absenden Intern")
	{
		fd = Array.from(formData.entries());	
		ausDialog(fd[0][1],fd[0][0]);
	}
	else
	{
		console.log("Gehe extern");
		
    // 3. Daten per fetch absenden (ohne JSON-Header)
    fetch(this.action, {
        method: this.method,
        body: formData, // FormData wird automatisch als x-www-form-urlencoded gesendet
    })
    .then(response => response.text())
    .then(data => {
       // console.log("Erfolg:", data);
       // alert("Daten erfolgreich gesendet!");
		document.getElementById("Ausgabe3").innerHTML = data;
    })
    .catch(error => {
        console.error("Fehler:", error);
        alert("Fehler beim Senden der Daten!");
    });
	}
	 
	});

	
    function ausDialog(wert,wo) 
    {				
		document.getElementById(wo).innerText = `Wert ist: ${wert}`;      		
    }
</script>

Senden mit submit POST-Methode

Das Formular sieht wie das vorhergehende aus, bloss, dass das 'submit' nicht vom EventListener abgefangen wird.
Damit auch die Methode GET simuliert werden kann wurde, wie oben, die URL mit Get-Informationen angereichert.
Die Aufgerufene Seite 'form.php' wird dank der Ergänzung 'target="_blank"' in <FORM> auf einem eigenen Tab angezeigt.
Das Ausgabefeldchen ist hier obsolet. 





<form target="_blank" id="truePost" action="form.php?Ausgabe4=WertvomTextinput4&Mehrnoch=ZwiterEintrag" method="post" >
   
   <input type="text" id="inputID4" name="Ausgabe4" value="Wert vom Textinput" />

   <input type="submit" id="SubmitID4A" name="FormStarter" value="Senden"  />
	
</form>

Script der aufgerufenen Form.php Seite

In den zwei letzten Beispiele wurde immer die Selbe Seite aufgreufen.
Im ersten Fall wurde lediglich den Inhalt (HTTP) zurückgegeben und um Ausgabefeldchen angezeigt.
Im zweiten Fall wurde die Seite selbst aufgerufen.
Der PHP-Script erkennt es daran, dass die Bezeichnung der Taste anders lautet. 
<br>

<?php
if($_POST['FormStarter'] == 'Senden')
{
    echo "<title>FORM Beispiel PHP</title>";
    echo "<h1>Seite 'form.php'</h1>";
}
else
{
   echo '<p style="background-color:red ;" >';
}

echo 'POST-Daten<br>';
var_dump($_POST);

echo '<br>GET-Daten<br>':
var_dump($_GET);
echo '</p>';
?>

<br>