时间戳

首页 > 解决方案 > 我希望我的提交按钮控制台.记录用户在数组中输入的所有值

javascript - 我希望我的提交按钮控制台.记录用户在数组中输入的所有值

问题描述

示例 html： 

<form id="app-form">
    <label for="firstname" class="standard-label">
      First Name
      <input name="firstname" id="firstname" type="text">
     </label>    
     <label for="lastname" class="standard-label">
       Last Name
       <input name="lastname" id="lastname" type="text">
     </label>
     <input id="submit-app" type="submit" name="submit" value="Submit" onclick="logValues()">
</form>

我想单击提交按钮来调用下面的 logValues 函数。

JavaScript / jQuery

function logValues() {
    console.log($('app-form').serializeArray());
  }

当用户完成表单时，我希望这将更新的 key:values 数组记录到控制台中。

目前我可以手动调用该函数，它将记录一个空数组，因为没有记录任何输入，但单击提交按钮什么也不做。

标签： javascripthtml

解决方案

执行此操作的正确方法（Javascript/jQuery）：

$('#app-form').on('submit', function(){
    var arr = $(this).serializeArray();
    console.log(arr);
    return false; //      /<-- Only, if you don't want the form to be submitted after above commands
});

令人惊讶的是，您的代码确实有效。问题是在处理点击事件之后，表单正在被提交，所以页面被刷新了——你没有时间注意到控制台日志。请注意，我的解决方案不是click ，而是处理submit事件 - 那是因为您可以从此函数返回 boolean false ，这将停止任何进一步的操作（在这种情况下是提交表单）。

在此答案中了解有关其工作原理（以及为什么e.preventDefault()不是更好的解决方案）的 更多信息。

推荐阅读