时间戳

首页 > 解决方案 > 在表单操作中指定动态 url

html - 在表单操作中指定动态 url

问题描述

我正在尝试在表单的操作属性中指定一个动态 url。url 将取决于用户在文本框中输入的内容。例如，如果用户输入"Fred"asfirstname和1234as courseId，那么 url 应该是"/users/Fred/course/1234"

这是我到目前为止所拥有的，但它没有读取名字和 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>

不能使用php和ajax。

标签： html

解决方案

你需要javascript来做到这一点

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>

推荐阅读