使用 JavaScript 获取 HTML 表单数据答案

【问题标题】：Getting HTML form data with JavaScript使用 JavaScript 获取 HTML 表单数据
【发布时间】：2021-04-06 14:51:03
【问题描述】：

下面的代码是一个 HTML 表单，我想做的是从该表单中获取输入并将其保存到会话存储中并能够跨页面传输。

我知道如何正常执行此操作，但特别是对于 HTML 表单，这对我不起作用。

因此，如果用户在 Conor 中输入用户名，我希望将该用户名保存到会话存储中，以便获取该用户名并在另一个页面上使用它

当我尝试从会话存储中获取它时，它目前没有得到这个输入，它什么也不做。

因此，如果有人可以向我解释我在获取此表单输入和修复方面做错了什么，那就太好了。

如果需要，会快速回答问题

<html>
<head>

     <script type=text/javascript>
  function send(){
       var name = document.getElementById('Name').value ;
       var Fname = document.getElementById('Fname').value;
        
        sessionStorage.setItem('Name',name);
        sessionStorage.setItem('fName',Fname);

  return true;
  }
    </script>
    
</head>
<body>

        <div class="wrapper">
            <h1>Game Options</h1>

                <div class="top">
                    <label id='Name'>What's your name?</label>
                    <input type="text" id="Name" placeholder="Please enter a user name" name="name" /><br />
                    <div class="content content1">
                        <i></i>
                        <p class="W">Usernames must contain uppercase letters</p>
                    </div>
                </div>

                <div class="top">
                    <label id="fName">What's your friend's name?</label>
                    <input type="text" id="fName" placeholder="Please enter a user name" name="name" /><br />
                    <div class="content content2">
                        <i></i>
                        <p class="W">Usernames must contain uppercase letters</p>
                    </div>
                </div>

                <div class="top">
                    <label for="mode">What's your favourite drink?</label>
                        <select id="Mode">
                            <option>Please select game difficulty</option>
                            <option value="simple">Simple</option>
                            <option value="Common">Common</option>
                            <option value="Difficult">Difficult</option>
                        </select>
                    
                    
                </div>
               <a href="check.html" onclick=" return send();">Begin</a>
            
        </div>
    
</body>
</html>

【问题讨论】：

提示：name.value
对不起，您在代码中的使用方式我已经在上面更新了它，但似乎仍然无法正常工作
在标签中使用 href 和 onclick：stackoverflow.com/questions/1346043/…
解决了您的问题。检查我的答案。

标签： javascript html

【解决方案1】：

仔细查看您的代码。您有多次同名idName & fName。另外你的代码也有很多问题。

类和 ID 的区别： 一个类名可以被多个 HTML 元素使用，而一个 id 名只能由页面中的一个 HTML 元素使用：

这是更新后的代码：

访问观看现场演示：Codepen

【讨论】：

【解决方案2】：

我没有完全理解你的问题，但是代码肯定有错误，这可能是你的问题：

  function send(){
       var name = document.getElementById('Name') ;
       var Fname = document.getElementById('Fname');
        
        /* U are setting HTMLElement into sessionStorage */

        sessionStorage.setItem('Name',name);
        sessionStorage.setItem('fName',Fname);
  }

你需要这样做：

  function send(){
       var name = document.getElementById('Name').value ;
       var Fname = document.getElementById('Fname').value;
        
        sessionStorage.setItem('Name',name);
        sessionStorage.setItem('fName',Fname);
  }

【讨论】：

【解决方案3】：

您应该从标签标签中删除 id 并且此行中还有另一个错误 var Fname = document.getElementById('Fname').value;

引号里面应该有'fName'

【讨论】：