One HTML form with multiple submit buttons for different tasks

Question

I have found many posts that do the opposite of what I am attempting, but none for this situation. What I currently have (working):

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

This allows me to enter a first and last name into each of two forms and submit. I want to have only one form and two different submit buttons that will each have a separate task. I appreciate any help.

EDIT:

Peter advises to go with onclick, which makes sense. I have the following, which will not work, any thoughts on my error(s)?

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

Any reason you need submit and not just a button with onclick events? — Sparky
– Sparky, Commented Dec 31, 2014 at 18:37
You certainly can have multiple submit buttons, no problem there. So what is your real question? — arkascha
– arkascha, Commented Dec 31, 2014 at 18:38
It looks like onclick is the way to go, working on that now. — Jimmy Morrison
– Jimmy Morrison, Commented Dec 31, 2014 at 18:47
this in your context (onclick) is referring to the input button element, there is no this.a. You should to give your inputs id attributes, and then do document.getElementById('<NameOfTexta>').value. — Brett Caswell
– Brett Caswell, Commented Dec 31, 2014 at 19:24
the obvious typo in your sample post here is that you have to specify the protocal (http|https|ftp|ws|file) in the window.open uri string.. also.. you have a typo behind the b and d.. remove the trailing apostrophe.. — Brett Caswell
– Brett Caswell, Commented Dec 31, 2014 at 22:52

elead1 · Accepted Answer · 2014-12-31 18:39:53Z

1

Whenever I need to do this, I avoid using input type="submit" entirely and just use buttons with onclick handlers.

<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;}"/>

answered Dec 31, 2014 at 18:39

elead1

1611 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brett Caswell · Accepted Answer · 2015-01-01 00:08:55Z

The following is sample code I wanted to introduce to you. The intent here is not to give you a quick solution, but to show you some underline patterns and practices for your consideration.

It is more robust/complex then is required to answer your question (or fix your issue - in regards to the button inputs)... I'm sure it will raise questions, and (again) it isn't intended to be a quick solution for you.

This code is demonstrating how you can use JSON (Javascript object notation) to construct two objects:

One uses a strategy pattern and is coupled to your form controls. Note that it uses querySelectorAll, not getElementById.

The other is an abstract json framework, composed of function-delegate handlers that you'll bind to event listeners: in a decoupling manner. You'll note in the init function of the JSON instance we put together, that these functions are assigned..

The Run method of the instance JSON, calls on the validate method, followed by the execute method.. which it doesn't (can't) account for.

Sample Code (Mix - HTML & Inline 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>

that's the strategy. assigning a new function to formControl.Task.First.Execute at some point after it has been initiated (formControl.init) means it will execute that function after validating..

of course, the new method assigned to the Task.First.Execute will receive the 'argument' parameter {"a": firstname, "b": lastname}.. which may or may not be useful, right?

so, a more robust argument would likely become more desirable..

in turn, you can modify/grow your 'validation bag' by working with the formControls.elms array (which may need a more suitable name then the one I gave it)..

I updated this: there was a consistent typo.. and I added the open window functionality in the OnExecuteFirstTask and OnExecuteSecondTask methods to make it fully functional to the OP scenerio
note: you should always specify a DOCTYPE (it was removed in my paste here).. also, depending on whether you can configure your web server or not, you may want to add in the proper meta headers, specifying IE compatibility mode to be Edge (stackoverflow.com/questions/4275356/…).
This is absolutely huge. I am adding my own elements and it appears to solve my need. I hope this helps others. Thank you!
I will have many questions, but I will take some time to play with this and try to learn each piece.
That did it. This is perfect. Thank you again. I do use F12 in Chrome

Peter Jewicz · Accepted Answer · 2014-12-31 18:39:27Z

0

Remove the on submit from the form and attach it to the button itself.

<input type="button" onclick="dostuff();" />
<input type="button"onclick="dostuff2();"  />

Then have each one submit to the specific function you want it to.

You could also leave the submit button, but you'll have to catch and stop the default submit action as well.

answered Dec 31, 2014 at 18:39

Peter Jewicz

6761 gold badge11 silver badges27 bronze badges

4 Comments

Jimmy Morrison Over a year ago

That makes sense. I edited my post with the changes, can you see what my error is?

Lal Over a year ago

It should be window.open('internal.website.com/' + a + '+' + b +', awindow');..i think

Peter Jewicz Over a year ago

What @lal said I think should work, try that and see.

Jimmy Morrison Over a year ago

Both ways would not load a new window. I will keep playing. Thanks.

Collectives™ on Stack Overflow

One HTML form with multiple submit buttons for different tasks

3 Answers 3

Comments

Sample Code (Mix - HTML & Inline Javascript)

9 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Sample Code (Mix - HTML & Inline Javascript)

9 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related