我想要一些不同的选项，它们都映射到不同的操作，但我只想要一个提交按钮。我一生都无法让它发挥作用。这是我到目前为止的代码:
<!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>
我想做的是将这三个表单字段分别映射回一个单独的网址，但是我无法让它工作。如果我取出 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 个功能/。提交后，它会转到新操作链接。
关于javascript - 根据用户填写的字段动态设置表单操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34760412/