在form1登录页面中输入电子邮件字段值，如何在form2电子邮件输入字段中显示相同的电子邮件ID，而不刷新页面

Question

In form1 login page input email field values how to display same email id in form2 email input field without refresh the page while click the forgot button please any one help me.below i attched the screenshot

script

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


            <script type="text/javascript"
        src="http://code.jquery.com/jquery-1.10.1.min.js"></script>


            <script>
                $(document).ready(function () {
                    var currentActiveId;

                    if (sessionStorage.getItem("activeDiv")) {
                        currentActiveId = sessionStorage.getItem("activeDiv");
                        $('.form-div').removeClass("active");
                        $('#' + currentActiveId).addClass("active");

                    }


                    $('#btn-show-signup').click(function () {

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

                    });

                    $('.btn-show-login').click(function () {

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

                    });

                    $('#btn-show-forgot').click(function () {
    //                    $('#forgot-email').attr('value', null);
                        $('.form-div').removeClass("active");
                        $('#forgot-form').addClass("active");
                        currentActiveId = "forgot-form";
                        sessionStorage.setItem('activeDiv', currentActiveId);                 
                    });
                });
            </script> 

form1

 <div class="form-main">
                    <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="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-forgot" >Forgot ?</a>  

                        </div>


                        <div class="field-wrap">
                            <button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" >Login</button>
                        </div>
                        <div class="field-wrap">
                            <a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-signup">NEW User? Sign up</a>
                        </div>
                    </form>
                </div>

form2

<div class="form-div" id="forgot-form"> 
                <div class="form-aside">
                    <h4 id="form-header">Forgot password </h4>
                    <p class="form-text"></p>
                </div>
                <div class="form-main">
                    <form action="<?php echo base_url(); ?>Index.php/Login_cntrl/ResetPassword" method="POST">
                        <div class="field-wrap">
                            <input type="text" name="emaill" id="emaill" placeholder="Enter your Mobile/Email Address" value="<?php echo $this->session->userdata('findemaill'); ?>" autocomplete="off" id="forgot-email"/>

                        </div>

                        <div class="field-wrap">
                            <input type="text" name="otp" id="otp" placeholder="Enter OTP" value="<?php echo set_value('otp'); ?>"/>
                             <span class="text-danger"><?php echo form_error('otp'); ?></span>
                        </div>
                          <?php    echo $this->session->flashdata('passwordmissmatch'); ?>
                        <div class="field-wrap">
                            <input type="text" name="newpassword" id="newpassword" placeholder="Enter new Password" value="<?php echo set_value('newpassword'); ?>"/>
                              <span class="text-danger"><?php echo form_error('newpassword'); ?></span>
                        </div>
                        <div class="field-wrap">
                            <input type="text" name="confirmpassword" id="confirmpassword" placeholder="Re-enter new Password" value="<?php echo set_value('confirmpassword'); ?>"/>
                             <span class="text-danger"><?php echo form_error('confirmpassword'); ?></span>
                        </div>

                        <div class="field-wrap">
                            <button type="submit" name="resubmit" id="resubmit" class="btn btn-submit">submit</button>
                        </div>
                    <?php    echo $this->session->flashdata('success_msg'); ?>



                        <div class="field-wrap">
                            <a href="javascript:void(0)" class="btn-show-login btn btn-link btn-nobg" >Back</a>
                        </div>

                    </form>

                </div>

            </div>

Answer 1

on form1 html

function onClickHandler(){
    location.href = 'form2.html?username=' + document.getElementById('TextBoxName').value;
}

on form2 html

function parseQueryString()
{
    var queryDict = {}
    location.search.substr(1).split("&").forEach(function(item) {
        queryDict[item.split("=")[0]] = item.split("=")[1]
    });

    return queryDict;
}

function onLoadHandler(){
    document.getElementById('TextBoxName').value = parseQueryString().name;
}