为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用 JQuery 从另一个页面上的文本字段值单击按钮来填充不同页面的文本字段?

如何使用 JQuery 从另一个页面上的文本字段值单击按钮来填充不同页面的文本字段?

慕斯709654 2023-10-10 16:21:42
我的主页中有一个用于输入用户电子邮件地址的字段和一个按钮。用户输入电子邮件并点击按钮后,它应该重定向到注册页面并自动填充注册表单的电子邮件字段值。我知道如何在 JQuery 中执行此操作,但问题是将值从一个页面发送到另一个页面......主页:<input type="email" id="valbox"  class="text-box form-control" style="max-width: 200px;"placeholder="Enter Your Email Id" required> <button type="submit" id="butval" class="btn btn-default rounded subscribe px-5 ml-4 float-left">SUBMIT</button>注册页面:<input id="email" type="email" class="form-control " name="email" value="" required autocomplete="email">
查看完整描述

1 回答

?
婷婷同学_

TA贡献1844条经验 获得超8个赞

您的主页应将值传递给 a,session如下所示:


<html>

     <head>

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

     </head>

     <body>

          <input type="email" id="valbox"  class="text-box form-control" style="max-width: 200px;" placeholder="Enter Your Email Id" required>

          <button type="submit" id="butval" class="btn btn-default rounded subscribe px-5 ml-4 float-left">SUBMIT</button>

     </body>

     <script>

          $(function() {

               $('#butval').on('click', function(){

                    let text = $('#valbox').val();

                    if(!text){

                         alert("Please enter your email")

                    }else{

                         sessionStorage.setItem("email", text);

                         window.location.replace("login.html");

                    }

               })

          });

     </script>

</html>

然后,您的注册页面将检索它并将其设置为电子邮件输入的值:


<html>

     <head>

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

     </head>

     <body>

          <input id="email" type="email" class="form-control " name="email" value="" required autocomplete="email">

     </body>

     <script>

          $(function() {

               $('#email').val(sessionStorage.getItem("email"));

          });

     </script>

</html>


查看完整回答
反对 回复 2023-10-10
  • 1 回答
  • 0 关注
  • 35 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信