handle empty/unchecked/checked checkboxes properly in both react and forms

This commit is contained in:
Jonathan Labreuille
2016-07-01 14:14:01 +02:00
parent 9de3a245b0
commit a8ffbc2d0e
2 changed files with 6 additions and 4 deletions

View File

@@ -6,7 +6,7 @@ function(
) { ) {
const FormFieldCheckbox = React.createClass({ const FormFieldCheckbox = React.createClass({
onValueChange: function(e) { onValueChange: function(e) {
e.target.value = this.refs.checkbox.checked ? '1' : ''; e.target.value = this.refs.checkbox.checked ? '1' : '0';
return this.props.onValueChange(e); return this.props.onValueChange(e);
}, },
render: function() { render: function() {
@@ -14,7 +14,9 @@ function(
return false; return false;
} }
const isChecked = !!(this.props.item[this.props.field.name]); // isChecked will be true only if the value is "1"
// it will be false in case value is "0" or empty
const isChecked = !!(~~(this.props.item[this.props.field.name]));
const options = Object.keys(this.props.field.values).map( const options = Object.keys(this.props.field.values).map(
(value, index) => { (value, index) => {
return ( return (

View File

@@ -22,7 +22,7 @@ class Checkbox extends Base {
foreach($options as $option) { foreach($options as $option) {
$html .= '<label class="mailpoet_checkbox_label">'; $html .= '<label class="mailpoet_checkbox_label">';
$html .= '<input type="hidden" name="'.$field_name.'" value="" />'; $html .= '<input type="hidden" name="'.$field_name.'" value="0" />';
$html .= '<input type="checkbox" class="mailpoet_checkbox" '; $html .= '<input type="checkbox" class="mailpoet_checkbox" ';
$html .= 'name="'.$field_name.'" '; $html .= 'name="'.$field_name.'" ';
@@ -34,7 +34,7 @@ class Checkbox extends Base {
$selected_value === '' $selected_value === ''
&& isset($option['is_checked']) && isset($option['is_checked'])
&& $option['is_checked'] && $option['is_checked']
) || ($selected_value === $value) ) || ($selected_value)
) ? 'checked="checked"' : ''; ) ? 'checked="checked"' : '';
$html .= $field_validation; $html .= $field_validation;