Multiple hidden inputs for possible Ajax call to database insert

[thenorman138]

I have a CMS that I've built allowing users to create a 'Page' made up of different panels each with their own content. I've made this work so that a user can create a page with one panel and one textarea of content but I still can't figure out how to do this for multiple panels/content.

Currently, if the page load gets the value of '1' from the URL value, it loads html templates with a fullwidth div and halfwidth div. I'm trying to set the panel type of each with hidden input types and they each have their own tinymce text area.

    <?php if($value == 1){?>
        <form method="post">
        <div class="col-lg-12 fullWidth" id="full">
            <input type="hidden" name="fullWidth" value="">
            <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">
            <input type="hidden" name="halfWidth" value="">
            <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>
        </form>

    <?php } ?>

Once this is done and they go to save page, there is another form that lets them set the title of the page and it also gets the page type ($value from above)

    <form action="addPage.php" method="post">
    <input type="hidden" name="pageType" value="<?php echo $value;?>">//This comes from the url value
    <input class="form-control" id="addTitle" name="addTitle">
    <input type="submit" name="Save Page">

The problem is, when I now call my addPage.php script to insert the records, I don't know how to pass the values correctly so that I add one page record (the $value for page_type_id and the Title) but then insert 2 content and panel records for the text areas.

Here's my expected insert in the case of the above code:

    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

This works for one insert in all 3 tables but if I can set multiple panel types to each div, how can I modify this to still insert the one page record but successfully account for multiple panel and content?

Here's the add page script

    //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);

 

Edited July 23, 2018 by cyberRobot
please use code tags when posting code; it's the <> button

[requinix]

Two approaches:

1. You specialize everything according to the page type. The inputs are specialized, the forms are specialized, whatever. What this means is that you need page type-specific code that deals just with this form process. It contains the form fields and it knows how to get submitted data from it.
2. You generalize everything. The form inputs are generic. The form processing code doesn't know what anything means, all it knows is that there were form fields with data that need to be inserted into the content table.

The first is better but requires more code. The second is simpler but not as cool.

[thenorman138]

Can you give an example of the 2nd option? Again, this works for me as far as inserting 1, but I really just need help to use multiple instances of tinymce editors and potentially looping my insert for content and panels. I'm so beyond stuck here

[thenorman138]

@requinix I feel like I'm on the right track logically maybe? My problem is, if at any time I have 3 or 4 different sized divs with their own textarea/tinymce editor, how can I fairly simply arrange this to save the content of each with a corresponding value from each (1,2,3,etc.) to identify the panel type, all while still only inserting one page record?

 

[requinix]

Basically, you name all your inputs something really simple, like

<textarea class="original" id="mytextarea3" name="content[]">Some Text Here</textarea>

That's array syntax so $_POST[content] will be an array, with the values in the same order as in the form. Then you insert the data, and make sure that the code that reads the content from the database gets it in that same order.