在窗口中顯示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中

回答

相關問題