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 
J
Recent Comments