CODEWITHSUNDEEP
phpjavascriptjqueryhtmlcss
Eric
Eric

Reputation: 575

How to have jQuery fill in hidden form depending on image selected

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');
        });
    });
});

Upvotes: 2

Views: 218

Answers (4)

georg
georg

Reputation: 215009

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.

Upvotes: 0

Egor Sazanovich
Egor Sazanovich

Reputation: 5089

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;
});

Upvotes: 0

ori
ori

Reputation: 7847

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()

Upvotes: 1

Lamariffic
Lamariffic

Reputation: 309

  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.

Upvotes: 1

Related Questions