Question

我正在使用表单将数据从一页传递到另一页。如果单击“应用”按钮将转到另一页，我想在下一页显示相应的职业名称（即Java Developer）。我试图在javascript的帮助下实现这一目标。

career.html：

    <form action="job portal.html" method="get" target="_blank">
                    <div class="section-header text-center wow zoomIn">
                        <h2>Current Oppournities</h2>

                    </div><br /><br />

                    <div class="row">


                        <div class="col-lg-6">
                            <div class="box wow fadeInLeft">

                                <h4 class="title" id="career-title" name="career-title"><a href=""><i class="fa fa-java"></i>&nbsp;<b>Java Developer</b></a></h4>
                                <hr />
                                <div class="carrer-opt">
                                    <h5 name="test">Software Developer</h5>

                                    <p>

                                        Should have join immediate joiner .
                                    </p>

                                </div>
                                <div class="col-lg-3 cta-btn-container">
                                    <input type="submit" id="apply"  value="Apply Now" onClick="testJS()" />
                                </div>
                            </div>
                        </div>

</form>

js：

<script src="js/main.js"></script>
    <script>
        function testJS() {
            var b = document.getElementById('career-title').value,
                url = 'job portal.html?career-title=' + encodeURIComponent(b);

            document.location.href = url;
        }
    </script>

job portal.html：

 <h1 id="here" style="color:black"></h1>

js：

  <script>
        window.onload = function () {
            var url = document.location.href,
                params = url.split('?')[1].split('&'),
                data = {}, tmp;
            for (var i = 0, l = params.length; i < l; i++) {
                tmp = params[i].split('=');
                data[tmp[0]] = tmp[1];
            }
            document.getElementById('here').innerHTML = data.career-title;
        }
    </script>

如何做到这一点。请任何人帮助。

Answer 1

您需要使用HTML5本地存储解决此类问题。这是您解决问题的方法。

<script>
    function testJS() {
        var b = document.getElementById('career-title').value;
        var titleText = localStorage.setItem('title', b);
        var url = 'job portal.html';

        document.location.href = url;
    }
</script>

设置标题值后，通过在prtal.html脚本中引用id'title'来获取值并为该元素设置值。

<script>
    window.onload = function () {
        var valueText = localStorage.getItem('title');
        document.getElementById('here').innerHTML = valueText;
    }
</script>

将所选数据从一页传递到html中的另一页

1 个答案: