Fatal编程技术网
  • javascript/
  • Javascript HTML表单提交后从数组中提取数据（按键事件）

Javascript HTML表单提交后从数组中提取数据（按键事件）

javascript html forms

Javascript HTML表单提交后从数组中提取数据（按键事件）,javascript,html,forms,Javascript,Html,Forms,因此，我有一个HTML表单，其中有一个keypress事件侦听器，记录按下的键的charCode，然后将该charCode转换为与键相关的字母字符串 每次在表单中输入字母时，都会在input\u array[]中创建一个新条目 我将字母表中的每个字母作为SVG存储在main.JS文件的不同部分的JS变量中，我希望能够读取input_array[]中存储的字母，然后在提交表单后在新页面上显示适合该字母的SVG 我尝试使用下面的方法从数组中提取数据，但它在第一次按键时触发，因此我无法获得所有数组数据

因此，我有一个HTML表单，其中有一个
keypress
事件侦听器，记录按下的键的
charCode
，然后将该
charCode
转换为与键相关的字母字符串

每次在表单中输入字母时，都会在
input\u 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];
下面是一个例子，展示我尝试做的基本版本。如果打开控制台，您将看到如何创建
input\u 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
}

这就是说，如果你真的在一篇文章上这样做，那么在你要发布的页面上，你必须从发布的表单数据中获取这些信息，这是完全不同的。您是想在客户端JS还是POST处理程序中执行此操作？

如果我理解正确，听起来您想执行以下操作

  • 在第1页，用户在文本字段中输入文本
  • 在提交时，将该文本发送到第2页
  • 在第2页，将该文本转换为字母数组，以与要显示的SVG路径相关联
    • 如果是上述情况，则需要更少的javascript

    • 第1页：表单中应该只有文本框和提交按钮，以便使用GET方法将数据提交到下一页
    • 第2页：在这里，您将需要Javascript来检索发送过来的数据，并将其处理到您的字母数组中。我也会过滤非字母字符
    我在下面的代码中创建了一个示例表单，它提交给自己，然后javascript脚本标记将从url中提取变量，并将其处理为一个字母数组。在您的例子中，您可以将Javascript移到第2页

    <script type="text/javascript">
    (function(){
      function getParamValue(param) {
          var urlParamString = location.search.split(param + "=");
          if (urlParamString.length <= 1) return "";
          else {
              var tmp = urlParamString[1].split("&");
              return tmp[0];
          }
      }
      function isLetter(c) {
        return c.toLowerCase() != c.toUpperCase();
      }

      var user_input = getParamValue('user_input');
      var char_array = null;
      if(user_input !== ''){
        char_array = user_input.split("");
        char_array = char_array.filter(isLetter);
        for(var i in char_array){
          console.log('Char ' + i + ' = ' + char_array[i]);
        }
      }
    })();
  </script>
  <body>
    <form id="user_form" class="" action="?" method="GET">
      <input type="text" name="user_input" />
      <input type="submit" value="submit">
    </form>
  </body>

    
（功能（）{
函数getParamValue（param）{
var urlParamString=location.search.split（param+“=”）；

    如果（urlParamString.length您记录所有按键而不是在提交时获取输入中的值有什么原因吗？如果有人键入内容、使用退格并再次键入，您是否希望使用退格和所有内容？老实说，我只是假设我需要记录所有按键来记录输入的数据d、 我只想输入字母，这样我就可以在下一页上显示该字母的SVG路径。我就是搞不懂。这可能很简单，但因为我是n00b，所以我错过了它。非常感谢你的回答，@Ted a。我正试图在客户端JS中这样做（我想）。我想这些信息足够让我继续努力，直到我完成这个项目。我很乐意提供帮助。希望这个项目在你的办公桌或主管面前让位：）嗨，泰德，我也很难从你的代码中获得输出。现在，如果我理解正确，我应该有
    handleSubmit（）
    表单提交到的HTML页面上的函数？我的错，这是一个愚蠢的错误。我现在可以使用它。再次感谢您，@Ted.Hi，谢谢您的回答。我已经输入了您的代码，虽然我没有收到任何错误，但在提交表单时，我也没有在控制台上记录任何内容。没有其他脚本进入控制台我只是不明白为什么它不会将
    char\u array
    输出到控制台。试着从本地服务器运行它，而不是在fiddle中运行它。fiddle对于简单的例子来说是可以的，但是当涉及到需要多个页面的事情时，它可能会出现一些问题，因为它是如何构建的。可能是这样的由于表单提交以某种方式处理重定向表单，因此未从表单提交中传递参数。