jquery form serialize() doesn't work - php

Question

Hi everyone I tried to serialize a form by his ID using jquery method serialize().
Html code:
<form name="structure_form" id="structure_form" method="post">
<div id="add_sections" class="postbox add_section_box">
<button type="button" class="handlediv button-link" aria-expanded="true"><span class="screen-reader-text">Commuta il pannello: Add section</span><span class="toggle-indicator" aria-hidden="true"></span></button>
<h3 class="handle ui-sortable-handle structure_title"><span>Add Section</span></h3>
<div class="inside">
#CONTENT#
<input type="button" class="button button-primary button-large saveSections" id="save" value="Save">
</div>
</div>
</form>
Js code:
$('.saveSections').on('click', function () {
var serializedForm = $('#structure_form').serialize();
$.post(ajaxurl, {action: 'saveConfiguration', serializedForm: serializedForm}, function (data) {
alert(data);
});
console.log("configuration saved");
});
Php code:
function saveConfiguration() {
print_r($_POST['serializedForm']);
exit;
}
function add_section_meta_box() {
global $post;
if ($post->post_type == "minisites") {
$addSection = file_get_contents(dirname(__FILE__) . '/templates/components/add_section_box.html');
$addSection = str_replace('#CONTENT#', Utils::createSelect(), $addSection);
}
echo Utils::includeScripts();
echo $addSection;
}
This is Utils::createSelect
public static function createSelect() {
$sections = get_posts(array(
'post_type' => 'sections',
'posts_per_page' => 10)
);
$html = '<select id="sections" name="item">';
foreach ($sections as $section) {
$html .= '<option value="' . $section->ID . '">' . $section->post_title . '</option>';
}
$html .= '</select><br><br>';
$html .= '<input type="button" class="button button-primary button-large addSection" id="add" value="Add">';
return $html;
}
the output is empty or undefined.
I think that the problem is the ID's form because if I change $('#structure_form') with $('form') it works fine.
Thanks in advance.
Edit(Update):
I add code in order that it works
Create custom_post_type, box, ecc (Plugin)
<?php
//error_reporting(E_ALL);
//ini_set("display_errors", 'on');
/*
Plugin Name: deaSiteBuilder
Version: 1.0
Description:
Author: Giuseppe Giubaldo
Author URI:
*/
require_once 'utils.php';
require_once __DIR__ . '/../../../vendor/autoload.php';
use Symfony\Component\Yaml\Parser;
add_action('init', 'create_post_type');
function create_post_type() {
register_post_type('minisites', array(
'labels' => array(
'name' => __('Minisites'),
'singular_name' => __('Minisite'),
),
'public' => true,
'has_archive' => true,
)
);
register_post_type('sections', array(
'labels' => array(
'name' => __('Sections'),
'singular_name' => __('Section'),
),
'public' => true,
'has_archive' => true,
));
}
//Add default meta box
add_action('edit_form_after_editor', 'add_section_meta_box');
function add_section_meta_box() {
global $post;
if ($post->post_type == "minisites") {
$addSection = file_get_contents(dirname(__FILE__) . '/templates/components/add_section_box.html');
$addSection = str_replace('#CONTENT#', Utils::createSelect(), $addSection);
}
echo Utils::includeScripts();
echo $addSection;
}
//Our custom meta box will be loaded on ajax
function add_structure_meta_box($post_name) {
$sectionStructureBox = file_get_contents(dirname(__FILE__) . '/templates/components/sectionStructureBox.html');
$sectionStructureBox = str_replace('#ELEMENT#', strtoupper($post_name), $sectionStructureBox);
$sectionStructureBox = str_replace('#CONTENT#', $post_name, $sectionStructureBox);
echo $sectionStructureBox;
}
//Call ajax
add_action('wp_ajax_addStructureBox', 'addStructureBox');
function addStructureBox() {
add_structure_meta_box($_POST['section']);
exit;
}
add_action('wp_ajax_saveConfiguration', 'saveConfiguration');
function saveConfiguration() {
echo $_POST['serializedForm'];
exit;
}
Html pages:
sections_box
<form name="structure_form" id="structure_form" method="post">
<div id="add_sections" class="postbox add_section_box">
<button type="button" class="handlediv button-link" aria-expanded="true"><span class="screen-reader-text">Commuta il pannello: Add section</span><span class="toggle-indicator" aria-hidden="true"></span></button>
<h3 class="handle ui-sortable-handle structure_title"><span>Add Section</span></h3>
<div class="inside">
#CONTENT#
<input type="button" class="button button-primary button-large saveSections" id="save" value="Save">
</div>
</div>
</form>
structure_box
<div id="section_structure_box" class="postbox section_box">
<button type="button" class="handlediv button-link" aria-expanded="true"><span class="screen-reader-text">Commuta il pannello: Section Structure</span><span class="toggle-indicator" aria-hidden="true"></span></button>
<!-- <div class="handlediv" title="Click to toggle"><br>
</div>-->
<h3 class="handle ui-sortable-handle structure_title"><span>Section Structure - #ELEMENT#</span></h3>
<div class="inside">
#CONTENT#
</div>
<!--<input type="button" class="button button-primary button-large remove_box" id="remove" value="Remove">-->
Class Utils:
<?php
class Utils {
public static function createSelect() {
$sections = get_posts(array(
'post_type' => 'sections',
'posts_per_page' => 10)
);
$html = '<select id="sections" name="item">';
foreach ($sections as $section) {
$html .= '<option value="' . $section->ID . '">' . $section->post_title . '</option>';
}
$html .= '</select><br><br>';
$html .= '<input type="button" class="button button-primary button-large addSection" id="add" value="Add">';
return $html;
}
public static function includeScripts() {
$html = '<link rel="stylesheet" type="text/css" href="' . plugins_url('deaSiteBuilder/assets/css/style.css', dirname(__FILE__)) . '">';
$html .= '<script src="' . plugins_url('deaSiteBuilder/assets/js/jquery.min.js', dirname(__FILE__)) . '"></script>';
$html .= '<script src="' . plugins_url('deaSiteBuilder/assets/js/jquery-ui.js', dirname(__FILE__)) . '"></script>';
$html .= '<script src="' . plugins_url('deaSiteBuilder/assets/js/plugin.js', dirname(__FILE__)) . '"></script>';
return $html;
}
}
And js code:
$(document).ready(function () {
$('.addSection').on('click', function () {
var selectedSection = $('#sections option:selected').text();
$.post(ajaxurl, {action: 'addStructureBox', section: selectedSection}, function (data) {
$('#add_sections').parent().append(data);
console.log("section added");
});
});
$('.saveSections').on('click', function () {
var serializedForm = $('body form#structure_form').serialize();
alert(serializedForm);
$.post(ajaxurl, {action: 'saveConfiguration', serializedForm: serializedForm}, function (data) {
});
console.log("configuration saved");
});
});

Answer 1

try this one,
$('.saveSections').on('click', function () {
var serializedForm = $('#structure_form').serialize();
serializedForm.push({name: 'action', value: 'saveConfiguration'});
$.post(ajaxurl, serializedForm, function (data) {
alert(data);
});
console.log("configuration saved");
});