如何使用javascript将此引导程序html表单传递到下一页？

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

我有一个简单的表格,性别下拉和温度下拉,我希望他们转到下一页,只是简单地输出到屏幕。我想我可能还需要更改我的保存按钮。必须使用javascript我可以使用PHP大声笑

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

2 个解决方案

#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://*.com/a/16264547/1845408

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

第1页:http://jsfiddle.net/Xotic750/dfqsK/

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

第2页:http://jsfiddle.net/Xotic750/ayvPq/

#2

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?

可能你不需要传递到“下一页”?可能你需要重新加载休息(或后台页面的某些部分),即使用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.

假设使用JQuery。

#1