I am working on a theme builder settings for WordPress, and I have issue with saving the radio button.
I have a radio button with which you can select the layout of header for instance.
When you select it, it gets the attribute checked=checked, others in that group get its checked attribute removed. This works.
But when I go and assemble the object that will contain all the options saved, the layout name is always the default one.
If I don't set it the way I have put it, then the last radio button name is always selected as a layout, no matter what I selected. The code looks like this
function builder_hb_save(e) {
e.preventDefault();
var builder_hb_out = {};
$('#builder_hb_headers').find('li').each(function() {
var $builder_hb_header = $(this);
var li_id = $builder_hb_header.attr('id');
builder_hb_out[li_id] = {};
builder_hb_out[li_id]['title'] = $builder_hb_header.find('.builder_hb_header_title').val();
builder_hb_out[li_id]['settings'] = {};
if ($('.builder_header_layout_single').data('default') === 1) {
var default_layout = $('.builder_header_layout_single').find('input').val();
}
$builder_hb_header.find('.builder_hb_setting').each(function() {
var $builder_hb_setting = $(this);
if (!$builder_hb_setting.parents('.builder_options_wrapper').hasClass('hidden')) {
var builder_hb_setting_name = $builder_hb_setting.attr('name');
// Problem starts here
if ('builder_hb_header_layout' !== builder_hb_setting_name) { // save value for non header values - if only this is set, then the value for header is always the last one, no matter the select
builder_hb_out[li_id]['settings'][builder_hb_setting_name] = $builder_hb_setting.val();
} else { // Here the checked option should be selected, but it's not
if ('checked' === $builder_hb_setting.attr('checked') && 'undefined' !== typeof $builder_hb_setting.attr('checked')) {
builder_hb_out[li_id]['settings']['builder_hb_header_layout'] = $builder_hb_setting.val();
} else {
builder_hb_out[li_id]['settings']['builder_hb_header_layout'] = default_layout;
}
}
}
});
});
console.dir(builder_hb_out);
}
$('#save_all').on('click', builder_hb_save);.hidden {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="builder_hb_headers" class="builder_builder_settings">
<li class="show" id="ui-id-1">
<div class="header_header_settings">
<div class="header_title">
<input type="radio" id="default_radio_1" name="builder_hb_default" value="0" class="builder_hb_setting builder_builder_default builder_hb_default">
<label for="default_radio_1" class="default_label">
</label>New Header456</div>
<span class="collapse_item">
</span>
</div>
<div class="builder_options_wrapper builder_header_title builder_builder_title">
<h4>Header Title</h4>
<div class="value_container">
<input type="text" name="builder_hb_header_title" value="New Header456" class="builder_hb_header_title">
</div>
</div>
<div class="builder_options_wrapper builder_header_layout builder_builder_layout">
<h4>Header Layout</h4>
<div class="value_container">
<label class="builder_header_layout_single" data-default="1" data-settings=".builder_logo_img, .builder_logo_retina_img, .builder_header_retina_width, .builder_header_retina_height, .builder_background_img, .builder_background_color, .builder_text_color, .builder_icon_select, .builder_header_menu_first, .builder_header_menu_second, .builder_hover_text_color, .builder_transparent_logo_img, .builder_transparent_logo_retina_img, .builder_transparent_header_retina_width, .builder_transparent_header_retina_height, .builder_transparent_text_color, .builder_hover_transparent_text_color">
<input type="radio" name="builder_hb_header_layout" value="header_layout_logo_centered" class="builder_hb_header_layout builder_hb_setting">
<img src="wp-content/themes/builder/inc/theme-settings/images/header3.png" alt="header_layout_logo_centered" title="header_layout_logo_centered">
</label>
<label class="builder_header_layout_single" data-default="" data-settings=".builder_header_menu_first, .builder_header_retina_height, .builder_background_img, .builder_background_color, .builder_icon_select">
<input type="radio" name="builder_hb_header_layout" value="header_layout_logo_left_fixed" class="builder_hb_header_layout builder_hb_setting" checked="checked">
<img src="wp-content/themes/builder/inc/theme-settings/images/header2.png" alt="header_layout_logo_left_fixed" title="header_layout_logo_left_fixed">
</label>
<label class="builder_header_layout_single" data-default="" data-settings=".builder_header_menu_first, .builder_logo_img, .builder_header_retina_height, .builder_background_img">
<input type="radio" name="builder_hb_header_layout" value="header_layout_logo_left_magic_background" class="builder_hb_header_layout builder_hb_setting">
<img src="wp-content/themes/builder/inc/theme-settings/images/header1.png" alt="header_layout_logo_left_magic_background" title="header_layout_logo_left_magic_background">
</label>
</div>
</div>
<div class="builder_options_wrapper builder_header_menu_first hidden">
<h4>Select Menu</h4>
<div class="value_container">
<select class="builder_hb_setting builder_header_menu_first" name="builder_hb_header_menu_first">
<option value="header-menu-default">Header Menu Default</option>
<option value="header-menu-left">Centered Logo - Menu Left</option>
<option value="header-menu-right">Centered Logo - Menu Right</option>
<option value="proba">Proba</option>
</select>
</div>
</div>
<div class="builder_options_wrapper builder_header_menu_second hidden">
<h4>Select Second Menu</h4>
<div class="value_container">
<select class="builder_hb_setting builder_header_menu_second" name="builder_hb_header_menu_second">
<option value="header-menu-default">Header Menu Default</option>
<option value="header-menu-left">Centered Logo - Menu Left</option>
<option value="header-menu-right">Centered Logo - Menu Right</option>
<option value="proba">Proba</option>
</select>
</div>
</div>
<div class="builder_options_wrapper builder_logo_img hidden">
<h4>Logo</h4>
<div class="value_container">
<div class="builder_uploaded_image">
</div>
<input type="text" name="builder_hb_header_logo" value="" class="builder_image_upload builder_hb_setting builder_hb_header_logo">
<input type="button" name="image_upload" value="Upload Image" class="button upload_image_button">
<input type="button" name="remove_image_upload" value="Remove Image" class="button remove_image_button">
</div>
</div>
<div class="builder_options_wrapper builder_logo_retina_img hidden">
<h4>Retina Logo</h4>
<div class="value_container">
<div class="builder_uploaded_image">
</div>
<input type="text" name="builder_hb_header_logo_retina" value="" class="builder_image_upload builder_hb_setting builder_hb_header_logo_retina">
<input type="button" name="image_upload" value="Upload Image" class="button upload_image_button">
<input type="button" class="button remove_image_button" name="remove_image_upload" value="Remove Image">
</div>
</div>
<div class="builder_options_wrapper builder_header_retina_width hidden">
<h4>Retina Width</h4>
<div class="value_container">
<input type="text" name="builder_hb_header_retina_width" value="" class="builder_hb_setting">
</div>
</div>
<div class="builder_options_wrapper builder_header_retina_height">
<h4>Retina Height</h4>
<div class="value_container">
<input type="text" name="builder_hb_header_retina_height" value="" class="builder_hb_setting">
</div>
</div>
<div class="builder_options_wrapper builder_background_img builder_hb_switch">
<h4>Background Image</h4>
<div class="value_container">
<div class="builder_uploaded_image">
</div>
<input type="text" name="builder_hb_header_background_image" value="" class="builder_image_upload builder_hb_setting builder_hb_header_logo_retina">
<input type="button" name="image_upload" value="Upload Image" class="button upload_image_button">
<input type="button" class="button remove_image_button" name="remove_image_upload" value="Remove Image">
</div>
</div>
<div class="builder_options_wrapper builder_background_color builder_hb_switch">
<h4>Background Color</h4>
<div class="value_container">
<div class="wp-picker-container">
<a tabindex="0" class="wp-color-result" title="Select Color" data-current="Current Color">
</a>
<span class="wp-picker-input-wrap">
<input type="text" name="builder_hb_background_color" value="" class="builder_hb_setting builder_color_picker wp-color-picker" style="display: none;">
<input type="button" class="button button-small hidden wp-picker-clear" value="Clear">
</span>
<div class="wp-picker-holder">
</div>
</div>
</div>
</div>
<div class="builder_options_wrapper builder_text_color builder_hb_switch hidden">
<h4>Text Color</h4>
<div class="value_container">
<div class="wp-picker-container">
<a tabindex="0" class="wp-color-result" title="Select Color" data-current="Current Color">
</a>
<span class="wp-picker-input-wrap">
<input type="text" name="builder_hb_text_color" value="" class="builder_hb_setting builder_color_picker wp-color-picker" style="display: none;">
<input type="button" class="button button-small hidden wp-picker-clear" value="Clear">
</span>
<div class="wp-picker-holder">
</div>
</div>
</div>
</div>
<div class="builder_options_wrapper builder_hover_text_color builder_hb_switch hidden">
<h4>Hover Text Color</h4>
<div class="value_container">
<div class="wp-picker-container">
<a tabindex="0" class="wp-color-result" title="Select Color" data-current="Current Color">
</a>
<span class="wp-picker-input-wrap">
<input type="text" name="builder_hb_hover_text_color" value="" class="builder_hb_setting builder_color_picker wp-color-picker" style="display: none;">
<input type="button" class="button button-small hidden wp-picker-clear" value="Clear">
</span>
<div class="wp-picker-holder">
</div>
</div>
<p class="description">Color for hover and current menu items.</p>
</div>
</div>
<div class="builder_options_wrapper builder_transparent_logo_img builder_hb_switch hidden">
<h4>Transparent Logo</h4>
<div class="value_container">
<div class="builder_uploaded_image">
</div>
<input type="text" name="builder_hb_header_transparent_logo" value="" class="builder_image_upload builder_hb_setting builder_hb_header_logo">
<input type="button" name="image_upload" value="Upload Image" class="button upload_image_button">
<input type="button" name="remove_image_upload" value="Remove Image" class="button remove_image_button">
</div>
</div>
<div class="builder_options_wrapper builder_transparent_logo_retina_img builder_hb_switch hidden">
<h4>Transparent Logo Retina Logo</h4>
<div class="value_container">
<div class="builder_uploaded_image">
</div>
<input type="text" name="builder_hb_header_transparent_logo_retina" value="" class="builder_image_upload builder_hb_setting builder_hb_header_transparent_logo_retina">
<input type="button" name="image_upload" value="Upload Image" class="button upload_image_button">
<input type="button" class="button remove_image_button" name="remove_image_upload" value="Remove Image">
</div>
</div>
<div class="builder_options_wrapper builder_transparent_header_retina_width builder_hb_switch hidden">
<h4>Transparent Retina Width</h4>
<div class="value_container">
<input type="text" name="builder_hb_transparent_header_retina_width" value="" class="builder_hb_setting">
</div>
</div>
<div class="builder_options_wrapper builder_transparent_header_retina_height builder_hb_switch hidden">
<h4>Transparent Retina Height</h4>
<div class="value_container">
<input type="text" name="builder_hb_transparent_header_retina_height" value="" class="builder_hb_setting">
</div>
</div>
<div class="builder_options_wrapper builder_transparent_text_color builder_hb_switch hidden">
<h4>Transparent Text Color</h4>
<div class="value_container">
<div class="wp-picker-container">
<a tabindex="0" class="wp-color-result" title="Select Color" data-current="Current Color">
</a>
<span class="wp-picker-input-wrap">
<input type="text" name="builder_hb_transparent_text_color" value="" class="builder_hb_setting builder_color_picker wp-color-picker" style="display: none;">
<input type="button" class="button button-small hidden wp-picker-clear" value="Clear">
</span>
<div class="wp-picker-holder">
</div>
</div>
</div>
</div>
<div class="header_footer_settings">
<span class="builder_builder_delete">Delete</span>
<a href="#" class="builder_hb_save">Save</a>
</div>
</li>
</ul>
<div id="save_all">SAVE ALL</div>This is the code in a nutshell, there are some functions that toggle visibility and checked attributes, but this one is driving me crazy and I cannot see what I'm doing wrong.
