Question

我正在尝试将表格输入中的序列化数据显示到另一个HTML页面。我目前所拥有的是将序列化数据显示给来自JavaScript的警报。

HTML文件代码块

{
  isValid: true | false,
  fields: {
    email: string, // original input text
  },
  errors: [
    { name: "email", message: "Please enter a valid email address." },
  ],
}

JavaScript文件代码块

<form id="form">
<div class="table-responsive">
    <table class="table table-bordered table-striped table-highlight">
        <thead class="thead-inverse">
            <tr>
                <th>Race</th>
                <th>Equity Partners</th>
                <th>Non-Equity Partners</th>
                <th>Associates</th>
                <th>Counsel</th>
                <th>Other Lawyers</th>
                <th>Totals</th>
            </tr>
        </thead>
        <tbody>


            <tr>

                <td><label>American Indian/Alaska Native</label></td>

                <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_EP" value="" placeholder="Enter Value Here" /></td>

                <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_NEP" value="" placeholder="Enter Value Here" /></td>

                <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_A" value="" placeholder="Enter Value Here" /></td>

                <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian1_C" value="" placeholder="Enter Value Here" /></td>

                <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_OL" value="" placeholder="Enter Value Here" /></td>

                <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_T" value="" placeholder="Enter Value Here" /></td>

            </tr>

Answer 1

如果您可以访问基于服务器的脚本，则可以使用PHP / ASP或其他服务器端脚本语言发布和打印data_array。

PHP示例：

第2页

 <script>
 data = <? if (isset($_POST['data_page1'])){ echo $_POST['data_page1'];}else{echo "null";}>?;
 </script>

如果没有，我会建议localstorage。并转换为JSON而不使用序列化。

由于代码片段会在localstorage中引发错误，因此这是一个有效的小提琴：https://jsfiddle.net/gutw9o6s/

//page 1
$("#btn-ser1").click(function() {
  data_array = $("#form >input").filter(function() {
    return $(this).val();
  });


  localStorage.setItem('data_page1', JSON.stringify(data_array));
});

//page 2
$("#btn-ser2").click(function() {
  if (localStorage.key('data_page1')) {
    data = JSON.parse(localStorage.getItem('data_page1'));
    console.log(data);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <div class="table-responsive">
    <table class="table table-bordered table-striped table-highlight">
      <thead class="thead-inverse">
        <tr>
          <th>Race</th>
          <th>Equity Partners</th>
          <th>Non-Equity Partners</th>
          <th>Associates</th>
          <th>Counsel</th>
          <th>Other Lawyers</th>
          <th>Totals</th>
        </tr>
      </thead>
      <tbody>


        <tr>

          <td><label>American Indian/Alaska Native</label></td>

          <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_EP" value="" placeholder="Enter Value Here" /></td>

          <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_NEP" value="" placeholder="Enter Value Here" /></td>

          <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_A" value="" placeholder="Enter Value Here" /></td>

          <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian1_C" value="" placeholder="Enter Value Here" /></td>

          <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_OL" value="" placeholder="Enter Value Here" /></td>

          <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_T" value="" placeholder="Enter Value Here" /></td>

        </tr>

      </tbody>
    </table>
  </div>
</form>
<button id="btn-ser1">Set page 1</button>
<button id="btn-ser2">Get page 2</button>

记得在有人成功进入第二页后删除localStorage，否则localStorage会保留这些值。

（HTML / JavaScript）显示将数据序列化到另一个HTML页面

1 个答案: