Specify dynamic url in form action

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.

• Omar Yafer: are you using angular or something apart from html?
• DanCode: I'm using the hbs module from node.js.
• Ibu: What happens when two users share the same first name and are in the same class? Use a user id instead of firstname.

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>

• DanCode: where is 'placeholder' being called?
• baao: Never @DanCode .
• AdityaSrivast: @DanCode what do you want to do with placeholder?
• DanCode: the placeholder should be the url of the webpage.
• baao: placeholder will be replaced on submit @DanCode