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

-3

我希望两个函数先在窗口警报中一起显示所有输入值，方法是单击Display按钮，第二个函数将该值保存在a中。 txt格式，点击使用JavaScript或PHP提交。在窗口中显示html5输入值alert并将值保存在.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>

来源

2015-10-04 user3392674

你应该先写jQuery代码尝试，如果你卡住的地方，我们可以为您提供建议。 – sandeepsure

您可以使用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>

来源

2015-10-04 17:23:50 jlocker

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

回答

相关问题