时间戳

首页 > 解决方案 > 如何根据所选选项更改表单操作？

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

问题描述

当我在 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>

标签： javascripthtmlformsmethodsaction

解决方案

  1. 您正在同时使用 onsubmit 和 action。事件处理程序在默认操作之前运行。他们可以取消默认操作。

    由于 onsubmit 处理程序在不是 admin 或 manager 时总是返回 false，因此 action='/login' 永远不会起作用。

    onsubmit 和 form action 一起

  2. 位置拼写错误。

<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>

推荐阅读