根据用户填写的字段动态设置表单操作
Set form action dynamically depending on the field filled in by user
我想有几个不同的选项,它们都映射到不同的操作,但我只想要一个提交按钮。 我一辈子都无法让这个工作。 这是我到目前为止的代码:
<!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();
});
相关文章:
- HTML范围:动态设置值属性
- 无法使用PHP动态设置下拉列表中的值
- 如何在AngularJS应用程序的主体上动态设置溢出
- 是否可以在调用时动态设置Jquery Accordion的活动面板
- 动态设置谷歌地图缩放
- 动态设置动态创建的元素的宽度
- 如何根据两个不同的输入动态设置链接的路径
- 在使用 Django 静态文件时动态设置映像时,只有绝对路径才能与 jquery 一起使用
- 动态设置页面的背景图像
- 进度条.js动态设置文本
- jQuery timepicker:如何动态设置输入字段的minTime
- 使用Javascript动态设置onKeyUp属性
- 如何保存从单击this.nameClass动态设置的本地存储
- 使用vue.js动态设置v-for
- 如何动态设置填充并在不刷新的情况下显示它
- 在剑道网格中,我可以用一个函数动态设置列属性吗
- Symfony sfValidators:动态设置是否需要值
- 根据移动设备屏幕大小动态设置HighCharts marginTop
- HTML图像布局使用PHP变量,该变量是用JavaScript动态设置的〔o r…〕
- jqgrid在条件下动态设置单元格可编辑false