How to Make a Text Link Submit A Form (JavaScript)

Make your text links work like a submit button and send your form contents


How to Make a Text Link Submit A Form

by Christopher Heng, thesitewizard.com

Every now and then, I get a question from one of my visitors at thesitewizard.com asking how a text link can be made to work like a submit button in submitting the contents of a form. This is easily done, with the help of a bit of JavaScript.

For the uninitiated, the usual way that the contents of a form is submitted is when someone clicks on a button created with HTML (or XHTML) code like the following:

<input type="submit" />

Alternatively, some people prefer to replace the default button with a graphical image. If the image is called, say, "buttonimage.gif", the code to do this might take the following form:

<input type="image" src="buttonimage.gif" />

Search as you might, you will probably not be able to find any documentation in your HTML manual on how you can make a text link function as though a submit button has been clicked. And no wonder. HTML does not directly support such a feature.

The JavaScript Code

If you want the contents of a form submitted when a text link is clicked, you will need a little help from JavaScript. Needless to say, if this is the only way your form can be submitted, your form will never be used by visitors who do not have JavaScript enabled in their browsers.

Let's say you have a form that begins in the following way:

<form name="supportform" method="post" action="yourscriptname.cgi">

Now, suppose you want to have two text links, one of which is for "Paid Support" and the other for "Free Support". Clicking either of these text links is supposed to cause the form to be submitted, with some device to indicate which link was clicked.

The code to implement this is simple. First, place the following JavaScript code somewhere on your page, such as in the HEAD section of your document.

<script language="JavaScript" type="text/javascript">
<!--
function getsupport ( selectedtype )
{
  document.supportform.supporttype.value = selectedtype ;
  document.supportform.submit() ;
}
-->
</script>

Now add the following to your form prior to the closing FORM tag.

<input type="hidden" name="supporttype" />
<a href="javascript:getsupport('Paid')">Paid Support</a> or
<a href="javascript:getsupport('Free')">Free Support</a>

As you can see from the FORM snippet, when the text link "Paid Support" is clicked, getsupport will be called with the string "Paid". Likewise, when the text link "Free Support" is clicked, getsupport will be called with the string "Free" in its argument.

The function getsupport sets the form variable "supporttype", which you defined as a hidden field in the form, to the string given in its argument. This is "Free" or "Paid" depending on which link was clicked. It then submits to form to the CGI script you defined in the "action" attribute of the FORM tag.

Modifying the Form

You will probably want to modify or extend the form to suit your purposes. For example, you might want to change the name of the variable "supporttype" in the code or add more possible values that can be assigned to it. Whatever you do, remember to synchronize your JavaScript code with your form code. For example, if you change "supporttype" to something else in the JavaScript code, remember to change the hidden INPUT tag to contain your new name as well.

Conclusion

There you have it. A text link that can be used to submit a form. Trivial, isn't it?

Bear in mind, though, before you rush out to implement this in your forms, that if your visitor does not have JavaScript enabled in their web browsers, nothing will happen when they click the link. As such, you should weigh the advantage of having this novelty on your site against the cost of excluding non-JavaScript users.

Copyright 2000-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Make a Text Link Submit A Form Just Like a Submit Button





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.