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

Question

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

问题是，我们的客户端不想在其服务器上设置数据库。这意味着我只能使用html，javascript和一点点的php。有一个供用户使用的页面单选按钮（选择答案是“是”还是“否”）。并在使用该表格之后。我们需要在下一页动态生成结果表单（表格）。我被困在这里。我无法弄清楚如何将所有单选按钮的值发送到下一页（包括问题本身），这里是网页的一部分 （） 对不起是中文。（是=是，否=否） 更困难的情况是我也需要发送图像！ 我该如何处理图像！ 如何将图像网址从一个页面发送到另一个页面？

$(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文件后动态生成单选按钮。谢谢你的帮助！

PS（如果那里有什么错。请不要怪我，我是新来这个社区）

Answer 1

这一个

“在不同的HTML文件 渲染的结果填充”

您可以使用FormData()，for..of循环，​​，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