Я делаю небольшой сайт / сервер, где я могу отправить свое имя / фамилию / возраст и т. Д. В файл php.
моя проблема в том, что мой JS не будет получать мой ввод из HTML, а затем изменять PHP.
Точная ошибка: TypeError: firstName равно нулю в Firefox
Пробовал в другом браузере, но я получил тот же результат (как и ожидалось).
Также пытался переключить идентификаторы ввода на имена, но это не сработало.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Lucas" content="Nothing important">
<title>Ajax form_1</title>
</head>
<body>
<h2>Form_2</h2>
<form>
<input type = "text" name = "firstName" placeholder = "voornaam">
<input type = "text" name = "lastName" placeholder = "achternaam">
<input type = "text" name = "age" placeholder = "leeftijd">
<input type = "text" name = "email" placeholder = "email">
<input type = "button" id = "submitButton" value = "submit">
</form>
<div id = "responseHere">Response comes here</div>
<script src="script.js"></script>
</body>
</html>
let firstName = document.getElementById("firstName");
let lastName = document.getElementById("lastName");
let age = document.getElementById("age");
let email = document.getElementById("email");
let submitButton = document.getElementById("submitButton");
let responseHere = document.getElementById("responseHere");
submitButton.addEventListener('click', ajax);
function ajax(){
let xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
responseHere.innerHTML = this.responseText;
}
};
let httpString = "form_1.php?firstName=" + firstName.value + "&lastName=" + lastName.value + "&age=" + age.value + "&email=" + email.value;
console.log(httpString);
xmlhttp.open("GET", httpString, true);
xmlhttp.send();
}
<?php
$firstName = $_GET['firstName'];
$lastName = $_GET['lastName']
$age = $_GET['age'];
$email = $_GET['email']
echo "<h2>Response Demo Form</h2><h3>";
echo "You submitted the following information<br><ul>";
echo "<li>Name: <strong> $firstName $lastName</strong></li>";
echo "<li>Age: $age</li>";
echo "<li>Age: $email</li>";
echo "</li></ul></h3>";
?>