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