根据用户填写的字段动态设置表单操作

Set form action dynamically depending on the field filled in by user

本文关键字:动态 设置 表单 操作 字段 用户      更新时间:2023-09-26

我想有几个不同的选项,它们都映射到不同的操作,但我只想要一个提交按钮。 我一辈子都无法让这个工作。 这是我到目前为止的代码:

<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/main.css') }}">
<meta charset="UTF-8">
</head>
<body>
<script type=text/javascript>
function clicked() {
    document.getElementById('id').action = "/query";
    document.getElementById('filename').action = "/fname";
    document.getElementById('dep').action = "/dependency";
    return true;
    }
</script>
<div id="header">
    <h1>TestPy</h1>
</div>
<hr>
<div id="wrapper">
    <div class="query-menu" id="nav">
        <form name="query_form" id="query" onsubmit="clicked()" method=post>
            <fieldset class="fieldset-auto-width">
                <legend>Query</legend>
                    <table style="width:25%">
                    <tr>
                        <td>Plugin ID:</td>
                        <td><input type=text name=script_id id="id" placeholder="19506"></td>
                    </tr>
                    <tr>
                        <td>Filename Search:</td>
                        <td><input type=text name=filename id="fname" placeholder="test.file"></td>
                    </tr>
                    <tr>
                    <td>Dependency:</td>
                    <td><input type=text name=dep id="dep" placeholder="dependency"></td>
                       </tr>
                       <tr>
                            <th rowspan="2"><td><input type=submit value=Query class="btn"></td></th>
                        </tr>
                    </table>
            </fieldset>
        </form>
    </div>
    <div class="content" id="section">
        {% block body %}{% endblock %}
    </div>
</div>
</body>
</html>

我想做的是让这三个表单字段各自映射回一个单独的 url,但我无法让它工作。 如果我取出javascript并对URL进行硬编码,它可以正常工作。 HTML/JavaScript根本不是我的强项语言,所以我感谢您提供的任何反馈。 谢谢!

我使用了OnBlur方法,该方法在用户离开输入字段时触发。

<td><input type=text name=filename id="fname" onblur="myFunctionY()" placeholder="test.file"></td>
<td><input type=text name=dep id="dep" onblur="myFunctionY(this)" placeholder="dependency"></td>
<td><input type=text name=script_id id="id" onblur="myFunctionY(this)" placeholder="19506"></td>

在Javascript中:

function myFunctionY(vari) {
console.log(vari.id);
if(vari.id=="fname")
{
var x = document.getElementById("fname");
var link='http://www.google.com?q='+x.value;
console.log("This is the URL "+link);
document.query_form.setAttribute("action",link);
}
if(vari.id=="id")
{
var x = document.getElementById("id");
var link='http://www.google.com?q='+x.value;
console.log("This is the URL "+link);
document.query_form.setAttribute("action",link);
}
if(vari.id=="dep")
{
var x = document.getElementById("dep");
var link='http://www.google.com?q='+x.value;
console.log("This is the URL "+link);
document.query_form.setAttribute("action",link);
}
}

您可以根据需要拥有3种功能。提交后,它将转到新的操作链接。

使用 jQuery,我会做这样的事情:

$('#query').submit(function (e) {
    // prevent the default action of form submission
    e.preventDefault();
    // create a variable using the 3 field values
    $form_action = '/'+$('#id').val()+'/'+$('#fname').val()+'/'+$('#dep').val();
    // set the form action attribute to the variable value
    $(this).attr('action') = $form_action;
    // submit the form as normal now that the action is changed
    $(this).submit();
});