PHP - multiple forms, get values from both upon submit?

Question

I am a little stuck at the moment and could use some help please.

I have a calendar which is being used by multiple departments to enter their schedule in. Each user is asked to complete 1x select and 2x input fields which are divided into FORM 1 and FORM 2

FORM 1:

• department code (onclick submit event)

FORM 2:

• name
• date
• submit button

After the user has selected his/her department code, the calendar will refresh and fetch the entries for this specific department only (meaning it will filter all records for the department code). After that, the user has to enter his username and select a date, followed by pressing the submit button (form 2).

Now, the problem is that in order for FORM 2 to submit correctly, I need to know the department code from Form 1. Additionally, I am having troubles preventing the calendar from refreshing (Form 1) when pressing the submit button for Form 2.

In short, how can I clearly distinguish the ($_POST) between form 1 and form 2, while accessing both form's data?

PHP

<?php
// SHOULD BE EXECUTED AFTER THE SUBMIT BUTTON WAS CLICKED
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['type']) && ($_POST['type']=='new_entry')) {

    // include connection details
    include '../../plugins/MySQL/connect_db.php';

    // Open a new connection to the MySQL server
    $con = new mysqli($dbhost,$dbuser,$dbpass,$dbname);

    // Output any connection error
    if ($con->connect_error) {
        die('Error : ('. $con->connect_errno .') '. $con->connect_error);
    }

    // define variables
    $table = 'calendar';
    $type = mysqli_real_escape_string($con,$_POST['type']);
    $holidex = mysqli_real_escape_string($con,$_POST['holidex']);

    if($type == 'new_entry')
    {               
        // define variables and query
        $mod_property = mysqli_real_escape_string($con,$_POST['holidex']);
        $mod_name = mysqli_real_escape_string($con,$_POST['mod_name']);
        $mod_date = date('Y-m-d',strtotime($_POST['mod_date']));

        $sql = "INSERT INTO calendar (`title`, `startdate`, `enddate`, `allDay`, `color`, `holidex`) VALUES ('$mod_name','$mod_date','$mod_date','true','','$mod_property')";

        print($sql);

        $result = $con->query($sql) or die('<p>Could not submit new MOD record into database: ' . MYSQLI_ERROR() . '</p>');

        $result->free();
    }

    $con->close();
}
?>



        <form name="form1" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
        <!-- <form name="mod_form" action="../../plugins/MySQL/ajax_action.php?type=new_entry" method="POST"> -->

          <!-- Property -->
          <div class="col-md-4">
            <label>Property</label>
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-server"></i></span>
                <select name="holidex" id="holidex" class="form-control select2" style="width: 100%;" data-placeholder="Select your property" onchange="this.form.submit();" method="POST" <?php if($_SESSION['Access']=='User') { echo "disabled"; } ?>>

                    // get all my departments and their respective codes
                    <option value="1">Dept. 1</option>
                    <option value="2">Dept. 2</option>
                    <option value="3">Dept. 3</option>

                </select>
            </div>
            <!-- /btn-group -->
          </div>
          <!-- /.property -->

        </form>

        <form name="form2" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
          <!-- MOD Name -->
          <div class="col-md-4">
            <label>MOD Name</label>
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-user"></i></span>
                <select name="mod_name" id="mod_name" class="form-control select2" style="width: 100%;" data-placeholder="Select a name">
                    <option value=""></option>
                    <option value="1">User1</option>
                    <option value="2">User2</option>
                    <option value="3">User3</option>
                </select>
            </div>
            <!-- /.input-group -->
          </div>
          <!-- /.mod name -->

          <!-- MOD Date -->
          <div class="col-md-3">
            <label>MOD Date</label>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-server"></i></span>
              <input type="date" class="form-control" name="daterangepicker" id="daterangepicker" />
              <!-- <input type="date" id="mod_date" name="mod_date" class="form-control" style="width: 100%;"> -->
            </div>
          </div>
          <!-- /.mod date -->

            // hidden input field to determine the type and help differentiate the $_POST submissions
            <input type="hidden" class="form-control" name="type" id="type" value="new_entry"/>

          <!-- Submit button -->
          <div class="col-md-1 text-center">
            <label>&nbsp;</label>
            <button type="submit" name="btnSubmit" class="btn btn-primary btn-block" onclick="this.disabled=true; this.value = 'Wait...'; this.form.submit(); return true;">Submit</button>
          </div>
          <!-- /.submit button -->

        </form>
        <!-- /.form 2 -->

Answer 1

Following SiteThief's suggestion, I am skipping the <form> approach altogether and am submitting the results via AJAX to my php handler file. Works like a charm without the pesky form submission problems.

JS

<script>
    // SAVE NEW DEPARTMENT RECORD - SAVE BUTTON
    $("#SubmitButton").click(function() {

        // check that input fields are not empty
        if($("#holidex").val()!="" && $("#mod_name").val()!="" && $("#mod_date").val()!="") {

            $.ajax({
                url: "../../plugins/MySQL/ajax_action.php",
                type: "POST",
                async: true, 
                data: { action:"mod_calendar",type:"new_entry",holidex:$("#holidex").val(),mod_name:$("#mod_name").val(),mod_date:$("#mod_date").val()},
                dataType: "html",           

                success: function(data) {
                    $('#mod_output').html(data); 
                    drawVisualization();
                },  
            });
        } else {
            //notify the user they need to enter data
            alert("Please choose a hotel, staff name and MOD date from the list.");
            return;
        }

        // close modal and refresh page
        setTimeout(function(){location.reload()}, 1000);
        return;
    });
</script>