Specify dynamic url in form action - html

Question

I am trying to specify a dynamic url in the actions properties of form.
The url will be dependant on what the user enters in the textbox. For example, if the user enters "Fred" as firstname and 1234 as courseId, then the url should be "/users/Fred/course/1234"
This is what I have so far but it is not reading the firstname and courseId.
<form action="/users/{{firstname}}/course/{{courseId}}" method="POST">
<input type="text" placeholder="firstname" name="firstname">
<input type="email" placeholder="email" name="email">
<input type="text" placeholder="courseId" name="courseId">
<input type="submit" value="Submit">
</form>
No php and ajax can be used.

Answer 1

You need javascript to do this
const template = (firstname, courseId) => `/users/${firstname}/course/${courseId}`;
document.getElementById('myForm').addEventListener('submit', function(s) {
s.preventDefault();
this.action = template(this.elements["firstname"].value, this.elements["courseId"].value);
this.submit();
});
<form action="placeholder" method="POST" id="myForm">
<input type="text" placeholder="firstname" name="firstname">
<input type="email" placeholder="email" name="email">
<input type="text" placeholder="courseId" name="courseId">
<input type="submit" value="Submit">
</form>