时间戳

首页 > 解决方案 > 使用 JavaScript 获取 HTML 表单数据

javascript - 使用 JavaScript 获取 HTML 表单数据

问题描述

下面的代码是一个 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>

标签： javascripthtml

解决方案

仔细查看您的代码。您有多次使用相同的名称id Name& fName。此外，您的代码中也存在许多问题。

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

这是更新的代码：

访问查看现场演示：Codepen

推荐阅读