Help Version: 2.12
Last Update: 04/08/03

Understanding the difference between HTML Forms and HREF Links

All communication between your html pages and the QuikStore program is done by passing commands and variables into the program. This can be done one of two ways. By either and HTML <form> or by using <a href=> "links". This page describes the difference between how HTML <forms> and <a href=> links work and how you can switch between them to pass information into QuikStore.

ALL inputs from an html page are simply referred to as "name" and "value" pairs. For each "name" there should be a "value". In QuikStore, we use the name to run specific commands OR to pass in a specific "type" of value.

An example of a QuikStore command would be:

<input type="submit" name="add_to_cart" value="Add to Cart">

NOTE: In the case of commands, the value does not really matter. We are just looking to see that the "name" exists with ANY value.

In the case of a specific "type" of value, such as adding an item to the cart, the value does have meaning.

<input type=text name="item-ANK-1632|18.00|SILVER ANKLE BRACELET|NA|NA" value="1">

When used with the add_to_cart command above, this tells the program to run the add_to_cart function and the "item-" name is the "line item" we want to add to the cart. The "value", in this case, tells us how many of that item to add.

HTML <forms> pass inputs using the input, select, radio, checkbox, hidden and submit input html tags like this:

<input type=text name=KEY size=3> (the value is what is typed into the text box)

<input type=hidden name=KEY and value=VALUE>

<select name> ( that NAME)
     <option value> (the selected VALUE)
</select>

etc....

Now, to convert these "name and value pairs" to an A HREF (link), you simply supply each name=value with an "&" between them:

<a href=quikstore.cgi?name=value&nextname=nextvalue&etc...></a>

You can have as many as you need to pass all the information to the program.

It's the same thing as the form input fields...

Here's an example of adding an item to the cart as an HTML <form>:

<form method="post" action="/cgi-bin/quikstore.cgi">
<input type="hidden" name="OPTION|1|ANK-1632" value="BLUE ENAMEL|0|0">
<input type="hidden" name="item-ANK-1632|18.00|SILVER ANKLE BRACELET|NA|NA" value="1">
<input type="hidden" name="store_type" value="html">
<input type="hidden" name="page" value="ankle-bracelets.html">
<input type="image" name="add_to_cart" value="yes" src="images/addtocart.gif">
</form>

Here's the same thing as a link:

<a href="/cgi-bin/quikstore.cgi?add_to_cart=yes&item-ANK-1632|18.00|SILVER ANKLE BRACELET|NA|NA=1&OPTION|1|ANK-1632=BLUE ENAMEL|0|0&page=ankle-bracelets.html&store_type=html">
<img src="images/addtocart.gif" width="85" height="22"></a>

If you look carefully, you will see that each name/value pair is listed in the link and passed into the program. This will do the exact same thing as the form.

The only difference is that it will all be displayed in the browser address line. The POST method used in the form does not do that. However, if you change the "method" in the opening <form> tag to GET, it will display the same link URL as I showed in the example above. This is one way of getting your links. Build your form, click to add to the cart, and read the address line. Give it a try and you will see what I mean...

There is one small difference the <form> code above from a normal <form> that the QuikCode Wizard creates. I changed the submit button "type" to an "image" type. This allows you to use images for your buttons instead of the standard html buttons in your forms. Notice the "src=" tag. This is where you tell it what image to use. Other than that, the name and value are the same. I shortened the value since we really don't care what it is in this case. Any "value", other than blank, in commands is fine.

So, I hope this helps to understand the difference in these 2 types of inputs into the program. Again, If you want to see a link that being posted from a <form>, change the method to GET and it will show in the browser address line when you submit it.

To see a list of commands and examples, click here.

 


Copyright 1997-2003 iSoft-Solutions, inc.