too long

I need a help on how to redirect to a page when user is done with the submission to acceptClass.php,

So far I have this:

$('#acceptButton').click(function() {
        var myData = $('#data_field');
        $.post("acceptClass.php",{
        projectName : myData.attr("data_project"), 
        headMark : myData.attr("data_headmark"),
        id : myData.attr("data_id")
        });
   });

And my modal is:

<div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                              This is the confirmation window to PASS all the Quality Control for, <br/><br/>
                              PROJECT : <b>'.$row['PROJECT_NAME'].'</b>
                              HEADMARK : <b>'.$row['HEAD_MARK'].'</b>
                              ID : <b>'.$row['ID'].'
                            </div>
                        </div>
                    </div><br/>
                    <div class="row">
                        <div class="col-md-12">
                          <div class="form-group">
                            <textarea name="reasonForRejection" id="reasonForRejection" class="form-control" placeholder="Reason for rejection" rows="2" required></textarea>
                          </div>
                        </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" name="rejectButton" id="rejectButton" class="btn btn-danger">Confirm REJECT!</button>
                  </div>

and I need to redirect it to the mainPage.php

U need extra argument for 'callback':

$('#acceptButton').click(function() {

    var myData = $('#data_field');

    $.post("acceptClass.php", {
        projectName : myData.attr("data_project"), 
        headMark : myData.attr("data_headmark"),
        id : myData.attr("data_id")
    }, function callback(result) {
        // ... process result if  need
        // then redirect...

        window.location = 'your page url'
    });

);

try this JS event on your html

onclick="javascript:window.location.href='mainPage.php';"

Example :

<button onclick="javascript:window.location.href='mainPage.php';">Redirect</button>

UPDATE 2 :

try this

echo '<button type="button" name="acceptButton" id="acceptButton" class="btn btn-success" onClick="javascript:window.location.href=\'mainPage.php\';">Confirm PASS!</button>';

$('#acceptButton').click(function() {
    var myData = $('#data_field');
    $.post("acceptClass.php",{
    projectName : myData.attr("data_project"), 
    headMark : myData.attr("data_headmark"),
    id : myData.attr("data_id")
    });
    window.location.href="url";
 });

simply use default javascript in your function.