Dearest Monks, I am dipping my feet into all things webapp with a simple application. I would like to build web app to render a list of files in a filesystem directory and attach and actionable button to each one. In the attempt below, the get method sends the list of files to the stash and then renders the list of files/button as expected. The trouble seems to be in how the button is templated. How can the button be set up to attach the filename to the button which sends it off to another method on the click? Eventually, I would like to get resulting output posted into a frame on the righthand side of the page with the list of files remaining on the left and side; I know this will take a few more steps, but for now I am stuck. Thanks in advance. 
#!/usr/bin/env perl
use Mojolicious::Lite;
use Path::Tiny;

plugin 'TagHelpers';


get '/' => sub{
    my $c = shift;
    my $path = path("/Foo/Bar/Baz");
    $c->stash(filepath => $path, files => [$path->children(qr/\.txt/)]
+ );
    $c->render('index');
};

post '/' => sub{
    my $c = shift;
    my $file = $c->param('id');
    print $file; # print to console
    $c->render(text => $file);
};

app->start; 

__DATA__
@@ index.html.ep
% layout 'default';
% title $filepath  ;
<h1>Let's test the files in <%= $filepath %>!</h1>

  <table border="1">
    <tr>
      <th>File</th> <th>Action</th>
    </tr>
    % foreach my $file (@$files) {
      <tr><td><%= $file %></td> 
      <td>
         %= form_for '/' => (method => 'POST') => begin
         %= submit_button 'validate', id => $file
         % end
      </td>
     </tr>
    % }
  </table>

@@ layouts/default.html.ep
<!DOCTYPE html>
<html>
  <head><title><%= title %></title></head>
  <body><%= content %></body>
</html>

[download]
EDIT: I think I figured it out the first step. I got rid of the post command, and added a new get with a route placeholder: 
get '/validate/*filename' => sub{
    my $c = shift;
    print $c->param('filename'),"\n\n\n\n"; # print to console
    $c->render('index');
};

[download]
Then I mixed a little JQuery into the button: 
<input type='button' value='validate' onclick = "$.get('/validate/<%= 
+$file %>');">

[download]
And that sends back the file name. Very cool. Thanks in advance if you point out a better way or provide any other tips.

In reply to Mojolicious to and from buttons by docdurdee

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.