Add a comment

At this point, the user can add a comment using the amp-form library. Notice how the presence of the form is conditional, depending on the state of the amp-access component:

<form amp-access="loggedIn" amp-access-hide method="post" action-xhr="<%host%>/samples_templates/comment_section/submit-comment-xhr" target="_top">

We specify a POST method and a XHR action, as non XHR actions are not allowed with POST methods in AMP. Because this is a demo, we are not persisting comments, so it’s only possible to add one comment at the time; whenever a comment is added, the AMPByExample server replies with a JSON response containing the entered text with some additions, like a timestamp, an avatar and a name for the user.

Here's an example of JSON response:

{"Datetime":"09:34:21",
"User":"Charlie",
"Text":"Hello!",
"UserImg":"/img/ic_account_box_black_48dp_1x.png"}

The form component will simply display those values inside the page using the amp-mustache template:

<div submit-success>
  <template type="amp-mustache">
    <div class="comment-user">
      <amp-img width="44" class="user-avatar" height="44" alt="user" src=""></amp-img>
      <div class="card comment">
        <p><span class="user">{{User}}</span><span class="date">{{Datetime}}</span></p>
        <p>{{Text}}</p>
      </div>
    </div>
  </template>
</div>

In this example, we are only checking if the value of the comment is not empty; if the value is empty, we return an error that causes the following code to execute

<div submit-error>
  <template type="amp-mustache">
    Error! Looks like something went wrong with your comment, please try to submit it again.
  </template>
</div>

As an extra touch, we add the required attribute to enforce the presence of comment text before submitting the comment:

<input type="text" class="data-input" name="text" placeholder="Your comment..." required>

When you add a comment and click the submit button, you should now see something similar to the following screenshot: