how do i pass this bootstrap html form to next page with javascript?

Question

i have a simple form with a gender drop down and a temperature dropdown and i want them to go to the next page and just simple be outputted to the screen. I think i may have to change my save button as well. must use javascript with i could use php lol

  <div class="form-group">
   <label for="sel1">Gender:</label>
   <select class="form-control" id="gender">
      <option>Male</option>
      <option>Female</option>
   </select>
</div>

<div class="form-group">
   <label for="sel1">Temperature (Degrees):</label>
   <select class="form-control" id="gender">
      <option>Fahrenheit</option>
      <option>Celcius</option>
   </select>
</div> 

<div style="text-align: center;"><a href="index.html" class="btn btn-info btn-lg"> Save Settings</a></div>

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

I think that you can use local storage for this:

   localStorage.setItem('showInTheNextPage', $('.form-group').html());

Then, in the next page:

   var fromPrevPage = localStorage.getItem('showInTheNextPage');
   $('.form-group').html(fromPrevPage);

UPDATE : Illustration

https://stackoverflow.com/a/16264547/1845408

Page 1: http://jsfiddle.net/Xotic750/dfqsK/

Page 2: http://jsfiddle.net/Xotic750/ayvPq/

edited May 23 '17 at 11:51

Community

1
1

answered May 08 '15 at 04:16

renakre

8,001
5
46
99

1

+1 for a good idea! But please note that `localStorage` or `sessionStorage` does not work in apple devices like iPad, iPhone etc!! :) – Guruprasad J Rao May 08 '15 at 04:18
1

@GuruprasadRao did not know that, a huge limitation! – renakre May 08 '15 at 04:19
Yep!! I have struggled a lot in one of my project and not even knowing unless I found some article on that!! :( – Guruprasad J Rao May 08 '15 at 04:20
1

@GuruprasadRao they discussed several solutions here http://stackoverflow.com/questions/14555347/html5-localstorage-error-with-safari-quota-exceeded-err-dom-exception-22-an – renakre May 08 '15 at 04:22
1

@erkaner.. So basically that answer is to check whether apple device or say safari browser supports localStorage or not right? But the crazy thing was it was supporting in Desktop safari browser but not in devices!! :) – Guruprasad J Rao May 08 '15 at 04:26
trying it as we speak! – bigdowg May 08 '15 at 04:37
where do i put the local storage code in mine? and how do i out put it on a test page – bigdowg May 08 '15 at 04:40
@bigdowg I added resources that shows how to do it with more details – renakre May 08 '15 at 04:46
it wont work for me nothing shows up on second page nd i copied it line for line in jfiddle =/ – bigdowg May 08 '15 at 05:30

score 0 · Answer 2 · answered May 08 '15 at 04:35

may be you do not need to pass to the "next" page? may be you need to reload rest (or some part of the page in background), namely use ajax?

{your form html here}
<a href="index.html" class="btn btn-info btn-lg" onclick="reload"> Save Settings</a>
<div id="content"></div>
<script >
  function reload(evt) {
    var body = $('form#some-form').serializeArray();
    var xhr = $.post(window.location.origin+'/api'+window.location.pathname, body )
      .done(function(data) {
        console.log( "success" );
        $('#content').html(data);
      })
      .fail(function() {
        console.log( "error" );
    });
  }
</script>

assuming use of JQuery.

how do i pass this bootstrap html form to next page with javascript?

2 Answers2