CODEWITHSUNDEEP
javascripthtmlnode.jsexpressweb
Sam kh
Sam kh

Reputation: 127

passing value to a different webpage form

I'm trying to learn to make a webapp using JavaScript along side with nodejs. I'm all out of ideas and have no clue if im doing this correctly. So what im trying to do is when a user clicks on a row of a the dynamically created table it opens up a new html page with a bunch of form inputs already filled in with the values in a json. Right now I have it that when I click on the table row I can get the Id chosen and as a test i want to load it in to a input field but im getting it as undefined

a good portion of the table creating function with the fillform function

    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);
}

Part of the html input I want to fill out.

<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/>

This is how my table looks like enter image description here

And this is how the input looks like when I click on a row in the table. It opens the new html page but the input is set to undefined. I havent done the rest since I cant get id to work. enter image description here

Any advice would be great! Thank you!

Upvotes: 0

Views: 35

Answers (1)

Morgan G
Morgan G

Reputation: 3109

I am going to further answer this down here as it is too long for me to post in the comments.

Once you figure out how to do routing you won't want to do it another way, here is a great resource http://expressjs.com/en/guide/routing.html . Look at the route parameters section.

So what I would do is have a route like /populatedForm/:id. In express it will look something like this.

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

req.params will grab the id you want to grab, and then where it says res.send() is where you can handle all the business logic from that route. That is where I'd make a call out to the database to grab all the information for that ID, and then send it as a json, then handle the JSON on your front end.

it'd look something like this

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

Then you can handle all of it on the front end via JSON. I would google around a bit about this stuff if you get confused or stuck.

Upvotes: 1

Related Questions