Return "values" of img when clicked on

[AndreRet]

# Please see attached image #

a User will click on an img which in return will either show -
-if unchecked is visible, checked image will be visible (javascript used for this)
-and vice versa.

I have no idea how to achieve the following -
If a user clicks (check) an img, I need to return that value i.e. Airconditioner's check has been checked, img has a name of "features2" and its alt attribute set to "Airconditioner"
If a user clicks (check) another img, I need to return that value i.e. Antilock Brakes's check has been checked, img has a name of "features3" and its alt attribute set to "Antilock Brakes"

I'm not sure how to build up a string with all selections made by the user. In vb6 we used to do this "txtFeatures.Text = txtFeatures.Text & "a new selection here" which will then be the already contained text in textbox txtFeatures plus the new addition - "a new selection here".

I now need to add this values/text's to a hidden input which will be a build up string as above of all the users selections, this will then be added to my database into a field called "features" (I know how to do the data part - no help needed here, just help on how to add the values to a hidden input)

Additional (if at all possible), if a user de-selects an option, How will I know how to remove that item from the list. In vb6 it was quite easy, every clicked checkbox added a value to a list box. If user de-selects that, you just get the index of the list item (which was the same as the checkbox) and remove the item.

As you can see, there is no code, I have no idea where to begin. Any ideas will be appreciated thanx people.
All the searches I've done gives me samples on how to change the attr or titles of img etc. Nothing on the above could be found.

[pritaeas]

IIRC the jquery-ui allows styling of checkboxes. So if you use a regular from with styled checkboxes you don't have a problem I think.

[jkon]

Well this has nothing to do with PHP, but I hill give you a hint using jQuery (I could do it also without it but to be honest jQuery is nowadays something like standard in web UI). I am using also jQuery to set the values of the hidden field of a from , of course in real life jQuery should be only for presentation and any other logic layer should be done by native (or the framework that is used) JS forms logic.

Also I am having the script inside the page witch never should do … I also assume that a second click in the selected … uncheck it … and that the values are unique. Last but not least here I am using the domain hard coded , of course you should have the base of the site also as a PHP variable (through a Controller maybe) and through JS

<img class='featureBtn' src="http://example.com/unchecked.png" width="30px" height="30px"  alt="Antilock Brakes"/>
<img class='featureBtn' src="http://example.com/unchecked.png" width="30px" height="30px"  alt="Airconditioner"/>
<input type="hidden" name="feature" value="" /> 
<script language="JavaScript">
    $(".featureBtn").click(function()
    {
        value = $(this).attr("alt"); 
        featureValue = $('[name=feature]').val();
        $(".featureBtn").attr("src","http://example.com/unchecked.png")
        if(value != featureValue)
        {
            $(this).attr("src","http://example.com/checked.png")
            $('[name=feature]').val(value);
        }   
        else 
        {
            $('[name=feature]').val("");
        }
    });
</script>

[AndreRet]

Thanks, Let me dig into this. will reply in a few.

[AndreRet]

@jkon, thanx. Exactly what I needed. Not 100% yet though.

I am creating the hidden inputs through a loop, which assigns a name to each one (65 in total). Using your code, how can I change the java to cover each of the 65? - code to create inputs...

echo '<input type="hidden" name="features'.$count.'" value="" />';

As you can see, a name is attached to a counter up to 65...

In your code...

value = $(this).attr("alt"); 
        featureValue = $('[name=feature]').val();

how can I check which image was clicked - name=feature37 for instance?

[jkon]

Let me get it right … Do you have 65 hidden fields for the same scope e.g. feature ? If so why ? … Can anyone select more than one? .. Or there are 65 different sets that each one has its own images to choose and its own hidden field ?

[jkon]

The name you can get it as the alt attribute … if all have the same class e.g. $(this).attr("name");  ... 

[AndreRet]

Yes, a user can select more than 1 feature. These are features found in a motorvehicle, so certain vehicles has many features. So, each hidden field will capture a said feature. When the user submits the form, I will build the features string (already got that part sorted out) and I will then add the data to my database. The string might look something like this - "Airconditioner, MP3/CD, Leather Seats, Power Steering, Power Mirrors, Power Windows, Alloy Wheels", hence the multiple select option.

That means that they can select and de-select features at will until the form is submitted. It seems that the code you supplied is acting more like an option choice where a user can only make 1 selection. :)

[jkon]

I will change you a bit how you format the final data since I don’t want to keep static like variables or check each time which is first or last … So the data separation here is [data1][data2]

    <img class='featureBtn' src="http://example.com/unchecked.png" width="30px" height="30px" alt="Antilock Brakes"/>
    <img class='featureBtn' src="http://example.com/unchecked.png" width="30px" height="30px" alt="Airconditioner"/>
    <input type="hidden" name="feature" value="" />
    <script language="JavaScript">
    $(".featureBtn").click(function()
    {
        value = $(this).attr("alt");
        featureValue = $('[name=feature]').val();

        if(stringContains(featureValue,"["+value+"]"))
        {
            $(this).attr("src","http://example.com/unchecked.png")
            featureValue = featureValue.replace("["+value+"]",""); 
            $('[name=feature]').val(featureValue);
        }
        else
        {
            $(this).attr("src","http://example.com/checked.png")
            $('[name=feature]').val(featureValue+"["+value+"]");
        }
    });

    function stringContains(str,search)
    {
        return str.indexOf(search) != -1;
    }
    </script>

[AndreRet]

And Voila, problem solved. Thanks a lot jkon.