HTMLフォームの結果を次のページにjavascriptを使用して送信します

Question

私は発電所のウェブサイトを開発していました。私は助けが必要ないくつかの問題に直面した。

問題は、クライアントがサーバーにデータベースを設定したくないということです。つまり、私はhtml、javascript、および少しのPHPでしか動作できません。ラジオボタンのユーザーのためのページがあります（答えは「はい」または「いいえ」です）。フォームを使用した後。次のページで結果フォーム（テーブル）を動的に生成する必要があります。私はここで立ち往生した。私はそれをどのようにすべてのラジオボタンの値を次のページ（質問自体を含む）に送信するかを把握することができませんここでは、Webページの一部です （） 申し訳ありません。 ） そして、より厳しい状況は私もイメージを送る必要があるということです！ イメージとどうやってやるのですか？ イメージ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ファイルを読み込んだ後、ラジオボタンを動的に生成します。ご協力いただきありがとうございます！

PS（何か問題をtheresの場合。私はこのコミュニティに新たなんだ、私を責めないでください）

Answer 1

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