Question

I have a form, in it where is an icon.

Currently, to select between true and false. There is a combo box underneath the icon, however, what I need to do is to be able to switch states depending on the icon in the combo box itself. If the boolean in the database is false, X will appear, BUT if someone clicks on the X the boolean in the database is then set to true, with the icon changing into a tick.

How can I achieve this? I have looked into jquery but it isnt quite what I am looking for.

Cheers.

Answer 1

It is what you are looking for, you just don’t know how to take advantage of it.

First you need to setup your form correctly, you can inspire yourself from this:

<form>
    <select name="myselectcheckbox" id="myselectcheckbox">
        <option value="X"<?php if($data['myselectcheckbox'] == 'X'){ echo ' selected="selected"'; ?>>Yes</option>
        <option value=""<?php if($data['myselectcheckbox'] == ''){ echo ' selected="selected"'; ?>>No</option>
    </select>
</form>

That should do it for the form element, the code for the jQuery will be this:

<script>
$(function(){
    $('#myselectcheckbox').hide().append('<a href="#" id="myselectedcheckbox_toggler"><img src="checkbox.gif"></a>');
    $('#myselectedcheckbox_toggler').click(function(){
        if($('#myselectcheckbox').val() == 'X'){
            $('#myselectcheckbox').val('');
            $('#myselectedcheckbox_toggler img').attr('src', 'checkbox.gif');
        }else{
            $('#myselectcheckbox').val('X');
            $('#myselectedcheckbox_toggler img').attr('src', 'checkbox-checked.gif');
        }
    });
});
</script>

That sounds about right, test it out and try to do the rest by yourself. The code is pretty self explanatory, i couldn’t help you more than that.

Good luck