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

Question

在登录表单中，如果单击“忘记链接”，则将在该电子邮件中打开下一个密码重置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>

Answer 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);
});