CoderLab’s Blog

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

I’ve read on different forums questions of people asking how they can make the innerText property work in Firefox. Many have suggested to use the innerHTML property instead, but that would not be useful because, obviously, the HTML tags would be either rendered or displayed (an example of the latter would be if we want such text to be displayed in a textarea or text field) giving undesired effects.

Well, in short, Firefox does not support the innerText property. Instead, it supports the textContent property.

So, you could ‘sniff’ what browser the user is using and use the correct property accordingly.
So, you could check for the browser’s feature support to use the correct property accordingly (this is better than sniffing )

Example (updated):

if(document.all){
     document.getElementById('element').innerText = "my text";
} else{
    document.getElementById('element').textContent = "my text";
}

That’s it. Hope it helps

J

Addendum:
See also: The textContent and innerText Properties. This post will help you to make the innerText property work in Safari too

–

A post on how Google Suggest works has been written by Chris Justus on his blog.

This is a very good article and I’m sure it will be as useful to other webdevs as it has been for me.

Searching for a site that would have a list of User Agent IDs, I came across a website with a detailed list of Browser ID Strings (a.k.a. User Agent ID).

This can prove useful to a developer who wishes, like they say in their site, to make the fewest checks possible for the browser environment – or how to optimise the display or … to know who and what is crawling around your site.

J

This is a great and simple example/tutorial on AJAX by Rasmus Lerdorf (the creator of PHP).

It’s just AWESOME!

Rasmus’ 30 second AJAX Tutorial

(Original Post @ php-general mailing list)

It’s really annoying to find websites that have the words “click here” to link to other pages… And is very bothersome to find people or companies that use this bad linking practice because ‘other people/companies do it and it works for them’ … WHAT?? To me, that’s just a lame excuse.

If you’re gonna follow the example of other people (to do what has worked for them), can’t you have the ‘imagination’ to at least improve it, and hence, make it better? Do you have to make it the ‘same’ way because ‘if it has worked for them, it will work for you”? BAH!

It is my personal opinion that there is nothing wrong to follow good examples, but it would be a better idea to discard the bad ones and, like I said, make it better.

There is a very useful article that explains why “click here” is a bad linking practice. Some of points of why it is a bad practice are:

• “Click here” just looks stupid.
• “Click here” looks especially stupid when printed on paper.
• “Click here” is bad food for search engines.

The W3C (World Wide Web Consortium) has a QA tip called ‘Don’t say “click here” as link text‘. It recommends that:

When calling the user to action, use brief but meaningful link text that:

• provides some information when read out of context
• explains what the link offers
• doesn’t talk about mechanics
• is not a verb phrase

Also, the W3C in the HTML Techniques for Web Content Accessibility Guidelines 1.0, Section 6.1 Link text, explains:

Good link text should not be overly general; don’t use “click here.” Not only is this phrase device-dependent (it implies a pointing device) it says nothing about what is to be found if the link if followed. Instead of “click here”, link text should indicate the nature of the link target, as in “more information about sea lions” or “text-only version of this page”.

So, in conclusion, death to “click here” text link! >:D

———-
You know what really makes me mad? EVERYTHING!!! – Ranting Swede

Hoy es agosto 7 del 2005 y todavía estoy trabajando en el sitio…

Además, he estado ocupado trabajando en otros proyectos.

Aunque este proyecto parezca pequeño, es todo lo contrario. El escribir artículos y tutoriales lleva tiempo, especialmente cuando lo estoy haciendo en dos idiomas.

Es posible que rediseñe la apariencia del sitio. Esto es porque ‘descubrí’ una nueva técnica en CSS que quisiera aplicarla aqui, pero es algo que todavía tengo que pensar si lo hago o no.

J