Image checkbox

[bunglebrown]

Is it possible to substitute a checkbox for an image so that I can post user selections to myself? If so can anyone suggest how..?

I've used

input type='image' value='Submit'

to make an image a submit button so I am hoping I can do something similar with the checkbox.

Indebted

[scopey]

I don't really understand but if you are trying to substitute the normal, semi-ugly checkboxes for your own images, it's possible with a bit of javascript.

Quickly written code below (untested):

<script type="text/javascript">
var chkboxTicked = new Image();
chkboxTicked.src = "chkbox_ticked.png";
var chkboxEmpty = new Image();
chkboxEmpty.src = "chkbox_empty.png";
function submitcheckboxes(){
var checkboxes = document.getElementsByName("imgcheckboxes");
for(var i in checkboxes){
var location = document.getElementById("form1");
var input = document.createElement('input');
input.setAttribute('style','display:none;');
input.setAttribute('type','hidden');
input.setAttribute('name',checkboxes[i].title);
if(checkboxes[i].src = "chkbox_ticked.png"){
input.setAttribute('value',1);
} else {
input.setAttribute('value',0);
}
location.appendChild(input);
}
return true;
}
function toggleChkBox(that){
if(that.src == chkboxEmpty.src){
that.src = chkboxTicked.src;
} else {
that.src = chkboxEmpty.src;
}
}
</script>
<form id="form1" onsubmit="return submitcheckboxes()">
<img name="imagecheckboxes" src="http://forums.x10hosting.com/programming-help/chkbox_empty.png" onclick="toggleChkBox(this)" title="checkbox1" />
<img name="imagecheckboxes" src="http://forums.x10hosting.com/programming-help/chkbox_empty.png" onclick="toggleChkBox(this)" title="checkbox2" />
</form>

Just need to make two images called chkbox_empty.png and chkbox_ticked.png

[bunglebrown]

seems good and from there ... how do I get this information posted to me on the next page as I seem to be having a little trouble with the php coding that I have used on previous forms. It is below.

<script language="php">
$email = $HTTP_POST_VARS[email];
$mailto = "my.email@myhost.com";
$mailsubj = "Title";
$mailhead = "From: $email\n";
reset ($HTTP_POST_VARS);
$mailbody = "Data received:\n";
while (list ($key, $val) = each ($HTTP_POST_VARS)) { $mailbody .= "$key : $val\n"; }
if (!eregi("\n",$HTTP_POST_VARS[email])) { mail($mailto, $mailsubj, $mailbody, $mailhead); }
</script> 

[scopey]

$HTTP_POST_VARS is now deprecated... Use $_POST[] instead.

To get whether the person ticked your checkbox or not, you just need to get $_POST['(Title of your checkbox img tag here)'] . The value should be 1 if it was ticked, and 0 if it was left empty. The code is probably buggy though... I will give it a test.

[Edit]

Wow, suprised I almost got my script perfect. The only mistakes I made was a couple of typos:

<script type="text/javascript">
var chkboxTicked = new Image();
chkboxTicked.src = "chkbox_ticked.png";
var chkboxEmpty = new Image();
chkboxEmpty.src = "chkbox_empty.png";
function submitcheckboxes(){
var checkboxes = document.getElementsByName("imagecheckboxes");
for(var i in checkboxes){
var location = document.getElementById("form1");
var input = document.createElement('input');
input.setAttribute('style','display:none;');
input.setAttribute('type','hidden');
input.setAttribute('name',checkboxes[i].title);
if(checkboxes[i].src == chkboxTicked.src){
input.setAttribute('value',1);
} else {
input.setAttribute('value',0);
}
location.appendChild(input);
}
return true;
}
function toggleChkBox(that){
if(that.src == chkboxEmpty.src){
that.src = chkboxTicked.src;
} else {
that.src = chkboxEmpty.src;
}
}
</script>
<form id="form1" onsubmit="return submitcheckboxes()">
<img name="imagecheckboxes" src="http://forums.x10hosting.com/programming-help/chkbox_empty.png" onclick="toggleChkBox(this)" title="checkbox1" />
<img name="imagecheckboxes" src="http://forums.x10hosting.com/programming-help/chkbox_empty.png" onclick="toggleChkBox(this)" title="checkbox2" />
</form>

[bunglebrown]

scopey this code looks good but I'm having a few problems with my php - I changed all the $HTTP_POST_VARS to $_POST[] but it doesn't want to work for me and I didn't know quite in what place to enter the $_POST[checkbox1].

...code looks awesome though/.

[scopey]

Ok... This is the PHP page I was testing it with:

<?php
print_r($_POST);
?>

<script type="text/javascript">
var chkboxTicked = new Image();
chkboxTicked.src = "test/chkbox_ticked.png";
var chkboxEmpty = new Image();
chkboxEmpty.src = "test/chkbox_empty.png";
function submitcheckboxes(){
    var checkboxes = document.getElementsByName("imagecheckboxes");
    for(var i in checkboxes){
        var location = document.getElementById("form1");
        var input = document.createElement('input');
        input.setAttribute('style','display:none;');
        input.setAttribute('type','hidden');
        input.setAttribute('name',checkboxes[i].title);
        input.setAttribute('id',checkboxes[i].title);
        location.appendChild(input);
        if(checkboxes[i].src == chkboxTicked.src){
            document.getElementById(checkboxes[i].title).value = "1";
        } else {
            document.getElementById(checkboxes[i].title).value = "0";
        }
    }
    return true;
}
function toggleChkBox(that){
    if(that.src == chkboxEmpty.src){
        that.src = chkboxTicked.src;
    } else {
        that.src = chkboxEmpty.src;
    }
}
</script>
<form id="form1" method="post" action="tester.php" onsubmit="return submitcheckboxes()">
<img name="imagecheckboxes" src="test/chkbox_empty.png" onclick="toggleChkBox(this)" title="box1" />
<img name="imagecheckboxes" src="test/chkbox_empty.png" onclick="toggleChkBox(this)" title="box2" />
<input type="submit" name="submit" />
</form>

For me, that returned:

Array (     [submit] => Submit Query     [box1] => 0     [box2] => 1     [undefined] =>  )

See the names of my image tickboxes are box1 and box2? That's how the tickboxes are submitted.

So, if you put in php:

<?
if($_POST['box1'] == 1){
print "Box 1 was ticked";
}
?>

It will write 'Box 1 was ticked' if box 1 was ticked.

Similarly, you can just write the following for the same result:

<?
if($_POST['box1']){
print "Box 1 was ticked";
}
?>

[bunglebrown]

That's very useful scopey. . .thanks a lot. I just need to mail it to myself now and if possible remove the ones that haven't been checked. Also wanted to ask you if it was possible to make the images on the results page the same as they were as they were submitted on the previous but I don't want to ask too much of you so anything more you can add or not is great - you've really helped me already. .
-------------------------------------------------------------------------------------------------------------------------
Here is the php (below) that I have it working for but wanted to ask if it is possible to have only the images selected mailed to me. . . . without being too picky.

<?php 

// Create local PHP variables from the info the user gave in the Flash form -disabled message field 
$box1   = $_POST['box1']; 
$box2   = $_POST['box2']; 

// Strip slashes on the Local variables -disabled message field 
$box1  = stripslashes($box1); 
$box2      = stripslashes($box2); 

    $from = $fromEmail; 
    $subject = "Spaces chosen"; 
    //Begin HTML Email Message 
    $message = "<b>Box 1:</b><br>{$box1} <br><br> <b>Box 2:</b><br>$box2";
    
    echo '
';
   //end of message 
    $headers  = "From: $from\r\n"; 
    $headers .= "Content-type: text/html\r\n"; 
    $to = "reg.brooks@hotmail.com"; 

    mail($to, $subject, $message, $headers); 
     
exit(); 
?>

[Salvatos]

Sure that should be easy. I've not gone through your whole discussion but from what I remember correctly, the logic in my opinion would be this.

After

$box1  = stripslashes($box1);
$box2      = stripslashes($box2);

Add

if ($box1 == "1") { // If the box is ticked
$box1 = "<img src='test/chkbox_ticked.png'>";
}
else {
$box1 = "<img src='test/chkbox_empty.png'>";
}

if ($box2 == "1") { // If the box is ticked
$box2 = "<img src='test/chkbox_ticked.png'>";
}
else {
$box2 = "<img src='test/chkbox_empty.png'>";
}

You should include the whole path of the image (starting with http://) for your browser to find it when you read it in your e-mail though. If I'm not mistaken, this should echo your boxes images instead of the number that represents their value.

[bunglebrown]

thanks Salvatos...

this is a nice idea but doesn't seem to send the images as they were submitted..

Also what I meant to say is that I want the images to be as they were on the next page and only the title of the selected images mailed to me (the mailing has been achieved). .

Would be unreal if this worked though..

[Salvatos]

When you say "next page", do you mean that you want to replace this

if($_POST['box1'] == 1){
print "Box 1 was ticked";
}

By the image?