javascript - 提交 HTML 表单后从数组中提取数据(按键事件)

标签 javascript html forms

所以我有一个带有 keypress 的 HTML 表单记录 charCode 的事件监听器按下的键然后转换 charCode到与 key 相关的字母的字符串。

每次在表单中输入一个字母,都会在 input_array[] 中创建一个新条目.

我将字母表中的每个字母作为 SVG 存储在 main.js 文件不同部分的 JS 变量中,我希望能够读取存储在 input_array[] 中的字母。然后在提交表单后在新页面上显示适合该字母的 SVG。

我已经尝试使用下面的方法从数组中提取数据,但是它在第一次按键时触发,因此我无法获取所有数组数据然后显示 4字母。我还觉得必须有一种更有效的方法。

var letter_one = input_array[0];
var letter_two = input_array[1];
var letter_three = input_array[2]; 

这是一个 JSFiddle , 以展示我正在尝试做的事情的基本版本。如果您打开控制台,您将看到如何 input_array[]正在创建。

我对这门语言还是很陌生,所以非常感谢任何帮助。

最佳答案

如您所料,这比您做的要简单得多:)

提交表单后,您可以从输入中获取值:

function handleSubmit() {
  var val = document.getElementById('user_input').value;
  validate(val);
  console.log(val);
  var letter_one = val[0];
  var letter_two = val[1];
  var letter_three = val[2];
  var letter_four = val[3];
  return false; // stops POST for dev
}

https://jsfiddle.net/1htpm6ag/

也就是说,如果您实际上是在 POST 上执行此操作,那么在您要 POST 的页面上,您必须从 POSTed 表单数据中获取它,这是完全不同的。您是否尝试在客户端 JS 或 POST 处理程序中执行此操作?

关于javascript - 提交 HTML 表单后从数组中提取数据(按键事件),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35952946/

相关文章:

php - 使用 php 表单 POST 函数发送通过 ssl 保护的信息

javascript - 如何使用不同的样式表来 Bootstrap 3 个不同的 View ?

javascript - 我如何将此 require 写为 es6 import 语句

javascript - Vanilla JS 相当于 $(nav ul li a).eq[0].attr ('href' )

javascript - 如何将 jquery 库和 js 文件加载到 WordPress 主题中?

php - 来自 html 的多个操作?

javascript - 打开和关闭扩展时保留表单数据吗?

javascript - 在 jquery 中的表行中执行单击或焦点操作

javascript - 颜色数组,试图给它们一些不透明度

html - 使用@font-face 规则,只有特殊字符不会在 IE 中显示