3

What I wanna ask is, I have a check box called full screen and when I checked it the two input fields which are width and height should be disabled and the values of it set to null. I do it well with j query but when I submit the form with full screen checked even the two input fields values are 0, it is saving with previous values of that two input fields.

Any help?

$("#fullscreenCheckBox").on("change", function() {
        if($(this).prop("checked")) {
            $("#height").prop("disabled", true);
            $("#height").val("");
            $("#width").prop("disabled", true); 
            $("#width").val("");

        } else {
            $("#height").prop("disabled", false);
            $("#height").prop("disabled", false);
        }
    });

The values are set to null as its but when the form is submitted it doesnt keep it

Charles
  • 50,943
  • 13
  • 104
  • 142
canpoint
  • 817
  • 2
  • 9
  • 19

2 Answers2

11

If an input has the disabled='true' property at the moment of form submit, it's value isn't submited with the form. You can either try to re-enable it at the moment of form submit in jQuery, like:

$("#yourFormId").submit(function(){
    $("#YourInputId").prop('disabled', 'false');
});

Another approach is to use many extra hidden fields for each "visible" input, like <input id='hiddenInputId' type='hidden' > and to set thier values in jQuery. They will not be seen by the user, but their values will still be sent with form submit. Example:

$("#yourInputId").change(function(){
    $("#hiddenInputId").val($(this).val()));
});

After that, when you process the submit, you just ignore regular input values and only work with hiddens.

Personally, I think that the second option (with hidden inputs) is much better. You can even extend it, and instead of hard-typing your DOM element id in change(), you can add a data-attribute to each element and then kill all birds with one stone :)

Kamil T
  • 2,232
  • 1
  • 19
  • 26
  • I am aware that I can send it with hidden fields thanks but is there no way around to submit it without hidden. I am not using ajax form submit so cant re enable it during submission – canpoint Jul 22 '13 at 12:47
  • You can enable it, just look at the first example code in this answer. This code makes the function trigger when form is submited. It re-enables the input, and after that the submit process is going on ;) – Kamil T Jul 22 '13 at 12:52
  • nope @KamilT, it still submits with the old values even I enabled them during submission – canpoint Jul 22 '13 at 13:01
  • and I tried to reset values during submission it is also not functioning as you suggested – canpoint Jul 22 '13 at 13:04
  • I figured it out by setting it to readonly, thanks for the answer – canpoint Jul 22 '13 at 13:36
0

I think the origin of the problem is that values from disabled input fields aren't posted to the server. What you can do from the server side is check if the values have been posted or not, if not set the value to 0.

nubinub
  • 1,898
  • 2
  • 15
  • 23
  • Yes because the disabled attribute prevents those values from being posted. – nubinub Jul 22 '13 at 12:27
  • so you mean it prevents posting the new val of the input field or? because it posts with the old value it is being changed – canpoint Jul 22 '13 at 12:28
  • I mean disabled attribute wont only keep the user from changing the value, it also disables the posting of the component value on form submitt. For instance if you check all the datas that have been posted by submitting the form , you won't retrieve height and width if they were disabled. – nubinub Jul 22 '13 at 12:31
  • but is posting with the old val when I disabled it - not cancelling or removing it from posting – canpoint Jul 22 '13 at 12:33
  • Oh ok nevermind , i thought the datas werent updating because there were no new posted values. But it appears its not the origin of the problem sorry. – nubinub Jul 22 '13 at 12:35
  • But i am pretty sure the problem comes from code behind and not from client side script. – nubinub Jul 22 '13 at 12:37
  • no @nubinub you are right, when I tried to retrieve it it keeps old post values inside and the problem occurs – canpoint Jul 22 '13 at 12:40
  • Kamil T provides some nice solutions to handle it from client side, but since you want to set values to 0 in the case of disabled input, i think its still quite correct to handle the problem from the server side. – nubinub Jul 22 '13 at 12:44