jQuery: select checkbox when upload field is clicked

Question

I'm working on a CMS. When a user wants to replace an existing thumbnail image, they can upload a replacement, and check a checkbox to certify that they are indeed replacing the image. The checkbox seems necessary because otherwise the form submits a blank value (due to the blank default value of the upload field, a security default for all browsers) and wipes out the existing image without a replacement image being specified.

The problem is that I keep forgetting to manually activate the checkbox and the uploaded image does not actually replace the existing one because without the checkbox being checked, the receiving PHP file does not (by design) process the uploaded filename. I suspect that users will have the same problem and I want to keep this from happening by reducing the number of steps required. One solution would be to check the checkbox with jQuery whenever the upload field is clicked. So why doesn't this work:

 $('#image_req').click(function () {
  if ($('#checkbox_req').attr('checked',true)) {
   $('#checkbox_req').removeAttr('checked');
   alert('Unchecked');
  } else if ($('#checkbox_req').attr('checked',false)) {
   $('#checkbox_req').attr('checked','checked');
   alert('Checked');
  }
 });

The HTML in question looks like this:

<input id="image_req" name="local_filename" type="file" />
<input id="checkbox_req" name="replace_image" value="yes" type="checkbox" />

Answer 1

it could be that the $ is conflicting with an existing javascript library in your CMS. I had to do something similar with select boxes and found out about jQuery.noConflict:

jQuery.noConflict();

jQuery(document).ready(function() {
//preselect sectionid
jQuery('select[name="sectionid"] option[value="29"]').attr("selected", true);
jQuery('select[name="sectionid"] option[value="29"]').trigger("change");
jQuery('select[name="access"] option[value="1"]').attr("selected", true);
});

after "jQuery.noConflict();" you can use "jQuery" instead of "$"

also in my case I had to trigger the change event because the 'access' selectbox's content is dependent on whatever is selected in 'sectionid' selectbox

Answer 2

Can't you include the default value in a hidden input (type="hidden")? That way when you submit the form you know what the default value is. If nothing changes, use the default value or do nothing, and if a file gets uploaded (check $_FILES), use the new file.

Answer 3

@Arne

I tried running your code quickly but for some reason it just unchecks it everytime.. I modified it quickly so that it checks the checkbox each time.. as I understand it there is no need to uncheck the box, right?

$('#image_req').mouseup(function () {
 if ($('#checkbox_req').attr('checked',false)) {
  $("input[name='replace_image']").attr('checked', true);
 }
});

@Doug: thanks for the tip

Answer 4

Your if conditions do not work properly because you are actually assigning values instead of getting them. Try this:

$('#image_req').click(function () {
    var checkbox = $('#checkbox_req');
    if (checkbox.is(':checked')) {
        checkbox.removeAttr('checked');
        alert('Unchecked');
    } else {
        checkbox.attr('checked', 'checked');
        alert('Checked');
    }
});

But does this make any sense? When the user first checks the box manually and then hits upload, it gets unchecked again.

I would check it by default by setting the checked attribute in your HTML. If the user then not wants to have the image replaced, he can uncheck it manually.

PS: What about simply turning the checkbox into a hidden field, if you actually need this checkbox to be checked always?

<input id="checkbox_req" name="replace_image" value="yes" type="hidden" />

If this is not possible for any reason, here's another idea with the same effect: Check the box with javascript and hide it via CSS.

Answer 5

I ended up using a hidden input, which was the obvious solution, and one that I've implemented before, but somehow overlooked this time. But I appreciate all the varied and helpful responses. Stack Overflow rocks.