Creating a progressively enhanced form submission experience for clients with non-uniform JS/HTML5 support

Question

I'm a web developer and need help on enabling progressive enhancement.

Background: I'm dealing with a web app where many users originate from a forward proxy that strips out JS.

Moreover, some users also use browsers that don't support HTML5, or browsers that can't run JS conventionally (e.g. Opera Mini).

Overall, HTML5 has more coverage than JS for this userbase.

Current scenario: Currently, this app uses no JS or HTML5 at all. Form submissions lead to full page refreshes. A typical form simply looks like this:

<form action="{% url 'submit_comment' %}" method="POST">
    {% csrf_token %}
    {{ my_form.comment }}
    <button type="submit">OK</button>
</form>

Ignore the {{ }} nomenclature. That's Django syntax and is simply used to render - in this case - a text field where a user can write a comment.

The question: For clients that can support JS or HTML5, how do I progressively enhance the form submission experience?

E.g., there's a section of this app where users leave comments for others to read. Currently, they press a 'reply' button and get redirected to a new page. The code for such a button is simply:

<form action="{% url 'response_page' %}" method="POST">
    {% csrf_token %}
    <input type="hidden" name="comment_id" value="{{ comment_id }}">
    <button type="submit">reply</button>
</form>

Now I need the following to happen:

1) If the client supports JS/HTML5, the DOM changes and a text field bound to a form appears right below the button. No refresh takes place.

2) If the client does not support JS/HTML5, the user is redirected to a new page as before.

---

How would one program this in a way that nothing breaks for unsupported users, and is as lightweight as possible? There's a lot of 'reply' buttons stacked together per page, so performance is critical as well.

I'm hoping there'd be established patterns to handle this kind of a thing. Being a web developer, I'm not privy to those. Would be great to get an illustrative answer.

---

Note: I'd prefer to do it in HTML5, but open to JS solutions as well - and I prefer plain vanilla JS instead of anything fancier.

Answer 1

This is a very basic answer which prevents the form submission if javascript is available and adds the required input as suggested above.

window.onload = function(){
  var input = document.createElement("input");
  input.type ='text';
  input.name = "comment";
  input.style.display = 'block';
  document.getElementById('myForm').appendChild(input);
  document.getElementById("submit").addEventListener("click", function(event){
    event.preventDefault();
  });
}

<form action="http://example.com" method="POST" aria-live="polite" id="myForm">
  <input type="hidden" name="comment_id" value="">
  <button id="submit" type="submit">reply</button>
</form>