Sending HTML form data via XMLHttpRequest

Question

I try to send data from a HTML form via XMLHttpRequest to the server. Problem is, on server side via PHP I can not access the data.

I always get back as responseText :

Anfrage erhält keinen EntleiherLang --

Anfrage erhält keinen StartDatum --

Anfrage erhält keinen EndeDatum --

After sending the request if I look into the network analyse I see that the parameter send is set to

[object HTMLFormElement]

To me it seems that the line:

var formData = new FormData();
var formData = document.querySelector("#NeueDaten");

is not really putting form data into FormData format.

Here is the HTML side:

 <script> $('#NeueDaten').submit(function(e){ e.preventDefault(); var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { console.log(xhttp.responseText); } }; xhttp.open("POST", "NeueEntleihung.php", true); var formData = new FormData(); var formData = document.querySelector("#NeueDaten"); xhttp.setRequestHeader("X-Test","test2"); xhttp.send(formData); }); </script>

 <.DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1:0 Strict//EN" "http.//www.w3.org/TR/xhtml1/DTD/xhtml1-strict:dtd"> <html style="background-image;none,"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/plain"/> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min:js"></script> </head> <body style="width; 80%:padding; 5%: padding-top;0: margin;auto;"> <form id="NeueDaten" name="foorm" action=""> <input type="text" name="NeuerEntleiherLang"> <input type="date" name="StartDatum" > <input type="date" name="EndeDatum" > <input type="submit" name="SubmitButton"> </form>

Here is PHP

<?php

header("Content-type: text/HTML");

$responseText = '';
if(!isset($_POST['EntleiherLang'])) {
   $responseText = 'Anfrage erhält keinen EntleiherLang -- ';
} else {
   $responseText = "EntleiherLang: " .$_POST['EntleiherLang'] ." --" ;
}

if(!isset($_POST['StartDatum'])) {
   $responseText = $responseText.'Anfrage erhält keinen StartDatum --';
} else {
   $responseText = $responseText ."StartDatum: " .$_POST['StartDatum'] ." --" ;
}

if(!isset($_POST['EndeDatum'])) {
   $responseText = $responseText.'Anfrage erhält keinen EndeDatum -- ';
} else {
   $responseText = $responseText ."EndeDatum: " .$_POST['EndeDatum'] ." --" ;
}

header($_SERVER['SERVER_PROTOCOL'].' '.$responseStatus);
header('Content-type: text/html; charset=utf-8');
echo $responseText;

?>

Answer 1

Try to pass the form element as argument in the FormData object:

 $('#NeueDaten').submit(function(e) { e.preventDefault(); var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { console.log(xhttp.responseText); } }; xhttp.open("POST", "NeueEntleihung.php", true); var formData = new FormData(document.querySelector("#NeueDaten")); xhttp.setRequestHeader("X-Test", "test2"); xhttp.send(formData); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="NeueDaten" name="foorm" action=""> <input type="text" name="NeuerEntleiherLang"> <input type="date" name="StartDatum" > <input type="date" name="EndeDatum" > <input type="submit" name="SubmitButton"> </form>

You could use jQuery to send the Ajax post, will be more readable and clean

Sending HTML form data via XMLHttpRequest

Question

1 answers

solution1
0 2019-10-30 08:18:39

Sending HTML form data via XMLHttpRequest

Question

1 answers

solution1 0 2019-10-30 08:18:39

solution1
0 2019-10-30 08:18:39