jQuery形式serialize（）不起作用

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#
            &nbsp;<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#
            &nbsp;<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");
    });