2

How would I go about implementing the functionality that allows for a hidden field value to automatically be filled in depending on the image selected (in this case based off the anchored link) that way it can be passed when the form this menu is inside gets submitted. I figure regexing the anchored link on the next page might be a bit problematic if somebody wanted to be malicious and edit the value after the # before submitting the link. In this case I would like for bug to be passed if the first option is clicked, content for the second, and so on and so forth (basically it fills in whatever is currently in the anchored link)

Menu code - 

<div id="feedback-topic.buttons">
    <a href="#bug"><img src="lib/feedback-bug_off.jpg" alt="bug" width="75" height="49" border="0" class="img-swap" /></a>
    <a href="#content"><img src="lib/feedback-site_content_off.jpg" alt="site_content" width="121" height="49" border="0" class="img-swap" /></a>
    <a href="#suggestion"><img src="lib/feedback-suggestion_off.jpg" alt="suggestion" width="117" height="49" border="0" class="img-swap" /></a>
    <a href="#compliment"><img src="lib/feedback-compliment_off.jpg" alt="compliment" width="120" height="49" border="0" class="img-swap" /></a>
    <a href="#checkout"><img src="lib/feedback-checkout_off.jpg" alt="checkout" width="107" height="49" border="0" class="img-swap" /></a>
    <a href="#other"><img src="lib/feedback-other_off.jpg" alt="other" width="83" height="49" border="0" class="img-swap" /></a>
</div>

jQuery code -

// Allows for only one feedback topic to be selected
$(function(){
    $(".img-swap").live('click', function() {
        this.src = this.src.replace('_off', '_on');
        $('.img-swap').not(this).attr('src', function(index, attr) {
            return attr.replace('_on', '_off');
        });
    });
});
Eric
  • 565
  • 1
  • 8
  • 25

4 Answers4

1
  1. Find the active image.
  2. use the $(this).attr( "href" ) to get the "#link" part.
  3. Use the .substr(1) function to strip off the hash.
  4. Use the .val(value) jQuery function to set the value of a form element based on 3.
Lamariffic
  • 309
  • 1
  • 6
1

Inside your click event handler:

$(this).parent().attr('href')

gives you the href, you can take of the # if you want and just add an input field and set its value using .val()

ori
  • 7,817
  • 1
  • 27
  • 31
0

Add CSS on every Your link and switch styles(or do You want to preload images?.):

CSS

#bug{background:url('lib/feedback-bug_off.jpg');}
#bug.a{background:url('lib/feedback-bug_on.jpg');}

jQuery

$("div#feedback-topic.buttons a").live('click',function(){
    $("div#feedback-topic.buttons a.a").removeClass("a");
    $(this).addClass("a");
    return false;
});
Egor Sazanovich
  • 4,979
  • 5
  • 23
  • 37
0

I'd suggest using the dedicated HTML element for this task - radio buttons. This won't require any javascript programming, images for checked/unchecked state can easily be added with CSS. See CSS selector for a checked radio button's label for examples.

Community
  • 1
  • 1
georg
  • 211,518
  • 52
  • 313
  • 390