在窗口警报中显示html5输入值，并将值保存为.txt - Display html5 input value in a window alert and save the value in a .txt

我想要两个函数首先显示所有的输入值一起在窗口警报通过点击显示按钮，第二个是保存这个值在一个。txt格式通过点击提交与JavaScript或PHP。

这是我的Html代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form action="action_page.php">
ID:<br>
<input type="number" name="ID" id="ID">
<br>
Password:<br>
<input type="password" name="password" id="password">
<br>
First name:<br>
<input type="text" name="first name" id="first name">
<br>
last name:<br>
<input type="text" name="last name" id="last name">
<br>
Prmotion:<br>
<select name="promo" id="promo">
<option value="1">1 anne</option>
<option value="2">2 anne</option>
<option value="3">3 anne</option>
<option value="4">4 anne</option>
<option value="5">5 anne</option>
</select><br>
Date de Naissance:<br>
<input type="date" name="birthday" id="birthday">
<br>
Email:<br>
<input type="email" name="mail" id="mail">
<br>
Telephone:<br>
<input type="tel" name="telephone" id="telephone">
<br>
Sport Prefere:<br>
<input type="checkbox" name="sport" value="Natation"> Natation<br>
<input type="checkbox" name="sport" value="Soccer" checked> Soccer<br>
<input type="checkbox" name="sport" value="Tennis" checked> Tennis<br>
 Sex:<br>
 <input type="radio" name="sex" value="male" checked>Male
 <br>
 <input type="radio" name="sex" value="female">Female
 <br>
 Option:<br>
 <select name="Option">
 <option value="Telecom">Telecom</option>
  <option value="Multi">multimedia</option>
  <option value="Logi">Logiciel</option>
 </select><br>
 Comment:<br>
<textarea name="comment" id="comment"></textarea><br>
<input type="submit" value="Display">
<input type="submit" value="Submit">
</form>
</body>
</html>

您可以使用serializeArray方法在表单中创建对象数组，然后在警报中显示。

您可以使用ajax提交表单数据。

然后在你的php文件action_page.php中放入下面的代码，这将保存post值在一个文本文件中

if($_SERVER['REQUEST_METHOD'] == 'POST'){
$myfile = fopen("hello.txt", "a") or die("Unable to open file!");
$txt = json_encode($_POST);
fwrite($myfile, $txt);
fclose($myfile);
}

$("#display").on("click", function() {
  //alert($('form').serializeArray());
  var fields = $('form').serializeArray();
  var data = [];
  jQuery.each(fields, function(i, field) {
    data.push(field.value);
  });
  alert(data);
  return false;
});
$("#submit").on("click", function() {
  var fields = $('form').serialize();
  var data = [];
  $.ajax({
    type: 'POST',
    data: fields,
    url: "action_page.php",
    success: function(result) {
      alert(result);
    }
  });
  return false;
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
  <div id="results"></div>
  <form action="">
    ID:
    <br>
    <input type="number" name="ID" id="ID">
    <br>Password:
    <br>
    <input type="password" name="password" id="password">
    <br>First name:
    <br>
    <input type="text" name="first name" id="first name">
    <br>last name:
    <br>
    <input type="text" name="last name" id="last name">
    <br>Prmotion:
    <br>
    <select name="promo" id="promo">
      <option value="1">1 anne</option>
      <option value="2">2 anne</option>
      <option value="3">3 anne</option>
      <option value="4">4 anne</option>
      <option value="5">5 anne</option>
    </select>
    <br>Date de Naissance:
    <br>
    <input type="date" name="birthday" id="birthday">
    <br>Email:
    <br>
    <input type="email" name="mail" id="mail">
    <br>Telephone:
    <br>
    <input type="tel" name="telephone" id="telephone">
    <br>Sport Prefere:
    <br>
    <input type="checkbox" name="sport" value="Natation">Natation
    <br>
    <input type="checkbox" name="sport" value="Soccer" checked>Soccer
    <br>
    <input type="checkbox" name="sport" value="Tennis" checked>Tennis
    <br>Sex:
    <br>
    <input type="radio" name="sex" value="male" checked>Male
    <br>
    <input type="radio" name="sex" value="female">Female
    <br>Option:
    <br>
    <select name="Option">
      <option value="Telecom">Telecom</option>
      <option value="Multi">multimedia</option>
      <option value="Logi">Logiciel</option>
    </select>
    <br>Comment:
    <br>
    <textarea name="comment" id="comment"></textarea>
    <br>
    <input type="submit" id="display" value="Display">
    <input type="submit" id="submit" value="Submit">
  </form>
</body>
</html>