我发现很多帖子与我正在尝试的相反,但没有针对这种情况。我现在拥有的(工作):
<script type="text/javascript">
function dotask1(a, b) {
window.open('internal.website.com/' + a + '+' + b', 'awindow');
}</script>
<form onsubmit="dotask1(this.a.value, this.b.value); return false;">
<input type="text" name="a" placeholder="First Name" />
<input type="text" name="b" placeholder="Last Name" />
<input type="submit" />
</form>
<script type="text/javascript">
function dotask2(c, d) {
window.open('internal.website.com/' + c + '+' + d', 'bwindow');
}</script>
<form onsubmit="dotask2(this.c.value, this.d.value); return false;">
<input type="text" name="c" placeholder="First Name" />
<input type="text" name="d" placeholder="Last Name" />
<input type="submit" />
</form>
这允许我在两个表单中输入名字和姓氏并提交。我想只有一个表单和两个不同的提交按钮,每个按钮都有一个单独的任务。我感谢任何帮助。
编辑:
彼得建议使用onclick,这是有道理的。我有以下哪些不起作用,对我的错误有任何想法?
<script type="text/javascript">
function dotask1(a, b) {
window.open('internal.website.com/' + a + '+' + b', 'awindow');
}
function dotask2(c, d) {
window.open('internal.website.com/' + c + '+' + d', 'bwindow');
}
</script>
<input type="text" name="a" placeholder="First Name" />
<input type="text" name="b" placeholder="Last Name" />
<input type="button" onclick="dotask1(this.a.value, this.b.value); return false;"/> />
<input type="button" onclick="dotask2(this.a.value, this.b.value); return false;"/> />
</form>
答案 0 :(得分:1)
每当我需要这样做时,我都避免使用输入类型=&#34;提交&#34;完全只需使用带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;}"/>
答案 1 :(得分:0)
从表单中删除on submit并将其附加到按钮本身。
<input type="button" onclick="dostuff();" />
<input type="button"onclick="dostuff2();" />
然后让每个人都提交给你想要的特定功能。
您也可以保留提交按钮,但您也必须捕获并停止默认的提交操作。
答案 2 :(得分:0)
以下是我想向您介绍的示例代码。 此处的目的不是为您提供快速解决方案,而是为您展示一些下划线模式和做法供您考虑。
它更健壮/更复杂然后需要回答你的问题(或修复你的问题 - 关于按钮输入)...我相信它会提出问题,并且(再次)它不是意图为您提供快速解决方案。
此代码演示了如何使用JSON(Javascript对象表示法)构造两个对象:
一个使用策略模式并与表单控件耦合。请注意,它使用querySelectorAll,而不是getElementById。
另一个是一个抽象的json框架,由函数委托处理程序组成,你将绑定到事件监听器:以解耦的方式。您将在我们放在一起的JSON实例的init函数中注意到,这些函数已分配..
实例JSON的Run方法调用validate方法,然后调用execute方法..它不能(不能)解释。
<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>
这就是策略。将一个新函数赋值给formControl.Task.First.Execute在它启动后的某个时刻(formControl.init)意味着它将在验证后执行该函数..
当然,分配给Task.First.Execute
的新方法会收到'参数'参数{"a": firstname, "b": lastname}
..这可能有用也可能没用,对吧?
所以,更有力的论证可能会变得更加可取。
反过来,你可以通过使用formControls.elms数组来修改/增长你的'验证包'(可能需要一个比我给它更合适的名字)..