Question

我希望有一些不同的选项可以映射到不同的操作，但我只想要一个提交按钮。我不能为我的生活让这个工作。这是我到目前为止的代码：

<!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根本不是我强有力的语言，因此我感谢您提供的任何反馈。谢谢！

Answer 1

我使用的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个功能。在提交后，它将转到新的操作链接。

Answer 2

使用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();
});

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

2 个答案: