Edit: I'm not a pro so maybe you want to make a copy of your files before testing my suggestions
Okay, then... I don't like to give too much of my own advice on Scopey's code but I think you could use this and edit a bit if it doesn't seem to suit your case. Explanations to follow.
Code:
<?php
// Boxes empty by default
$img_box1 = "test/chkbox_empty.png";
$img_box2 = "test/chkbox_empty.png";
// Tick boxes if user has ticked them
if($_POST['box1'] == 1){
$img_box1 = "test/chkbox_ticked.png";
}
if($_POST['box2'] == 1){
$img_box2 = "test/chkbox_ticked.png";
}
?>
<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="<? echo "$img_box1"; ?>" onclick="toggleChkBox(this)" title="box1" />
<img name="imagecheckboxes" src="<? echo "$img_box2"; ?>" onclick="toggleChkBox(this)" title="box2" />
<input type="submit" name="submit" />
</form>
So this code assumes that you are on tester.php when you fill the form and that you send it to the same page. At first you set the path of the images to empty, by default, so if the user is coming to the page for the first time the boxes will be empty.
Then, if the form has been sent and a box ticked, its image path will be changed accordingly.
You then have the JavaScript that I didn't change and finally the form is displayed, with its images depending on if it has been sent already or not (again, they will be empty by default).
Now I'm not really sure about how you're working on this. I don't know if you have all this in one page or two. If it's on one page, you can just do this to include your e-mail sending function, probably at the very beginning:
Code:
if (isset($_POST['box1']) && $_POST['box1'] != "" && isset($_POST['box2']) && $_POST['box2'] != "") {
// insert your e-mail code here
}
If, on the other hand, you have it on two pages (for example test.php sending to tester.php), it shouldn't be too hard to do either. You can just leave the first page as it was and change the second to what I have posted above (including your e-mail code).
I don't know if I made myself clear and I can't test it, so it might well not work and I apologize in advance. If, maybe, you can send me the up to date content of the concerned page(s) I could be a little more certain about what I'm telling you
Hope it works, and hope that helps
Linear Mode
