Modifying HTML form action with jQuery/Javascript

Question

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.

wrong tags here. you do not need anything to do with `node` or even `express`. — Kamrul, Jun 18 '14 at 22:56

score 0 · Answer 1 · answered Jun 18 '14 at 02:52

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...
}

answered Jun 18 '14 at 02:52

T3am5hark

856
6
9

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 : 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. – unaligned Jun 18 '14 at 05:49
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? – T3am5hark Jun 18 '14 at 06:00
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 : notation to allow access to a resource in the URL, there *should* be a way to integrate that with an HTML form. – unaligned Jun 18 '14 at 06:02
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. – T3am5hark Jun 18 '14 at 06:06
Right... I understand all that. But I'm not talking about using just the get and post requests. You can use the : 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
.
– unaligned Jun 18 '14 at 06:07
Sounds like you REALLY want to write some custom javascript to parse the form and build the URL and call it! Try this: http://stackoverflow.com/questions/10942430/how-can-i-get-an-html-forms-values-into-a-custom-url – T3am5hark Jun 18 '14 at 06:12

Kamrul · Accepted Answer · 2014-06-18T23:16:50.033

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>

Thanks, this worked swimmingly. Sorry for the tags, I am not web developer and this is a new world. — unaligned, Jun 19 '14 at 03:03

Modifying HTML form action with jQuery/Javascript

2 Answers2