HTML 使用 javascript 将表单结果发送到下一页

Question

我正在为我们的发电厂开发一个网站。我遇到了一些需要帮助的问题。

问题是，我们的客户不想在他们的服务器上设置数据库。这意味着我只能使用 html、javascript 和一点点 php。有一个页面供用户使用单选按钮（选择答案是“是”还是“否”）。在使用表格之后。我们需要在下一页动态生成一个结果表单(table)。我被困在这里了。我不知道如何将所有单选按钮值发送到下一页（包括问题本身）这里是网页的一部分 () sorry 是中文的。(是 = YES, 否 = NO) 更棘手的情况是我还需要发送图像！！！我该怎么处理图像！如何将图像 url 从一页发送到另一页？

$(document).ready(function () {
        
        document.getElementById('lblname').innerHTML = localStorage.checkername;
        document.getElementById('lblid').innerHTML = localStorage.checkerid;
        document.getElementById('lblteam').innerHTML = localStorage.selectedteam;
        document.getElementById('lblproject').innerHTML = localStorage.selectedproject;
        document.getElementById('lblcontractor').innerHTML = localStorage.selectedcontractor;

        
        if (localStorage.selectedteam == "儀資組") {
            console.log(a1.length);
            for (var i = 0; i < a1.length; i++) {
                console.log(a1[i][0]);
                $('#checkdata').append(
                    '<div data-role="collapsible" class="collapsible">' +
                    '<h3>' + a1[i][0] +
                    '</h3>' +
                    '<table class="tbinside" id="tb' + i + '">').trigger('create');
                for (var j = 1; j < a1[i].length; j++) {
                    if (j % 2 == 0) {
                        $('#tb' + i).append(
                            '<tr class="a">' + '<td class="td1">' +
                            '<input type="radio" name="yesno' + j + ' value="y">是' +
                            '</td>' + '<td class="td1">' +
                            '<input type="radio" name="yesno' + j + ' value="n">否' +
                            '</td>' + '<td class="td2">' +
                            '<b>' + a1[i][j] + '</b>' +
                            '</td>' + '</tr>'
                        ).trigger('create');
                    } else {
                        $('#tb' + i).append(
                            '<tr class="b">' + '<td class="td1">' +
                            '<input type="radio" name="yesno' + j + ' value="y">是' +
                            '</td>' + '<td class="td1">' +
                            '<input type="radio" name="yesno' + j + ' value="n">否' +
                            '</td>' + '<td class="td2">' +
                            '<b>' + a1[i][j] + '</b>' +
                            '</td>' + '</tr>'
                        ).trigger('create');
                    }
                }
                $('#tb' + i).append('<tr><td colspan="3"><h><b>備註:</b></h>' + '<input type="text" name="備註" style="width:100%;height:50px;"></td></tr>' +
                    '<br>' + '<tr><td colspan="3"><h><b>上傳照片:</b></h>' + '<input type="file" id="files" name="files[]" multiple /><output id="list"></output></td></tr>'
                ).trigger('create');
                $('#checkdata').append(
                    '</table>' +
                    '</div>').trigger('create')
            }
        } else {
            for (var i = 0; i < a1.length; i++) {
                console.log(a2[i][0]);
                $('#checkdata').append(
                    '<div data-role="collapsible" class="collapsible">' +
                    '<h3>' + a2[i][0] +
                    '</h3>' +
                    '<table class="tbinside" id="tb' + i + '">').trigger('create');
                for (var j = 1; j < a2[i].length; j++) {
                    if (j % 2 == 0) {
                        $('#tb' + i).append(
                            '<tr class="a">' + '<td class="td1">' +
                            '<input type="radio" name="yesno' + j + ' value="y">是' +
                            '</td>' + '<td class="td1">' +
                            '<input type="radio" name="yesno' + j + ' value="n">否' +
                            '</td>' + '<td class="td2">' +
                            '<b>' + a2[i][j] + '</b>' +
                            '</td>' + '</tr>'
                        ).trigger('create');
                    } else {
                        $('#tb' + i).append(
                            '<tr class="b">' + '<td class="td1">' +
                            '<input type="radio" name="yesno' + j + ' value="y">是' +
                            '</td>' + '<td class="td1">' +
                            '<input type="radio" name="yesno' + j + ' value="n">否' +
                            '</td>' + '<td class="td2">' +
                            '<b>' + a2[i][j] + '</b>' +
                            '</td>' + '</tr>'
                        ).trigger('create');
                    }
                }
                $('#tb' + i).append('<tr><td colspan="3"><h><b>備註:</b></h>' + '<input type="text" name="備註" style="width:100%;height:50px;"></td></tr>' +
                    '<br>' + '<tr><td colspan="3"><h><b>上傳照片:</b></h>' + '<input type="file" id="files" name="files[]" multiple /><output id="list"></output></td></tr>'
                ).trigger('create');
                $('#checkdata').append(
                    '</table>' +
                    '</div>').trigger('create')
            }
        }
    });

(上层代码)我们读取csv文件后动态生成单选按钮。感谢您的帮助！

p.s（如有不妥，请不要怪我，我是新来的）

Answer 1

This one "render results of populated at a different html document"

可以使用FormData()、for..of循环、FileReader()、data URI、window.open()

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <form>
    <input type="text" name="text" />
    <input type="file" name="file" accept="image/*" />
    <input type="submit" />
  </form>
  <script>
    var form = document.forms[0];

    form.onsubmit = function(e) {
      e.preventDefault();
      var data = new FormData(this);
      var dataURL = "data:text/html,";
      var html = "<!DOCTYPE html><html><body>";
      for (prop of data.keys()) {
        if (prop === "text") {
          var span = document.createElement("span");
          span.innerHTML = prop + ":" + data.get(prop);
          html += span.outerHTML;
        } else {
          var img = document.createElement("img");
          var reader = new FileReader();
          reader.onload = function(event) {
            img.src = event.target.result;
            html += img.outerHTML;
          };
          reader.onloadend = function() {
            html += "</body></html>";
            dataURL += encodeURIComponent(html);
            var doc = window.open(dataURL, "_blank", "doc");
          }
          reader.readAsDataURL(data.get(prop));
        }
      }

    }
  </script>
</body>

</html>

plnkr http://plnkr.co/edit/JkYQAdK1hL69b2dEl1Je?p=preview

HTML 使用 javascript 将表单结果发送到下一页

HTML Send the form result into next page using javascript

html

javascript

php

jquery

jquery-mobile