Javascript 一个HTML表单，具有用于不同任务的多个提交按钮
我发现很多帖子都与我的尝试相反，但没有一篇适合这种情况。我目前拥有的（工作）：Javascript 一个HTML表单，具有用于不同任务的多个提交按钮,javascript,html,forms,Javascript,Html,Forms,我发现很多帖子都与我的尝试相反，但没有一篇适合这种情况。我目前拥有的（工作）： 函数dotask1（a，b）{ window.open（'internal.website.com/'+a++'+b'，'awindow'）； } 函数dotask2（c，d）{ window.open（'internal.website.com/'+c++'+d'，'bwindow'）； } 这允许我在两个表格中分别输入姓名并提交。我希望只有一个表单和两个不同的提交按钮，每个按钮都有一个单独的任务。谢谢你的帮助
函数dotask1（a，b）{
window.open（'internal.website.com/'+a++'+b'，'awindow'）；
}
函数dotask2（c，d）{
window.open（'internal.website.com/'+c++'+d'，'bwindow'）；
}
函数dotask1（a，b）{
window.open（'internal.website.com/'+a++'+b'，'awindow'）；
}
函数dotask2（c，d）{
window.open（'internal.website.com/'+c++'+d'，'bwindow'）；
}
/>
/>
<input type="button" onclick="dostuff();" />
<input type="button"onclick="dostuff2();" />
您也可以离开submit按钮，但是您还必须捕获并停止默认的submit操作 每当我需要这样做时，我都会避免完全使用input type=“submit”，而只使用带有onclick处理程序的按钮
<input type="button" value="Submit Task 1" onclick="function(){dotask1(a,b); return false;}"/>
<input type="button" value="Submit Task 2" onclick="function(){dotask2(c,d); return false;}"/>
以下是我想向您介绍的示例代码这里的目的不是给您一个快速的解决方案，而是向您展示一些下划线模式和实践，供您参考 它比回答您的问题（或解决您的问题-关于按钮输入）更强大/复杂。。。我相信这会引起一些问题，而且（再次）它并不是为了给你一个快速的解决方案 这段代码演示了如何使用JSON（Javascript对象表示法）构造两个对象： 其中一个使用策略模式，并与表单控件耦合。注意，它使用querySelectorAll，而不是getElementById 另一个是抽象json框架，由函数委托处理程序组成，您将以解耦方式绑定到事件侦听器。您将注意到，在我们组合在一起的JSON实例的init函数中，这些函数是赋值的 实例JSON的Run方法调用validate方法，然后调用execute方法。。这是无法解释的
示例代码（混合HTML和内联Javascript）
变量控制处理程序={
“OnExecuteFirstTask”：函数（args）{
args=args | |{“a”：“b”：“uri”：“}；
args.a=args.a | |“”；
args.b=args.b | |“”；
args.uri=args.uri | |（args.a.length>0&&args.b.length>0）？args.a++“+”+args.b:”；
log（“正在执行…[OnExecuteFirstTask]-EventArgs:%o”，args）；
打开窗户http://internal.website.com/“+args.uri，'awindow'）；
},
“OnExecuteSecondTask”：函数（参数）{
args=args | |{“a”：“b”：“uri”：“}；
args.a=args.a | |“”；
args.b=args.b | |“”；
args.uri=args.uri | |（args.a.length>0&&args.b.length>0）？args.a++“+”+args.b:”；
log（“正在执行…[OnExecuteSecondTask]-事件参数：%o”，参数）；
打开窗户http://internal.website.com/“+args.uri，'awindow'）；
},
“OnValidateTask”：功能（arr）{
log（“验证…[OnValidateTask]”；
如果（！（arr））{返回false；}
如果（！（arr.length>0））{return false；}
var isValid=true；
对于（变量i=0；i<input type="button" onclick="dostuff();" />
<input type="button"onclick="dostuff2();" />
<input type="button" value="Submit Task 1" onclick="function(){dotask1(a,b); return false;}"/>
<input type="button" value="Submit Task 2" onclick="function(){dotask2(c,d); return false;}"/>
<html>
<head>
<script type="text/Javascript">
var controlHandlers = {
"OnExecuteFirstTask" : function(args) {
args = args || {"a":"", "b":"", "uri":""};
args.a = args.a || "";
args.b = args.b || "";
args.uri = args.uri || (args.a.length > 0 && args.b.length > 0) ? args.a + "+" + args.b : "";
console.log("Executing... [OnExecuteFirstTask] - EventArgs: %o", args);
window.open('http://internal.website.com/' + args.uri, 'awindow');
},
"OnExecuteSecondTask" : function(args) {
args = args || {"a":"", "b":"", "uri":""};
args.a = args.a || "";
args.b = args.b || "";
args.uri = args.uri || (args.a.length > 0 && args.b.length > 0) ? args.a + "+" + args.b : "";
console.log("Executing... [OnExecuteSecondTask] - EventArgs: %o", args);
window.open('http://internal.website.com/' + args.uri, 'awindow');
},
"OnValidateTask" : function(arr) {
console.log("Validating... [OnValidateTask]");
if (!(arr)) {return false;}
if (!(arr.length > 0)) { return false;}
var isValid = true;
for (var i = 0; i < arr.length; i++)
{
if (!(typeof(arr[i]["IsValid"]) == "function")) {
console.log("NullException: %o - 'IsValid' Method doesn't exist", arr[i]);
return false;
}
if (arr[i].IsValid())
{
arr[i].ctrl.className = "valid";
isValid = true && isValid;
} else {
arr[i].ctrl.className = "invalid";
isValid = false;
}
}
return isValid;
},
"OnTextBoxFocus" : function(ev) {
ev = ev || {"target" : null};
target = ev.target || {"className" : ""};
target.className = "focus";
}
};
var formControl = {
"Task" : {
"First" : {
"Run" : function(ev) {
var task = formControl.Task.First;
task.Validate = task.Validate || function (ev) {return false;};
if (task.Validate(formControl.elms))
{
task.Execute({"a": formControl.FirstNameTextBox.value, "b": formControl.LastNameTextBox.value});
}
},
"Execute" : null,
"Validate" : null
},
"Second" : {
"Run" : function(ev) {
var task = formControl.Task.Second;
task.Validate = task.Validate || function (ev) {return false;};
if (task.Validate(formControl.elms))
{
task.Execute({"a": formControl.FirstNameTextBox.value, "b": formControl.LastNameTextBox.value});
}
},
"Execute" : null,
"Validate" : null
}
},
"elms" : [],
"FirstTaskButton" : null,
"SecondTaskButton" : null,
"FirstNameTextBox" : null,
"LastNameTextBox" : null,
"init" : function() {
formControl.FirstTaskButton = document.querySelectorAll("input#btnFirstTask")[0];
formControl.SecondTaskButton = document.querySelectorAll("input#btnSecondTask")[0];
formControl.FirstNameTextBox = document.querySelectorAll("input#tbFirst")[0];
formControl.LastNameTextBox = document.querySelectorAll("input#tbLast")[0];
formControl.Task.First.Validate = controlHandlers.OnValidateTask;
formControl.Task.First.Execute = controlHandlers.OnExecuteFirstTask;
formControl.Task.Second.Validate = controlHandlers.OnValidateTask;
formControl.Task.Second.Execute = controlHandlers.OnExecuteSecondTask;
formControl.FirstTaskButton.addEventListener("click", formControl.Task.First.Run);
formControl.SecondTaskButton.addEventListener("click", formControl.Task.Second.Run);
formControl.FirstNameTextBox.addEventListener("focus", controlHandlers.OnTextBoxFocus);
formControl.LastNameTextBox.addEventListener("focus", controlHandlers.OnTextBoxFocus);
formControl.elms.push( { "ctrl" : formControl.FirstNameTextBox, "IsValid" : function () { return formControl.FirstNameTextBox.value.length > 0;}});
formControl.elms.push( { "ctrl" : formControl.LastNameTextBox, "IsValid" : function () { return formControl.LastNameTextBox.value.length > 0;}});
}
};
</script>
<style>
input[type="text"].valid {background-color:green;color:white;font-weight:700;text-shadow:0em 0em 0.1em black;}
input[type="text"].invalid {background-color:red;color:white;font-weight:700;text-shadow:0em 0em 0.1em black;}
.invalid::-webkit-input-placeholder {
color: white;
font-weight:700;
text-shadow:0em 0em 0.1em black;
}
.invalid:-moz-placeholder {
/* FF 4-18 */
color: white;
font-weight:700;
text-shadow:0em 0em 0.1em black;
}
.invalid::-moz-placeholder {
/* FF 19+ */
color: white;
font-weight:700;
text-shadow:0em 0em 0.1em black;
}
.invalid:-ms-input-placeholder {
/* IE 10+ */
color: white;
font-weight:700;
text-shadow:0em 0em 0.1em black;
}
</style>
</head>
<body>
<div id="msgBox" style="display:none;">Invalid Entry</div>
<form id="mainForm" name="mainForm">
<div>
<label for="tbFirst">First Name:</label>
<input type="text" id="tbFirst" name="first" placeholder="First" value="" />
</div>
<div>
<label for="tbLast">Last Name:</label>
<input type="text" id="tbLast" name="last" placeholder="Last" value="" />
</div>
<div>
<input type="button" id="btnFirstTask" value="First Task" />
<input type="button" id="btnSecondTask" value="Second Task" />
</div>
</form>
<script>
formControl.init();
</script>
</body>
</html>