一个HTML表单,其中包含用于不同任务的多个提交按

时间:2014-12-31 18:35:49

标签: javascript html forms

我发现很多帖子与我正在尝试的相反,但没有针对这种情况。我现在拥有的(工作):

<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>

3 个答案:

答案 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和内联Javascript)

<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数组来修改/增长你的'验证包'(可能需要一个比我给它更合适的名字)..