如何从javascript访问表单数据

How to access form data from javascript

本文关键字：访问表 表单 数据 访问 javascript      更新时间：2023-09-26

我是一个javascript新手，如果能在这件事上提供任何帮助，我们将不胜感激！

我正在尝试在提交后将用户提交的数据取回。我有一个javascript函数，可以用另一个表单替换一个表单。一位善良的stackoverflow用户帮助我创建了这个函数。

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方法来尝试获取数据，但都不起作用。我的表格都提交到它们所在的页面。

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

很好的阅读客户端和服务器端编程之间的区别是什么？

要做到这一点，您可以使用html表单或ajax

  1. 表单

在表单中，您只需将数据发送到操作中的url（如果没有指定url，它将向当前页面请求其他指定的操作url）

  1. 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，请参阅本文，它有一个非常简单的例子jquery Ajax post例子和PHP

现在几个好的读取

  1. FormData对象
  2. Ajax：MDN它是一个非常好的源代码
相关文章：