如何根据所选选项更改表单操作？

Question

当我在 login.ejs 文件中使用 javascript 更改表单操作但它没有覆盖表单操作时，任何人都可以解释为什么它不起作用吗？在后端我使用 nodejs express 和基于在选定的选项上，我想更改表单操作但它不起作用，它默认我在操作中给出的内容。

<script>
function changeAction() {
    const location = document.getElementById("category_id").value;
    if (loction == "manager") {
        document.myform.formaction = "/manager/login";
        return true;

    }
    if (location == "admin") {
        document.myform.formaction  = "/admin/login";
        return true;
    }

    return false;
}
</script>
<div class="container" style="border: solid black; padding-top: 25px; margin-top: 25px">
    <div class="container-fliud d-flex justify-content-center">
        <h1><strong>Login</strong></h1>
    </div>
    <hr>
    <form id="form_id" action="/login" name="myform" method="POST" class="was-validated" onsubmit="return changeAction()">
        <div class="form-group">
            <label><strong>Category</strong></label>
            <select class="form-control" id="category_id" name="sellist" required>
                <option disabled selected value>select an option</option>
                <option value="admin">Admin</option>
                <option value="manager">Manager</option>
                <option value="user">User</option>
            </select>
        </div>
        <div class="form-group">
            <label><strong>Email</strong></label>
            <input type="email" class="form-control" id="fname" name="email" placeholder="enter your email name" required>
        </div>
        <div class="form-group">
            <label for="password"><strong>Password</strong></label>
            <input type="password" id="password" class="form-control" name="password" placeholder="enter your password" required>
        </div>
        <div class="form-group">
            <button type="submit" id="login" class="btn btn-primary" style="width: 100%">Login</button>
        </div>
        <div class="form-group">
            <h5>Don't have account ? <a href="/admin/register">Sign Up</a></h5>
        </div>
    </form>
</div>

Answer 1

您在默认操作之前使用了 onsubmit 和操作 both.Event 处理程序运行。他们可以取消默认操作。

因为 onsubmit 处理程序总是 returns false if not admin 或者经理，action='/login' 从不工作。

onsubmit and form action together
位置拼写错误。

<script>
function changeAction() {
    const location = document.getElementById("category_id").value;
    if (location == "manager") {
        document.myform.formaction = "/manager/login";
        console.log(document.myform.formaction )
        return true;

    }
    if (location == "admin") {
        document.myform.formaction  = "/admin/login";
        console.log(document.myform.formaction )
        return true;
    }

}
</script>
<div class="container" style="border: solid black; padding-top: 25px; margin-top: 25px">
    <div class="container-fliud d-flex justify-content-center">
        <h1><strong>Login</strong></h1>
    </div>
    <hr>
    <form id="form_id" action="/login" name="myform" method="POST" class="was-validated" onsubmit="return changeAction()">
        <div class="form-group">
            <label><strong>Category</strong></label>
            <select class="form-control" id="category_id" name="sellist" required>
                <option disabled selected value>select an option</option>
                <option value="admin">Admin</option>
                <option value="manager">Manager</option>
                <option value="user">User</option>
            </select>
        </div>
        <div class="form-group">
            <label><strong>Email</strong></label>
            <input type="email" class="form-control" id="fname" name="email" placeholder="enter your email name" required>
        </div>
        <div class="form-group">
            <label for="password"><strong>Password</strong></label>
            <input type="password" id="password" class="form-control" name="password" placeholder="enter your password" required>
        </div>
        <div class="form-group">
            <button type="submit" id="login" class="btn btn-primary" style="width: 100%">Login</button>
        </div>
        <div class="form-group">
            <h5>Don't have account ? <a href="/admin/register">Sign Up</a></h5>
        </div>
    </form>
</div>

如何根据所选选项更改表单操作？

How to change form action according to selected option?

html

javascript

forms

methods

action