How to properly pass dynamic input fields to another page for display?

Question

So I have "add" and "delete" buttons that will respectively add/delete input fields. I also have a "preview" button ( using anchor tags) that will send the user to the next page. Upon clicking the preview button, I want to collect all information given and re-displayed on the next page.

I'm totally un aware of how to collect this dynamic information (user will add/delete BEFORE hitting preview, so the amount of input is unknown). How can I pass all this?

Here is what my code/markup looks like (Sorry if it is too many lines of code, I just want to give you as much information as possible):

JavaScript for deleting and adding fields:

<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>

You could store it in session, or You could add them as url parameters when you send them to the preview page. You could also make the preview a modal dialog instead of sending them to a new page. Or just slideDown() a preview using jQuery. URL Param example `http://localhost/preview.html?product=mobile&model=CPC` Another mention is that you have `Social` in 2 different options even though the value is different it will look the same to the user. Which method would you like to implement? I would recommend url params that you pass back and forth from the preview page. Then read that. — BRogers, Dec 16 '13 at 04:37
I fixed the two Socials, thanks. But if I were to store via get session in PHP, how could I accommodate all input fields since the amount of fields is unknown? — Ebad Saghar, Dec 16 '13 at 05:02

score 2 · Accepted Answer · edited May 23 '17 at 11:59

2

If the information doesn't need to be secure, just use the url to pass parameters: How to get the value from the GET parameters?

1) on your onclick function, you collect the information and create a string that is going to be the new url (with the parameters) 2) use window.location = newUrl; to access the link 3) in the new page, parse the URL to get the info

edited May 23 '17 at 11:59

Community

1
1

answered Dec 16 '13 at 04:39

Julien Altieri

768
5
10

I Don't want to use a model or slide down, I want to send to another page.If I wanted to use Get session, how would I be able to send all information? Like I said, the amount of fields is unknown because the user can delete and add fields before hitting preview. – Ebad Saghar Dec 16 '13 at 04:44
Yes. window.location is equivalent to going to/loading another page (no slide down). For every input users have, you append another `&param=value` to the URL `before window.location = URL` hope this help – Julien Altieri Dec 16 '13 at 04:49
I'm not fully understanding on how one would accommodate dynamically enough parameters based on the unknown amount of input fields? – Ebad Saghar Dec 16 '13 at 04:51

score 1 · Answer 2 · answered Dec 16 '13 at 05:30

1

You can use localStorage variable to pass values between pages eg. page 1: localStorage.setItem("key","value"); page 2: var value=localStorage.getItem("key");

answered Dec 16 '13 at 05:30

gulshanm01

175
6

Yes, but the point that I keep making in my above comments is, that the amount of input fields is unknown. the User can add delete fields before hitting preview. How do I accommodate extra (if any) fields? They all need to be passed – Ebad Saghar Dec 16 '13 at 05:36
you can use a counter that will keep track of total controls added and store the same in localStorage var while redirecting the page.keep the key values as localStorage.setItem("key"+count,"value"). Get that count on the next page and loop through it. – gulshanm01 Dec 16 '13 at 05:44
nice, this is what I'm looking for. Could you give me an example to go by? Perhaps a jfiddle? – Ebad Saghar Dec 16 '13 at 05:45

How to properly pass dynamic input fields to another page for display?

2 Answers2