Updating different forms at the same time - php

Question

Current Situation
So, this is a follow up question from my previous question (Submit button to affect multiple files)
The approach was good in terms of how to "click" multiple buttons together by using a "super-button" (patent pending) by #oMiKeY. It does what it is supposed to do, clicking all buttons.
The mark up is the following:
Title.php
<form role="form" method="post">
<div class="edit_title">
<input type="hidden" value="<?php echo $post_id; ?>">
<?php post_input_box( $post_id, 'post_title', array( 'placeholder' => 'Article title..', 'value' => $post->post_title ) ); ?>
<div class="update-button-wrap">
<input id="save_button" type="submit" name="update_product" value="<?php esc_attr_e( 'Update', 'site' ); ?>"/>
</div>
</div>
</form>
Content.php
<form role="form" method="post">
<div class="edit_content">
<?php post_input_box( $post_id, 'post_content', array( 'placeholder' => 'Short description..', 'value' => $post->post_content ), 'textarea' ); ?>
</div>
<div class="update-button-wrap">
<input id="save_button" type="submit" name="update_product" value="<?php esc_attr_e( 'Update', 'site' ); ?>"/>
</div>
</form>
Article.php
<button type='button' onclick="$('[type="submit"]').click()">Submit</button>
Problem
So, when the "Submit" button is clicked, both buttons in each title.php and content.php are also clicked (ie. in regards to clicking buttons, it works fine). However, because two forms are simultaneously clicked, only the second one is updated (either content or title) while the first one is ignored, when both data are needed to be updated.
My approach
Now, I can merge two files together and have both title and content within a single form, but that really messes up my overall setup and I heard it is better to have multiple smaller php files for updating and speed than a large one big file.
Or here is my another approach.
In the article.php, I will have the form and submit button while the title.php and content.php only has the editable forms. Then these two forms are somehow linked to the form in article.php, like the image below.
Do you think the second approach can be achieved or any other suggestions?
Thanks

Answer 1

Just add a global form on article.php and drop the title and content forms (and submit buttons). Every named input inside the global form will be submitted together no matter what php file generated them.
Edit:
Title.php
<div class="edit_title">
<input type="hidden" value="<?php echo $post_id; ?>">
<?php post_input_box( $post_id, 'post_title', array( 'placeholder' => 'Article title..', 'value' => $post->post_title ) ); ?>
</div>
Content.php
<div class="edit_content">
<?php post_input_box( $post_id, 'post_content', array( 'placeholder' => 'Short description..', 'value' => $post->post_content ), 'textarea' ); ?>
</div>
Article.php
<form role="form" method="post">
<?php include "Title.php"; include "Content.php"; ?>
<button type='submit'>Submit</button>
</form>
Option 2:
Alternatively you could use some sort of functionality that allows you to create forms only once, even if you have "inner forms". This way Title.php and Content.php would also work as standalone code snippets.
$formDeep = 0;
function openForm() {
global $formDeep;
if ($formDeep == 0) {
echo "<form role=\"form\" method=\"post\">";
}
$formDeep++;
}
function closeForm() {
global $formDeep;
$formDeep--;
if ($formDeep == 0) {
echo "</form>";
}
}
Title.php
<?php openForm(); ?>
<div class="edit_title">
<input type="hidden" value="<?php echo $post_id; ?>">
<?php post_input_box( $post_id, 'post_title', array( 'placeholder' => 'Article title..', 'value' => $post->post_title ) ); ?>
</div>
<?php closeForm(); ?>
Content.php
<?php openForm(); ?>
<div class="edit_content">
<?php post_input_box( $post_id, 'post_content', array( 'placeholder' => 'Short description..', 'value' => $post->post_content ), 'textarea' ); ?>
</div>
<?php closeForm(); ?>
Article.php
<?php openForm(); ?>
<?php include "Title.php"; include "Content.php"; ?>
<button type='submit'>Submit</button>
<?php closeForm(); ?>