登录表单电子邮件 ID 将使用 ajax 成功功能以密码重置表单显示，无需刷新页面

Posted 2023-05-09

【中文标题】登录表单电子邮件 ID 将使用 ajax 成功功能以密码重置表单显示，无需刷新页面

【英文标题】：login form email id will display in password reset form using ajax success function without page refresh

【发布时间】：2017-11-17 20:36:48

【问题描述】：

在登录表单中，如果单击忘记链接，下一个密码重置 div 将打开，该电子邮件将显示在与登录表单相同的电子邮件字段中。没有页面刷新如何在ajax成功功能中显示电子邮件并且两种形式都在同一页面中

登录

<div class="form-div active" id="login-form"> 
     <form action="<?php echo base_url(); ?>Index.php/Login_cntrl/login" method="POST" >

                        <div class="field-wrap">
                            <label class="view-label">Email Address</label>
                            <input type="email" placeholder=" Email Address" name="email" id="email" class="input-control" value="<?php echo set_value('email'); ?>"/>
                            <span class="text-danger"><?php echo form_error('email'); ?></span>
                        </div>

                        <div class="field-wrap">
                            <input type="password" placeholder="Password" name="password" id="password" value="<?php echo set_value('password'); ?>" />
                            <span class="text-danger"><?php echo form_error('password'); ?></span>

                            <a href="#" class="btn btn-link btn-nobg" id="btn-show-forgot" >Forgot ?</a>  

                        </div> 
</div>

脚本

$('#btn-show-forgot').click(function () 

                    $('.form-div').removeClass("active");
                    $('#forgot-form').addClass("active");
                    currentActiveId = "forgot-form";
                    sessionStorage.setItem('activeDiv', currentActiveId);

密码重置表单

<div class="form-div" id="forgot-form"> 
<div class="field-wrap">
                            <input type="text" name="emaill" id="emaill" placeholder="Enter your Mobile/Email Address" value="<?php echo $this->session->userdata('findemaill'); ?>" />

                        </div>
</div>

ajax/jquery

<script type="text/javascript">
            $(document).ready(function () 
                $("#btn-show-forgot").click(function () 
                    //e.preventDefault();
                    var email = $("#email").val();
                    //  var password= $("#password").val();


                    $.ajax(
                        type: "POST",
                        url: "<?php echo base_url() ?>" + "Index.php/Login_cntrl/sendmail",
                        data: email: email,
                        success: function (data)
                        
//                            alert('Successfully send a mail');

//location.reload();
//here i want to display,first form email id without page refresh

                        ,
                        error: function ()
                        
                            alert('fail');
                        
                    );
                );
            );
        </script>

【问题讨论】：

单页使用2个表单，默认显示登录表单。如果有人点击忘记密码，则使用 jquery 的 hide() 和 show() 事件隐藏登录表单并显示忘记密码表单

同样的，只有工作但没有重新加载值的第二表单电子邮件字段应该使用 ajax/jquery 成功函数显示

只需从登录表单中获取电子邮件并使用 .val() 将其放在忘记密码表单上

怎么举个例子

【参考方案1】：

// Login form   
 <form name="login" id="login">
    <input type="text" id="login_email" name="login_email" />
    <input type="password" name="login_password" />
   <button id="forgot-password">Forgot password</button>
  </form>

// Forgotpassword form

    <form name="forgotForm" id="forgotForm" style="display:none;">
        <input type="text" name="forgot_email" id="forgot_email" />
    </form>

JQuery

$("#forgot-password").on("click",function()
  $("#login").hide();
  $("#forgotForm").show();
  var loginVal = $("#login_email").val();
 $("#forgot_email").val(loginVal);
);