-1

I am trying to create a post form in HTML using a RESTful express route, something akin to /game/:gameID/node/:nodeRow/:nodeCol/update to update a given node in a given game.

Here's the route code:

app.post("/game/:gameID/node/:nodeRow/:nodeCol/update", function(request, response) {
    gameHandler.updateNode(request, response)
});

The reason I'm doing this in HTML is because I haven't created the functionality yet in the actual client (mobile game) so I need something to test it. However, I have not figured out how to make the HTML form so that I can enter the data in the form to replace :gameID, :nodeRow, and :nodeCol without just going to the URL manually, like /game/3/node/2/5/update.

This is a post request and I would like other data to be contained in the form to specify the property to update as well as the new value.

How can I do this, or am I thinking about it wrong?

Edit:

Changed the question title to be more useful.

Improve this question
1
  • 1
    wrong tags here. you do not need anything to do with node or even express. Commented Jun 18, 2014 at 22:56

2 Answers 2

Reset to default
0

Try

app.post("/game/:gameID/node/:nodeRow/:nodeCol/update", function(request, response) {
    console.log({gameID: request.params.gameID, nodeRow: request.params.nodeRow,nodeCol: request.params.nodeCol, body: request.body});
    response.send({gameID: request.params.gameID, nodeRow: request.params.nodeRow,nodeCol: request.params.nodeCol, body: request.body});
});

Sorry I misunderstood your question. I thought you are having difficulties in parsing node parameters in node.

Anyway, there are different ways you can achieve this. Of course you need support of javascript, either pure javascript or jQuery.

Here is an example

<form id="myform">
   <input name="gameID" id="gameID" />
   <input name="nodeRow" id="nodeRow" />
   <input name="nodeCol" id="nodeCol" />  
   <button name="action" value="bar" onclick="submitForm();">Go</button>
</form>

and javascript (using jQuery) will be

<javascript>
  function submitForm(){
     $("#myform").attr('action',
         '/game/' + $("#gameID").val() + '/node/' + $("#nodeRow").val()
          + '/' + $("nodeCol").val() + '/update');

     $("#myform").submit();
  }
</javascript>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, this worked swimmingly. Sorry for the tags, I am not web developer and this is a new world.
0

The way to pass data in a POST request is to push it from the html form controls and retrieve the values from the body of the request. The HTML below defines a form with your variables which you can hand-key from a browser:

<html><body>
<form method="post" action="/game/update" role="form">
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">gameID</span>
                <input type="text" class="form-control" name="gameID" placeholder="<gameID>" value="123456">
                </div>
            </div>
            <div class="input-group">
                <span class="input-group-addon">nodeRow</span>
                <input type="text" class="form-control" name="nodeRow" placeholder="<nodeRow>" value="1">
                </div>
            </div>
            <div class="input-group">
                <span class="input-group-addon">nodeCol</span>
                <input type="text" class="form-control" name="nodeCol" placeholder="<gameID" value="1">
                </div>
            </div>
            <hr>
            <button type="submit" class="btn btn-default">Submit</button>
</form>
</body></html>

Then you can write a handler along the lines of what's below. Clicking submit will fire the POST request off, and pulling the variables out of the request body can be done as shown below. 

app.post("/game/update", function(request, response) {
    updateNodeHandler(request, response)
});

function updateNodeHandler(request, response) {
    var nodeID = request.body.nodeID;
    var nodeRow = request.body.nodeRow;
    var nodeCol = request.body.nodeCol;
    // Additional logic goes here...
}
Improve this answer

6 Comments

I know how to create a form and then get the data out of the request in Express, but what I was talking about specifically was how to create an HTML form and do this using the :<parameter> functionality, where the URL in the app.get contains the ID of the resource you're trying to receive. Example: you might use app.get("/game/:gameID/download....) in express and then write the request handler to download the game. Then manually going to the URL /game/2/download would call your handler code. But I don't understand how to do this when creating an HTTP form - it's not as straightforward.
The HTML form wants to put the data into the body of the request as shown in the example above. I don't know of a good way to form a URL from the contents of the form like you're trying to do without using javascript to extract the values, form the url, and call. What's motivating the need to put the data into the URL?
Well, I'm trying to make it REST-like, where you access resources rather than simply 'calling a function', which would be simple enough, and is the way I was doing it originally. I just figured that since express uses the :<parameter> notation to allow access to a resource in the URL, there should be a way to integrate that with an HTML form.
If it's supposed to return something to the user, then you can use a GET action with query string (i.e. "url?parameter1=abc&parameter2=xyz") which you pull out with request.query.parameter1 etc. You can just flip the form example above from POST to GET and it will populate the url with /game/update?gameID=xyz&nodeRow=123&nodeCol=456 which can be extracted with request.query.nodeID etc.
Right... I understand all that. But I'm not talking about using just the get and post requests. You can use the :<parameter> functionality, such as app.get("/game/:gameID/download"), then write the request handler to get the gameID parameter (request.params.gameID), and pull out the gameID param from the URL that you type in, such as /game/245/download. But what I am trying to do is figure out how to use this functionality in the HTML form... you can't (to my knowledge) do <form method="/game/:gameID/download"</form>.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.