Question

我希望首先通过单击“显示”按钮在窗口警报中显示所有输入值的两个函数，第二个是通过单击“使用JavaScript或PHP提交”以.txt格式保存此值。

这是我的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>

Answer 1

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

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

然后在您的php文件 action_page.php 中输入以下代码，将帖子值保存在文本文件中。

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>

在窗口警报中显示html5输入值并将值保存在.txt中

1 个答案: