How to not send an input field in a <form>?

Question

Relating to my last question. I have an upload field where the user can choose a picture and this becomes resized (client-side via JavaScript), base64 encoded (JavaScript as well) and sent via a hidden field. I do this in order to save bandwidth of the user (e.g. usage with a 3G connection).

But I don't know how to not send the user upload file <input type="file" name="file" id="file" class="span4"> within the <form> tags. The obvious solution would be to exclude the file upload field from the form but this would kill my layout. Is this possible?

Answer 1

Just delete name="file" attribute.

Answer 2

You can do the following with jQuery to disable your input field:

$('#file').prop('disabled', true);

Altogether you might have this:

// domReady handler
$(function() {

    // provide an event for when the form is submitted
    $('#myform').submit(function() {

        // Find the input with id "file" in the context of
        // the form (hence the second "this" parameter) and
        // set it to be disabled
        $('#file', this).prop('disabled', true);

        // return true to allow the form to submit
        return true;
    });
});