getting a <form> button to work properly

Hello there,

I am trying to get a dropdown form to work in my php template file. I have the form with the options working appropriatly.

            <!--Apparel DropDown-->
            <p>Select Style:</p>
            <form name="apparel">
                <p align="center">
                    <select name="menu">
                    <option selected>Choose Style:</option>
                    <option value="<?php get_custom_field('buy_now1', TRUE); ?>">Standard</option>
                    <option value="<?php get_custom_field('buy_now2', TRUE); ?>">American Apparel | +$3</option>
                    <option value="<?php get_custom_field('buy_now3', TRUE); ?>">Standard Long-Sleeve | +$4</option>
                    <option value="<?php get_custom_field('buy_now4', TRUE); ?>">Women's T-Shirt</option>
                    <option value="<?php get_custom_field('buy_now5', TRUE); ?>">Kid's T-Shirt</option>
                    <option value="<?php get_custom_field('buy_now6', TRUE); ?>">Kid's Long-Sleeve | +$2</option>
                    </select>
                    <input type="button" onClick="location=document.apparel.menu.options[document.apparel.menu.selectedIndex].value;" value="GO">
                </p>
            </form>
            <!--end Apparel Dropdown-->

Now that code as I mentioned works. I add URLs into the custom fields into wordpres; buy_now1, buy_now2, etc. However that's not the issue. My template file has these lines of code following the form code above:

                <input type="hidden" id="amount" name="amount" value="<?php echo $value[0];?>"/>     
                <input type="hidden" name="buy_now" value="<?php get_custom_field('buy_now', TRUE); ?>" />         
                <input type="hidden" name="currency_code" value="<?php echo $OPTION['wps_currency_code']; ?>" /> 
              
                <?php } ?> 
                 
                <input type="hidden" name="add" value="1" /> 
                 
                <div class="shopform_btn buy_now"> 
                    <a href="<?php get_custom_field('buy_now', TRUE); ?>" <?php if($OPTION['wps_affili_newTab']) { ?> title="<?php _e('Opens is new tab','wpShop'); ?>" target="_blank"<?php } ?>><?php _e('Buy Now','wpShop'); ?></a> 
                </div>

What I need to have happen is get the dropdown "GO" button to work as the new a href under div "shopform_btn buy_now". Basically depending on what is selected in the dropdown, the buy_now button changes to that URL. I have tried to replace <a href="<?php get_custom_field('buy_now', TRUE); ?>" with <a onClick="location=document.apparel.menu.options[document.apparel.menu.selectedIndex].value;" However that did not work, it just got me my 404 error page.

Does that make sense? Please ask if I can help explain.

I really appreciate any help on this matter.

Lorne

maybe with something like:

<input type="button" onClick="lnk=this.form.menu;self.location=lnk.options[lnk.selectedIndex].value;" value="GO">

this is purely a javascript question, even though you have php code. Maybe if you post in the javascript forum you'll get a better result. try my code though, you never know...

Ok so I have that implemented to this site.  http://activestatedesigns.com/flagsilhouettes/colorado/coflag01  Still not working though.  Any thoughts?

Also how do I get that "GO" button to look like my buy_now button.  That buy_now image is called in via CSS, but with this being javascript I don't know how to make the button an image?

Thanks in advance,

Lorne

What do you mean? I pressed the button (or what's left of it) and it redirected properly.

The fact that it looks weird and too small is because you added class="test" to the code.

Basically you now have a CSS problem, there's a specific forum for that.

That buy_now image is called in via CSS, but with this being javascript I don't know how to make the button an image?

The button is HTML, the link code is JavaScript, and the style you're applying to the button is CSS.

Sorry,

Since I last posted and you read it, I added a blank form:

<form>
</form>

and it works...really odd.  But oh well.

I also have been playing with the class and css and have the correct css on it, but can't quite seem to get the a:hover effect to work and move the image -30px up. 

Ideas?

Thanks,

Lorne

well, now it's a specific CSS question. So you're in the wrong forum. But this should help:

a.button:hover {background-position: 0 -30px;}