CoderLab’s Blog

Multiple Submit Buttons on a Single Form

4 10 2005

At some point, people ask themselves “How can I have two submit buttons with different actions in one form?” Well, the approach I’ve used to accomplish this task is to ‘emulate’ the submit buttons with regular button controls and changing the form action based on what button was clicked.

In the following example I have a text field and 3 different buttons that will send the string to be searched to Google, MSN or Yahoo depending on what button the user clicks.

The Code

So, the JavaScript looks like this:

<script type="text/javascript">
<!--
    function IsBlankField(field){
	var j = 0;
	var chr;

	for(j; j < field.length; j++){
	    chr = field.charAt(j);

	    if(chr != "" && chr != " " && chr != "\n" && chr != "\t"){
		return false;
	    }
	}

	return true;
    }

    function SendTo(id){
        //shortening form elements
        var myForm      = document.getElementById('myForm');
        var txtSearch   = document.getElementById('wrdSearch');
	var srchURL;    // this variable will hold the URL of the search engine to be used
        var srchVar;    // this variable will hold the value of the text field 'name' which will hold the string to be searched 

        if(IsBlankField(txtSearch.value)){
            //if the form doesn't validate, send this alert
            alert("there's nothing to search for!");
        } else{
            if(id == "google"){
		srchURL = "http://www.google.com/search";
		srchVar = "q";
            } else if(id == "msn"){
		srchURL = "http://search.msn.com/results.aspx";
		srchVar = "q";
            } else{
		srchURL = "http://search.yahoo.com/search";
		srchVar = "p";
            }

            //adding the attribute name and values to the form and text field elements
	    myForm.setAttribute("action", srchURL);
	    txtSearch.setAttribute("name", srchVar);
	    myForm.setAttribute("target", "_blank"); //this, of course, will open a new browser window
	    myForm.setAttribute("method", "get");

            myForm.submit();           

        }
    }
//-->
</script>

And the HTML part looks like this:

<form name="myForm" id="myForm">
    Search: <input type="text" id="wrdSearch"/>
    <input type="button" name="google" id="google" value="Google" onClick="SendTo(this.id)"/>
    <input type="button" name="msn" id="msn" value="MSN" onClick="SendTo(this.id)"/>
    <input type="button" name="yahoo" id="yahoo" value="Yahoo" onClick="SendTo(this.id)"/>
</form>

Explanation

In the JavaScript, the IsBlankField(field) function takes as its argument the text field value and will check if it is empty or has space, new line or tab characters. If it does, the function will return true and the form will not validate.

if(IsBlankField(txtSearch.value)){
    //if the form doesn't validate, send this alert
     alert("there's nothing to search for!");
}

The SendTo(id) function takes one argument (the button id) so that we know what button triggered the event. Then we will add the attributes, with the correct values, to the form and text field elements using the DOM setAttribute() method. As you can see in the code sample, this method takes two parameters: the attribute name and the attribute value.

function SendTo(id){
    ....
    ....
    ....

    myForm.setAttribute("action", srchURL);
    txtSearch.setAttribute("name", srchVar); //this will add the name attribute to the text field element
    myForm.setAttribute("target", "_blank");
    myForm.setAttribute("method", "get");

Then, we submit the form.

    myForm.submit();
    ....
    ....
}

In the HTML, notice that the form does not have its name, action and method attributes (nor the text field has its name attribute). As I explained before, they are being added with the DOM setAttribute() method.

<form name="myForm" id="myForm">
    Search: <input type="text" id="wrdSearch"/>
    ....
    ....
</form>

See the demo.

Compatibility

This will work on Firefox 1.0.7, IE 6, Opera 8.01 and Konqueror 3.4.2 (I haven’t tested this on Safari, but most likely it’ll work )

That’s it! Hope this can help to get you started if you ever need to have 2 or more ‘submit’ buttons on one form. And remember, this is one way to do it

Actions

Informations

Date : 4 October 2005
Categories : English, JavaScript & DHTML, Web Development

25 responses to “Multiple Submit Buttons on a Single Form”

4 12 2005

Adam Wilkinson (13:58:52) :

Hi, firstly thanks for the script, it worked fine, than i changed some things, now it doesnt work. Can you see what i have changed to cause this problem?
the site it is on is:
(sites removed because they no longer exist)

THIS IS THE CODE I HAVE CHANGED IT TO:

Mcfluffit Search

function IsBlankField(field){
var j = 0;
var chr;

…
Mcfluffit Search:

if you could help it would be great!

4 12 2005

Adam Wilkinson (13:59:56) :

oops it cut alot of that out, please visit either of the links to see the code

4 12 2005

dolfint (19:33:06) :

Hello Adam,

The search page is not working now because of a typo on line 43 (I looked at the basic page). You have the following:

} else if{id == “torrenthunt”){

Change it to:

} else if(id == “torrenthunt”){

Now, your search page should work.

Also, I’d like to suggest you to use a switch() statement (when you have more than 3 ‘possible’ results) instead of multiple else if() statements.

Hope this helps

Best!

5 12 2005

Adam Wilkinson (00:59:32) :

you are a Legend, thanks!

24 05 2006

Chidiebere (05:19:36) :

thank a million, you are such a help

24 05 2006

Dolfint (09:10:48) :

Glad I can help

12 08 2006

charlie (22:39:29) :

i know this post is pretty old but it was incredibly helpful! thanks for putting it up.

25 08 2006

Jack (11:26:21) :

Thank you for posting this. I changed the button to an image, and it opens two windows in IE. Works fine in Firefox. I am using IE 6. something.

Also why do you have the srchVar = “q”; and other letters?

Thank you,

25 08 2006

Juan Wong (12:01:34) :

@Jack

Okay, srchVar == “q” and “p” because “q” and “p” are the variable those search engines use to hold the string to be searched. Notice that Google, MSN and Yahoo! have in the Query String something like the highlighted part (let’s say we’re going to do a search about “multiple submit buttons on a single form”):

Google:

	http://www.google.com/search?hl=en&lr=&q=multiple+submit+buttons+on+a+single+form&btnG=Search

MSN:

	http://search.msn.com/results.aspx?q=multiple+submit+buttons+on+a+single+form&FORM=QBRE

Yahoo!:

	http://search.yahoo.com/search?p=multiple+submit+buttons+on+a+single+form&fr=FP-tab-web-t500&toggle=1&cop=&ei=UTF-8

Those are the letters I’m using in the srchVar variable.

Now, you said that you’re using images instead of buttons. Did you change the input type to “image” (<input type="image" />)? If so, this might be the reason since it acts like an input of type “submit”. Try changing your code to:

This might fix your problem.

25 08 2006

Jack (13:19:06) :

That worked. Here is the link:

http://nd.edu/~jobrien/wiki5.html

You mentioned a switch statement above, how would this work, and how is it better than multiple if statements.

Tha nkyou so much for getting back to me by the way.

Jack

25 08 2006

Juan Wong (15:51:28) :

@Jack

No problem, glad to be of help.

Now, simply put, a switch statement is faster because and if-else statement evaluates every block until it finds a condition that matches, whereas a switch statement goes directly to the right condition. Also, IMO, is more efficient when dealing with multiple (more than 3) conditions.

Check this: http://www.coderlab.us/samples/switch.txt

If you want, you can replace your if-else statements with the code from the example above.

Also, in your images, you’re using the attribute “value”. You don’t need it there. I’d recommend you to take that attribute out.

Hope this helps.

26 08 2006

Jack (05:33:04) :

Awesome!

Thank you so much, have a great weekend! I will update my code Monday!

Jack

2 09 2006

John Maltes (06:29:39) :

Well, no need of javascript, http://www.w3.org/TR/html4/interact/forms.html
already defined that mutltiple images acn be used as submit button. It’s the standard way !

2 09 2006

Juan Wong (12:39:20) :

@John Maltes

No, it’s not the standard, the specification says is one alternate approach (by the way, I guess you also read the second suggested approach, and when you’d use the first). And what if the developer doesn’t want (or, have) to use images? He/she needs to have a way to make the application work the way he/she wants.

These are the things, IMO, you need to consider when developing something. Besides, like I said at the end of my post: “…remember, this is one way to do it”!

27 07 2007

beatthetouts (09:04:04) :

hi,

I have been trying to implement your form on my website in order to search ebay auctions:

http://www.beatthetouts.com/formpage.htm

I have used the ebay flexible destinations tool in order to set the first part of the search but then I want to add the user’s search string to the end of this to search the category deeper. can you give me any tips?

I also have three text boxes which I want to combine into one search string when I click on some of the submit buttons but ignore when i click others.

Any tips are gratefully received.

Many thanks

30 07 2007

Juan Wong (09:09:56) :

beatthetouts,

Sorry for the delayed reply, I was on vacations.

As soon as I have the chance, I’ll take a look at your page and will get back to you as soon as I can.

9 09 2007

Zsola (04:07:47) :

Hi Juan!

Thanks for the tip!
I combined your code with a switch algorithm, becouse I have to work on several pages with the same form. So, I were looking for a solution, where I can set the targets and the action url’s also. It is working fine.
I don’t like JS so much, but sometimes it is necessary to use.

Thanks, again!
Zsola

9 09 2007

Juan Wong (11:18:43) :

My pleasure

31 10 2007

Rubai Amin (21:50:12) :

Thanks, this is exactly what i have been looking for the last 3 hours for, it very useful

31 10 2007

Juan Wong (22:13:38) :

Glad to be of help!

6 11 2007

Efficient Tips (03:05:50) :

Quite useful when you need to have both “Preview” and “Submit” buttons as submit buttons.

One design suggestion :
You can add “overflow: auto” style rule to your pre tag so that if your code snippet is horizontally long then it will add a scrollbar to it for better usability.

6 11 2007