1 button for 2 forms where one of the forms is a <select>

Question

I got 2 forms, one of the forms is a select which can show 2 hidden divs. When one of the options is selected it should send the value to the database.

Now the second form is where the button is. When this button is pressed it should submit both forms. I already tried some things, but they don't seem to work. Anyone has an idea?

The first 'main' form:

<form class="areaType" id="formSelect" action="saveData.php" method="POST">
    <p>Are you a student showcasing a project or a school institution looking to collaborate?</p>
    <select id="textAreaType" onchange="chooseType(this)" name="type">
        <option value="0" selected></option>
        <option value="1">Student project</option>
        <option value="2">School institution project</option>
    </select>
</form>

The second (hidden) form:

<form class="textAreas" id="formSchool" action="saveData.php" method="POST">
        <div class="fieldsForSquare">
            <p>Fill in these fields for your square</p>
        </div>
        <div class="areaTitle">
            <p>Title</p>
            <textarea type="text" id="textAreaTitle" name="summary" required></textarea>
        </div>
        <div class="areaDescription">
            <p>Short description</p>
            <textarea maxlength="200" type="text" id="textAreaDescription" name="shortSummary" required></textarea>
        </div>
        <div class="areaPersons">
            <p>How many people are you looking for and how big is the team going to be?</p>
            <input type="number" maxlength="2"
                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                id="textAreaPersons" required>
            <input type="number" maxlength="2"
                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                id="textAreaPersons2" required>
        </div>
        <div class="areaHours">
            <p>Is it fulltime or parttime?</p>
            <select id="textAreaHours" required>
                <option value="0" selected></option>
                <option value="1">Fulltime</option>
                <option value="2">Parttime</option>
            </select>
        </div>
        <div class="fieldsForPage">
            <p>Fill in these fields for your page</p>
        </div>
        <div class="areaAbout">
            <p>What is it about?</p>
            <textarea type="text" id="textAreaAbout" required></textarea>
        </div>
        <div class="areaLookingFor">
            <p>What/who are you looking for?</p>
            <textarea type="text" id="textAreaLookingFor" required></textarea>
        </div>
        <div class="areaCollab">
            <p>U wish to add other accounts to this project?</p>
            <textarea type="text" id="textAreaCollab"></textarea>
        </div>
        <div class="areaImg">
            <p>Add some images of the product/project.</p>
            <input id='files' type='file' multiple />
            <output id='result' />
        </div>
        <div class="submitButton">
            <input type="submit" value="submit" onclick="submitForms()">
        </div>
    </form>

The third (hidden) form:

<form class="textAreas" id="formStudent" action="saveData.php" method="POST">
        <div class="fieldsForSquare">
            <p>Fill in these fields for your square</p>
        </div>
        <div class="areaTitle">
            <p>Title</p>
            <textarea type="text" id="textAreaTitleStudent" name="summary" required></textarea>
        </div>
        <div class="areaDescription">
            <p>Short description</p>
            <textarea maxlength="200" type="text" id="textAreaDescriptionStudent" name="shortSummary"
                required></textarea>
        </div>
        <div class="fieldsForPage">
            <p>Fill in these fields for your page</p>
        </div>
        <div class="areaAbout">
            <p>What is it about?</p>
            <textarea type="text" id="textAreaAbout" required></textarea>
        </div>
        <div class="areaCollab">
            <p>U wish to add other accounts to this project?</p>
            <textarea type="text" id="textAreaCollab"></textarea>
        </div>
        <div class="areaImg">
            <p>Add some images of the product/project.</p>
            <input id='files' type='file' multiple />
            <output id='result' />
        </div>
        <div class="submitButton">
            <input type="submit" value="submit" onclick="submitForms_()">
        </div>
    </form>

The Javascript code for submitting the forms depending on which value is selected:

    function submitForms() {
    document.getElementById('formSelect').submit();
    document.getElementById('formSchool').submit();
}

function submitForms_() {
    document.getElementById('formSelect').submit();
    document.getElementById('formStudent').submit();
}

the PHP code where it first checks if an option is selected and then (it should) insert it:

    <?php 
    include('../general.config.php');

    print_r($_POST);
    $summary = $_POST['summary']; 
    $shortSummary = $_POST['shortSummary']; 
    $type = $_POST['type']; 
    
    if(isset($type)){
        $query = $db->prepare("INSERT INTO `project`( `type`, `short_summary`, `summary`) VALUES (?, ?, ?)");

        $query->bindPARAM(1,$type, PDO::PARAM_INT);
        $query->bindPARAM(2,$shortSummary, PDO::PARAM_STR);
        $query->bindPARAM(3,$summary, PDO::PARAM_STR);

        if($query->execute())
        echo "succes!";
    else
        echo "NO SUCCES!";
    }
?>

chooseType() function:

function chooseType(select) {
    if (select.value == 1) {
        document.getElementById('mainAddProjectStudentID').style.display = 'block'
        document.getElementById('mainAddProjectSchoolID').style.display = 'none'
    } else if (select.value == 2) {
        document.getElementById('mainAddProjectSchoolID').style.display = 'block'
        document.getElementById('mainAddProjectStudentID').style.display = 'none'
    } else if (select.value == 0) {
        document.getElementById('mainAddProjectSchoolID').style.display = 'none'
        document.getElementById('mainAddProjectStudentID').style.display = 'none'
    }
}

When no option is selected:

When one of the options is selected:

Answer 1

First thing is you cannot submit two forms with one submit button unless you use ajax. Neither is this the best way to deal with the situation.

I will answer the question in two parts. One where you have three forms and are able to send data from both the forms and then a better way to do this.

Your select option has static values that represent either of the forms. You can simply add a hidden input field to have your form data include the correct type.

<!-- Hidden Input Tag for the formStudent form-->
<input type="hidden" name="type" id="studentType" value="1">

<!-- Hidden Input Tag for the formSchool form-->
<input type="hidden" name="type" id="schoolType" value="2">

Now when either of the forms are submitted your objective of having the type variable populated correctly is met.

One of the right and easier way of doing this would be to use just one form instead of three. You can toggle display of the forms with the select tag, like you are already doing. Use unique names for your fields and in your php script use $type variable to conditionally populate the variables $summary, $shortSummary and $type.

Demonstration (adding just the basic elements)

<form action="saveData.php" method="POST">
    <select id="textAreaType" onchange="chooseType(this)" name="type">
        <option value="0" selected></option>
        <option value="1">Student project</option>
        <option value="2">School institution project</option>
    </select>
    <!-- Student Form> -->
    <div id="mainAddProjectStudentID" style="display:none;">
        <textarea type="text" id="textAreaTitleStudent" name="studentSummary" required></textarea>
        <textarea maxlength="200" type="text" id="textAreaDescriptionStudent" name="studentShortSummary" required></textarea>
    </div>
    
    <!-- School Form -->
    <div id="mainAddProjectSchoolID" style="display:none;">
        <textarea type="text" id="textAreaTitleStudent" name="schoolSummary" required></textarea>
        <textarea maxlength="200" type="text" id="textAreaDescriptionStudent" name="schoolShortSummary" required></textarea>
    </div>
    
    <!-- Submit Button -->
    <input type="submit" value="submit">
    
</form>

And your php to read the data will be

if(!empty($_POST['type']) && ($_POST['type'] == 1 || $_POST['type'] ==2 )){
    $type = $_POST['type']; 
    $summary = ($type == 1)? $_POST['studentSummary'] : $_POST['schoolSummary']; 
    $shortSummary = ($type ==1)? $_POST['studentShortSummary'] : $_POST['schoolShortSummary']; 
}

This is just one way of doing it, there could be many.