別のWebページフォームに値を渡す

Question

JavaScriptを使ってnodejsと一緒にwebappを作成する方法を学んでいます。私はすべてアイデアがなく、正しくこれをやっているのか分からない。だから私がしようとしているのは、動的に作成されたテーブルの行をユーザーがクリックすると、すでにjsonの値で埋められている一連のフォーム入力を持つ新しいhtmlページを開きます。今すぐテーブルの行をクリックすると、選択されたIDを取得することができ、テストとして入力フィールドにロードしたいが、定義されていないとして取得することができる。

関数fillform関数を使用して

for (i = 0; i < attendee.length; i++) { 
     var tr = document.createElement('TR'); 
     if(i % 2 == 0) 
     { 
      tr.bgColor = '#E9F2F5'; 
     } 
     for (var j = 0; j < attendee[i].length; j++) { 
      var td = document.createElement('TD'); 

      /* if (j != 0) { 
       td.setAttribute('contenteditable', 'true'); 
      }*/ 
      td.appendChild(document.createTextNode(attendee[i][j])); 
      tr.appendChild(td); 

      var currentRow = table.rows[i]; 
      var createClickHandler = 
       function(tr) 
       { 
        return function() { 
         var cell = tr.getElementsByTagName("td")[0]; 
         var id = cell.innerHTML; 
         fillForm(id); 
        }; 
       }; 
      currentRow.onclick = createClickHandler(currentRow); 
     } 
     tableBody.appendChild(tr); 
    } 
    myTableDiv.innerHTML = ""; 
    myTableDiv.appendChild(table); 
} 

// this function is included in the html page as a onload function 
function fillForm(id) 
{ 
    window.open("/populatedForm.html"); 
    document.getElementById("id").value = id; 
    console.log(id); 
} 

html入力の一部私は記入したいと思います。

<div class=container2> 
    <form method="PUT" action="/process-form" enctype="multipart/form-data" autocomplete="off"> 
     <fieldset> 
      <label> 
       ID<br/> 
       <input id="id" name="id" type="text" value=" " required/> 
      </label> 
      <br/> 

これは私のテーブルには、

のように見え、これは私がテーブルの行をクリックすると、入力がどのように見えるかである方法です。新しいhtmlページが開きますが、入力は未定義に設定されています。私は仕事をするためにIDを取得することができないので、残りの部分を行うhavent。

アドバイスは素晴らしいと思います！ありがとうございました！

Answer 1

コメントに投稿するには時間がかかりすぎますので、こちらでさらに回答します。

ルーティングを行う方法を理解したら、別の方法でやりたいとは思わないでしょう。http://expressjs.com/en/guide/routing.htmlという素晴らしいリソースがあります。ルートパラメータセクションを見てください。

だから、/populatedForm/:idのようなルートを持っているだろう。エクスプレスでは、このように見えます。

app.get('/populatedForm/:id', function(req, res) { 
    res.send(req.params); 
}); 

req.paramsはあなたがつかむしたいIDをつかむだろう、とそれがres.sendを言うところ（）あなたはそのルートからすべてのビジネスロジックを扱うことができる場所です。それで、そのIDのすべての情報を取得し、それをjsonとして送信し、フロントエンドでJSONを処理するために、データベースに電話をかけます。

それがこの

app.get('/populatedForm/:id', function(req, res) { 
    var myJson = getIdAndOtherInfoFromDatabase(req.params); 
    res.send(myJson); 
}); 

その後、あなたはJSONを介してフロントエンドでそれのすべてを扱うことができるようになりたいです。あなたが混乱したり、つかまえたりすると、私はこのことについてちょっと調べていくつもりです。