问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

想使用 Javascript 提交和保存表单数据

社区维基
1
新手上路，请多包涵

我想使用 javascript 提交和保存表单数据

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Save data using JS</title>
</head>
<body>
  <h1>Sign up</h1>
<form name="myForm">
  Name:<br>
  <input type="text" name="fname" required maxlength="40"><br><br>
 E-mail: <input type="email" name="email" required><br><br>
  Gender:<br>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

所以，当我点击提交按钮时，表单数据应该保存在某个地方，供每个填写并提交它的用户使用。这应该使用 Javascript、jquery 或 ajax 来完成。

原文由 Manish62 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryhtmlajaxforms
阅读 453
1 个回答
得票最新
社区维基
1

如果您想在本地保存它，请使用 cookie

下面的代码将使用 cookie 将您的答案保存到个人计算机：

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Save data using JS</title>
</head>
<script>
 function saveData() {
  document.cookie="fname="+document.getElementById('fname').value+"; expires=Thu, 18 Dec 2019 12:00:00 UTC";
  document.cookie="email="+document.getElementById('email').value+"; expires=Thu, 18 Dec 2019 12:00:00 UTC";

  var radios = document.getElementsByName('gender');

  for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
        document.cookie="gender="+radios[i].value+"; expires=Thu, 18 Dec 2019 12:00:00 UTC";
        break;
    }
}
 alert('Data Saved!');
}
 alert('SAVED DATA: '+document.cookie);
</script>
<body>
  <h1>Sign up</h1>
<form name="myForm" id="myForm" action="javascript:saveData();">
  Name:<br>
  <input type="text" name="fname" id="fname" required maxlength="40"><br><br>
 E-mail: <input type="email" name="email" id="email" required><br><br>
  Gender:<br>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

如果你想将它保存在数据库中。将表单提交到可以运行一些后端代码的页面，例如 php、asp、coldfision、jsp 或任何您喜欢的语言。

注意：一种更现代的数据存储方式是使用 Window.localStorage。但它与旧浏览器不兼容.. 但它确实对 cookie 进行了某些改进，您无需重新加载页面即可看到更改。数据永不过期。您可以存储大量数据，然后可以存储在 cookie 中。

原文由 Sergio Fernandez 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题