如何从 javascript 访问表单数据

Question

我是 javascript 新手，如有任何帮助，我们将不胜感激！

我试图在提交后取回用户提交的数据。我有一个 javascript 函数，可以将一种形式替换为另一种形式。好心的 Whosebug 用户帮我创建了这个函数。

function Vanish(event) {

event.preventDefault();

// Specify the id of the form.
var IDofForm = "quest";

// Specify the id of the div containing the form.
var IDofDivWithForm = "question";

// Specify the id of the div with the content to replace the form with.
var IDforReplacement = "entryform";

if(document.getElementById(IDofDivWithForm).innerHTML = document.getElementById(IDforReplacement).innerHTML){
 return true;
 }
 else{
 return false;
 }
 }

然后我有我的表格:

<div id="question">
<form action="" method="POST" name="quest" id="quest" onsubmit="Vanish(event)">
<textarea name="question" class="question-field" placeholder="Ask your question..."></textarea><br><br>
<input type="submit" name="qsubmit" onclick=" Change();">
<!-- Change() only swaps images on the screen-->
</form>

</div>

<!-- Vanishing Form -->
<div id="entryform" style="display:none;">
<form action="" method="POST" id="email">
<input type="text" name="fName" placeholder="First Name" class="forms" value="<?echo $_POST['question'];?>">
</br>
<input type="text" name="sName" placeholder="Second Name" class="forms">
</br>
<input type="text" name="email" placeholder="Email" class="forms">
</br>
<input type="image" src="images/submit.png" name="esubmit" onclick="submitForm()">
</br>
</div>

正如你从上面看到的，我有两种形式。提交后，参赛表格将取代问题表格。我今天的问题是如何获取输入的数据？我更喜欢 php，因为我更了解它，所以如果有一个 php 方法，那会很棒，但是所有解决方案都会有帮助！

对于 PHP 我已经尝试使用 $_REQUEST 和 $_POST 方法来尝试取回数据，但它不起作用。我的表单都提交到它们所在的页面。

Answer 1

首先 JavaScript 是客户端编程语言，因此要将数据发送到服务器，您需要向服务器发出 http/https 请求和 send/receive 数据

Good read What is the difference between client-side and server-side programming?

为此，您可以使用 html 表格或 ajax

表格

在表单中，您只需将数据发送到 url 即可（如果未指定 url，它将向当前页面发出请求，否则指定操作 url）

Ajax

你可以使用 ajax 发送数据，因为你只需要像下面这样发出 ajax 请求（我强烈建议使用 JavaScript （但如果你擅长 JavaScript 你也可以使用 Jquery 框架 )

var yourFormId = document.getElementById("email");

email.onsumbit = function(e){

   e.preventDefault();

   var formData = new FormData(yourFormId );
   var request = new XMLHttpRequest();
   request.open("POST", "your-url");
   request.send(formData);
}

// 这里通过 formData 对象你可以在行的单个代码中获取所有数据

与 jquery 有关，请看这个 post 它有非常简单的示例 jQuery Ajax POST example with PHP

现在读了几本好书

FormData Objects
Ajax : MDN 来源非常好

如何从 javascript 访问表单数据

How to access form data from javascript

javascript

php

forms