Changed checkbox value during click event not picked up by form data

Question

I have a "sign up for email updates" checkbox that is checked by default with a value of "Yes". If unchecked, it needs to be set to "No". This is not a perfect solution, but these are the values that need to be submitted to the database on form submission.

The HTML:

<input name="emailSignUpCheckbox" id="emailSignUpCheckbox" type="checkbox" value="Yes" onclick="updateSignUpCheckbox()">Sign me up!

The Javascript:

var emailSignUpCheckbox = document.getElementById('emailSignUpCheckbox');

function updateSignUpCheckbox(){
    if(emailSignUpCheckbox.checked) {
        emailSignUpCheckbox.value = "Yes";
    }
    else {
        emailSignUpCheckbox.value = "No";
    }
}

The value of the checkbox is being changed each time and I have confirmed it by looking at the DOM or by logging the value in the console. And when submitted as checked (default), the value of "Yes", is posted by the form to the database.

However, if unchecked manually, the value of the checkbox is not posted by the form to the database, but a blank value is instead posted.

Any suggestions on what I could be doing wrong are greatly appreciated!

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

I hope this can help you, another answer, only the "on" values are submitted, one solution is to consider that if the value of the checkbox is not in the submit it would mean that its value is "of".

edited May 23 '17 at 11:45

Community

1
1

answered Jan 11 '17 at 14:19

Landaida

134
2
8

1

That actually makes sense. I'll use a hidden field instead to send a value no matter what. Thanks! – IntricatePixels Jan 11 '17 at 14:30
A quick update that using a hidden field and updating the value of that field and submitting that field did the trick. – IntricatePixels Jan 11 '17 at 14:53

Changed checkbox value during click event not picked up by form data

1 Answers1