CODEWITHSUNDEEP
html
DanCode
DanCode

Reputation: 673

Specify dynamic url in form action

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.

Upvotes: 2

Views: 2231

Answers (1)

baao
baao

Reputation: 73221

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>

Upvotes: 2

Related Questions