Javascript 对多个文本区域使用隐藏输入类型，创建多个插入

我已经建立了一个CMS，允许用户保存带有“面板”的页面，这些面板基本上是包含自己内容的div。它在div中使用TinyMCE来创建内容，我已经让它工作了，但只使用了一个主面板，我正在试图找到修改它的方法来保存多个面板

我的if语句从URL值中获取$value，如果是1，则使用fullwidth html模板

<?php if($value == 1){?>
    <?php $panelType = 1;?>
    <div class="col-lg-12 fullWidth" id="full">
        <div class="fullContent" style="background-color: white; height: 100%;">
            <form  id="form-data3" method="post">
              <textarea class="original" id="mytextarea3" name="fullText"></textarea>
              <input type="submit" value="Save Content">
            </form>
        </div>
    </div>
<?php } ?>

这适用于所有3个表中的一次插入，但如果我可以为每个div设置多个面板类型，我如何修改它以仍然插入一页记录，但成功地考虑多个面板和内容

这是添加页面脚本

//Insert Page
$title = $_POST['addTitle'];
$page_type = $_POST['pageType'];


$addpage = "
INSERT INTO pages (title, page_type_id)
VALUES ('$title','$page_type');
";
$mysqlConn->query($addpage)

$page_id = $mysqlConn->insert_id;

//Insert Content
$content = $_POST['page_content'];

$addContent = "
INSERT INTO content(content)
VALUES('$content');
";

$mysqlConn->query($addContent);

$cont_id = $mysqlConn->insert_id;

//Insert panel(s)
$panelID = $_POST['panelType'];
$addPanel = "
INSERT INTO panels(panel_type_id, page_id, cont_id)
VALUES ('$panelID', '$page_id', '$cont_id');
";
$mysqlConn->query($addPanel);

---

与使用一个表单包装所有文本区域并只发送其中的内容相比，似乎过于复杂了。或者在用户单击“保存内容”后立即使用ajax提交每个textarea表单请注意，多次定义同一个函数会覆盖该函数以前的任何实例。我不是真的使用ajax，您能给我一个这样做的示例吗？可以像

$（'.my form class'）。on（'submit'，function（e）{e.preventDefault（）；$.post）一样简单（this.action，$（this.serialize（），函数（response）{/*对response*/}执行操作；}）

注意，这忽略了错误处理，但给出了基本的起点。因此，既然我需要页面记录和内容记录来保存面板记录，我是否需要使用ajax保存textarea内容，然后当他们完成保存页面的最终表单时，我实际上会在那里插入mysql？

<?php if($value == 1){?>

    <div class="col-lg-12 fullWidth" id="full">
        <?php $panelType = 1;?>
        <div class="fullContent" style="background-color: white; height: 100%;">
            <form  id="form-data3" method="post">
              <textarea class="original" id="mytextarea3" name="fullText">Some Text Here</textarea>
              <input type="submit" value="Save Content">
            </form>
        </div>
    </div>

    <div class="col-lg-12 halfWidth" id="half">
        <?php $panelType = 2;?>
        <div class="halfContent" style="background-color: white; height: 100%;">
            <form  id="form-data4" method="post">
              <textarea class="original" id="mytextarea4" name="halfText">Some Text There</textarea>
              <input type="submit" value="Save Content">
            </form>
        </div>
    </div>
<?php } ?>

<script type="text/javascript">
    function content() {
    var content = tinyMCE.get('mytextarea3').getContent();
    $("#new").val(content);
}
</script>

<script type="text/javascript">
    function content() {
    var content = tinyMCE.get('mytextarea4').getContent();
    $("#new").val(content);
}
</script>

pages

ID | Title    | page_type_id
1  | TitleNew | 1     /*this comes from $value*/

content

ID | Content
1  | Some Text Here
2  | Some Text There

panels

ID | panel_type_ID | page_id | content_id
1  |     1         |     1   |   1
2  |     2         |     1   |   2

//Insert Page
$title = $_POST['addTitle'];
$page_type = $_POST['pageType'];


$addpage = "
INSERT INTO pages (title, page_type_id)
VALUES ('$title','$page_type');
";
$mysqlConn->query($addpage)

$page_id = $mysqlConn->insert_id;

//Insert Content
$content = $_POST['page_content'];

$addContent = "
INSERT INTO content(content)
VALUES('$content');
";

$mysqlConn->query($addContent);

$cont_id = $mysqlConn->insert_id;

//Insert panel(s)
$panelID = $_POST['panelType'];
$addPanel = "
INSERT INTO panels(panel_type_id, page_id, cont_id)
VALUES ('$panelID', '$page_id', '$cont_id');
";
$mysqlConn->query($addPanel);