如何将动态输入字段正确传递到另一个页面进行显示?

时间:2013-12-16 04:30:59

标签: javascript jquery html forms

所以我有"添加"和"删除"将分别添加/删除输入字段的按钮。我还有一个"预览"按钮(使用锚标签)将用户发送到下一页。单击预览按钮后,我想收集给出的所有信息并在下一页重新显示。

我完全不知道如何收集这些动态信息(用户将在点击预览之前添加/删除,因此输入量未知)。我怎么能通过这一切?

以下是我的代码/标记的样子(抱歉,如果代码行太多,我只想尽可能多地提供给您的信息):

用于删除和添加字段的JavaScript:

<script>
        $(document).ready(function() {
            $(".add").on('click', function() {
                var linehtml = $('.line').html();
                var total = $('.line').length;
                var dele = (total - 1);
                $('#linecont').append('<div class="line"><hr />'+linehtml+'</div>');
                return false;
            });

            $(".del").on('click', function() {
                var linecont = $("#linecont");
                var total = linecont.find('.line').length;
                var dele = (total - 1);
                if(total === 1) {
                    return false;
                }
                $('.line').eq(dele).remove();
                return false;
            });
        });
   </script>

HTML:

<div align="center">
        <a href="#" class="button add">Add Line</a>
        <a href="#" class="button del">Delete Line</a>
        <div style="width: 40%; margin:0 auto">
            <label>Campaign Name</label>
                <input type="text" placeholder="Campaign Name:"  />
        </div>
    </div>

    <div id="linecont">
        <div class="line">
            <div class="row">
                <div class="large-6 columns">
                    <label>Status:</label>
                        <select>
                            <option value="New">New</option>
                             <option value="Changed">Changed</option>
                        </select>

                    <label>Product:</label>
                        <select>
                            <option value="Mobile">Mobile</option>
                            <option value="Social">Social</option>
                            <option value="Online">Social</option>
                        </select>

                    <label>Model:</label>
                        <select>
                            <option value="CPC">CPC</option>
                            <option value="CPI">CPI</option>
                            <option value="CPM">CPM</option>
                            <option value="CPA">CPA</option>
                            <option value="CPD">CPD</option>
                        </select>

                    <label>Unit Rate:</label>
                            <input type="text" placeholder="Just type amount">
                </div>

                <div class="large-6 columns">
                    <label>URL Link:</label>
                        <input type="text" placeholder="URL Link"  />
                    <label>Targeting Info:</label>
                            <input type="text" placeholder="Target Info">
                    <label>Total Budget:</label>
                            <input type="text" placeholder="Total Budget">
                    <label>Daily Budget:</label>
                            <input type="text" placeholder="Daily Budget">
                </div>
            </div>

            <div style="width: 40%; margin:0 auto">
                <label>Total Units:</label>
                    <input type="text" placeholder="Total Units">
            </div>

            <div class="row">
                <div class="small-2 columns">
                    <label>Start Month:</label>
                        <select>
                            <option value="Jan">Jan</option>
                            <option value="Feb">Feb</option>
                            <option value="March">March</option>
                            <option value="April">April</option>
                            <option value="May">May</option>
                            <option value="June">June</option>
                            <option value="July">July</option>
                            <option value="Aug">Aug</option>
                            <option value="Sept">Sept</option>
                            <option value="Oct">Oct</option>
                            <option value="Nov">Nov</option>
                            <option value="Dec">Dec</option>
                        </select>
                </div>

                <div class="small-2 columns">
                    <label>Day:</label>
                        <select>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="2">3</option>
                            <option value="3">4</option>
                            <option value="4">5</option>
                            <option value="4">6</option>
                            <option value="5">7</option>
                            <option value="6">8</option>
                            <option value="7">9</option>
                            <option value="8">10</option>
                            <option value="9">11</option>
                            <option value="11">12</option>
                            <option value="12">13</option>
                            <option value="13">14</option>
                            <option value="14">15</option>
                            <option value="15">16</option>
                            <option value="16">17</option>
                            <option value="17">18</option>
                            <option value="18">19</option>
                            <option value="19">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                        </select>
                </div>

                <div class="small-2 columns">
                    <label>Year:</label>
                        <input type="text" placeholder="Type in Year"  />
                </div>

                <div class="small-2 columns">
                    <label>End Month:</label>
                        <select>
                            <option value="Jan">Jan</option>
                            <option value="Feb">Feb</option>
                            <option value="March">March</option>
                            <option value="April">April</option>
                            <option value="May">May</option>
                            <option value="June">June</option>
                            <option value="July">July</option>
                            <option value="Aug">Aug</option>
                            <option value="Sept">Sept</option>
                            <option value="Oct">Oct</option>
                            <option value="Nov">Nov</option>
                            <option value="Dec">Dec</option>
                        </select>
                </div>

                <div class="small-2 columns">
                    <label>Day:</label>
                        <select>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="2">3</option>
                            <option value="3">4</option>
                            <option value="4">5</option>
                            <option value="4">6</option>
                            <option value="5">7</option>
                            <option value="6">8</option>
                            <option value="7">9</option>
                            <option value="8">10</option>
                            <option value="9">11</option>
                            <option value="11">12</option>
                            <option value="12">13</option>
                            <option value="13">14</option>
                            <option value="14">15</option>
                            <option value="15">16</option>
                            <option value="16">17</option>
                            <option value="17">18</option>
                            <option value="18">19</option>
                            <option value="19">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                        </select>
                </div>

                <div class="small-2 columns">
                    <label>Year:</label>
                        <input type="text" placeholder="Type in Year"  />
                </div>
            </div>
        </div>
    </div>
  <hr>


    <div class="panel" style="width:98%; margin:0 auto">
        <h5>Terms and Conditions</h5>
        <p>I.</p>
        <p>II.</p>
        <p>III.</p>
        <p>IV.</p>
    </div>
    <hr>

<div align="center">
    <a href="io.php" class="button">Preview</a>
</div>

2 个答案:

答案 0 :(得分:2)

如果信息不需要是安全的,只需使用url传递参数: How to get the value from the GET parameters?

1)在您的onclick函数上,您收集信息并创建一个将成为新url的字符串(带参数) 2)使用window.location = newUrl;访问该链接 3)在新页面中,解析URL以获取信息

答案 1 :(得分:1)

您可以使用localStorage变量在页面之间传递值 例如。第1页: localStorage.setItem(&#34;键&#34;&#34;值&#34); 第2页: var value = localStorage.getItem(&#34; key&#34;);