Submit Form/Button without Refreshing Page with Jquery or AJAX

Question

I am trying to learn PHP yesterday through online resources. I have a simple program (below codes) which is up and running. The last problem I encountered with this is when I click the button submit, the entire page reloads.

I would like to seek your help how to remove that event. Is it possible that the php script will execute by not reloading the entire page?

I've read few articles online and it says that it can be done using ajax. Unfortunately, i have no idea how to do it because i am still a super beginner. (lol)

<form method="POST">
Salary: <input id="salarytext" type="text" name="salary" onkeypress="return isNumberKey(event)"><br>
Membership Type:
<select name="membershiptype">
        <option value="employed">Employed</option>
        <option value="SE">Self Employed</option>
        <option value="VM">Voluntary Member</option>
        <option value="OFW">OFW</option>
</select>

<br/>

<input type="submit" />

</form>

<div class="SSSContributionComputation">
<?php

$a = (isset($_POST['salary'])) ? $_POST['salary'] : '';
$b = (isset($_POST['membershiptype'])) ? $_POST['membershiptype'] : '';


function employed($a, $b) {

if (empty ($a)) {echo "Type in your Salary to see the results.";}
elseif ($a <= 1249.99) {echo "Your Employer's (ER) Contribution is P80.70.<br>Your Contribution (EE) is P33.30.<br>Total amount credited to your SSS Account is P114.00";}
elseif ($a <= 1749.99) {echo "Your Employer's (ER) Contribution is P116.00.<br>Your Contribution (EE) is P50.00.<br>Total amount credited to your SSS Account is P166.00";}
elseif ($a <= 2249.99) {echo "Your Employer's (ER) Contribution is P151.30.<br>Your Contribution (EE) is P66.70.<br>Total amount credited to your SSS Account is P218.00";}
elseif ($a <= 2749.99) {echo "Your Employer's (ER) Contribution is P186.70.<br>Your Contribution (EE) is P83.30.<br>Total amount credited to your SSS Account is P270.00";}
elseif ($a <= 3249.99) {echo "Your Employer's (ER) Contribution is P222.00.<br>Your Contribution (EE) is P100.00.<br>Total amount credited to your SSS Account is P322.00";}
elseif ($a <= 3749.99) {echo "Your Employer's (ER) Contribution is P257.30.<br>Your Contribution (EE) is P116.70.<br>Total amount credited to your SSS Account is P374.00";}
elseif ($a <= 4249.99) {echo "Your Employer's (ER) Contribution is P292.70.<br>Your Contribution (EE) is P133.30.<br>Total amount credited to your SSS Account is P426.00";}
elseif ($a <= 4749.99) {echo "Your Employer's (ER) Contribution is P328.00.<br>Your Contribution (EE) is P150.00.<br>Total amount credited to your SSS Account is P478.00";}
elseif ($a <= 5249.99) {echo "Your Employer's (ER) Contribution is P363.30.<br>Your Contribution (EE) is P166.70.<br>Total amount credited to your SSS Account is P530.00";}
elseif ($a <= 5749.99) {echo "Your Employer's (ER) Contribution is P398.70.<br>Your Contribution (EE) is P183.30.<br>Total amount credited to your SSS Account is P582.00";}
elseif ($a <= 6249.99) {echo "Your Employer's (ER) Contribution is P434.00.<br>Your Contribution (EE) is P200.00.<br>Total amount credited to your SSS Account is P634.00";}
elseif ($a <= 6749.99) {echo "Your Employer's (ER) Contribution is P469.30.<br>Your Contribution (EE) is P216.70.<br>Total amount credited to your SSS Account is P686.00";}
elseif ($a <= 7249.99) {echo "Your Employer's (ER) Contribution is P504.70.<br>Your Contribution (EE) is P233.30.<br>Total amount credited to your SSS Account is P738.00";}
elseif ($a <= 7749.99) {echo "Your Employer's (ER) Contribution is P540.00.<br>Your Contribution (EE) is P250.00.<br>Total amount credited to your SSS Account is P790.00";}
elseif ($a <= 8249.99) {echo "Your Employer's (ER) Contribution is P575.30.<br>Your Contribution (EE) is P266.70.<br>Total amount credited to your SSS Account is P842.00";}
elseif ($a <= 8749.99) {echo "Your Employer's (ER) Contribution is P610.70.<br>Your Contribution (EE) is P283.30.<br>Total amount credited to your SSS Account is P894.00";}
elseif ($a <= 9249.99) {echo "Your Employer's (ER) Contribution is P646.00.<br>Your Contribution (EE) is P300.00.<br>Total amount credited to your SSS Account is P946.00";}
elseif ($a <= 9749.99) {echo "Your Employer's (ER) Contribution is P681.30.<br>Your Contribution (EE) is P316.70.<br>Total amount credited to your SSS Account is P998.00";}
elseif ($a <= 10249.99) {echo "Your Employer's (ER) Contribution is P716.70.<br>Your Contribution (EE) is P333.30.<br>Total amount credited to your SSS Account is P1,050.00";}
elseif ($a <= 10749.99) {echo "Your Employer's (ER) Contribution is P752.00.<br>Your Contribution (EE) is P350.00.<br>Total amount credited to your SSS Account is P1,102.00";}
elseif ($a <= 11249.99) {echo "Your Employer's (ER) Contribution is P787.30.<br>Your Contribution (EE) is P366.70.<br>Total amount credited to your SSS Account is P1,154.00";}
elseif ($a <= 11749.99) {echo "Your Employer's (ER) Contribution is P822.70.<br>Your Contribution (EE) is P383.30.<br>Total amount credited to your SSS Account is P1,206.00";}
elseif ($a <= 12249.99) {echo "Your Employer's (ER) Contribution is P858.00.<br>Your Contribution (EE) is P400.00.<br>Total amount credited to your SSS Account is P1,258.00";}
elseif ($a <= 12749.99) {echo "Your Employer's (ER) Contribution is P893.30.<br>Your Contribution (EE) is P416.70.<br>Total amount credited to your SSS Account is P1,310.00";}
elseif ($a <= 13249.99) {echo "Your Employer's (ER) Contribution is P928.70.<br>Your Contribution (EE) is P433.30.<br>Total amount credited to your SSS Account is P1,362.00";}
elseif ($a <= 13749.99) {echo "Your Employer's (ER) Contribution is P964.00.<br>Your Contribution (EE) is P450.00.<br>Total amount credited to your SSS Account is P1,414.00";}
elseif ($a <= 14249.99) {echo "Your Employer's (ER) Contribution is P999.30.<br>Your Contribution (EE) is P466.70.<br>Total amount credited to your SSS Account is P1,466.00";}
elseif ($a <= 14749.99) {echo "Your Employer's (ER) Contribution is P1,034.70.<br>Your Contribution (EE) is P483.30.<br>Total amount credited to your SSS Account is P1,518.00";}
elseif ($a <= 30000.00) {echo "Your Employer's (ER) Contribution is P1,090.00.<br>Your Contribution (EE) is P500.00.<br>Total amount credited to your SSS Account is P1,590.00";}
elseif ($a > 30000) {echo "You reached the maximum!<br>Your Employer's (ER) Contribution is P1,090.00.<br>Your Contribution (EE) is P500.00.<br>Total amount credited to your SSS Account is P1,590.00";}

}

function sevmofw($a, $b) {

if (empty ($a)) {echo "Type in your Salary to see the results.";}
elseif ($a <= 1249.99) {echo "Your Total Contribution (EE) is P104.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 1749.99) {echo "Your Total Contribution (EE) is P156.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 2249.99) {echo "Your Total Contribution (EE) is P208.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 2749.99) {echo "Your Total Contribution (EE) is P260.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 3249.99) {echo "Your Total Contribution (EE) is P312.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 3749.99) {echo "Your Total Contribution (EE) is P364.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 4249.99) {echo "Your Total Contribution (EE) is P416.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 4749.99) {echo "Your Total Contribution (EE) is P468.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 5249.99) {echo "Your Total Contribution (EE) is P520.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 5749.99) {echo "Your Total Contribution (EE) is P572.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 6249.99) {echo "Your Total Contribution (EE) is P624.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 6749.99) {echo "Your Total Contribution (EE) is P676.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 7249.99) {echo "Your Total Contribution (EE) is P728.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 7749.99) {echo "Your Total Contribution (EE) is P780.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 8249.99) {echo "Your Total Contribution (EE) is P832.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 8749.99) {echo "Your Total Contribution (EE) is P884.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 9249.99) {echo "Your Total Contribution (EE) is P936.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 9749.99) {echo "Your Total Contribution (EE) is P988.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 10249.99) {echo "Your Total Contribution (EE) is P1,040.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 10749.99) {echo "Your Total Contribution (EE) is P1,092.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 11249.99) {echo "Your Total Contribution (EE) is P1,144.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 11749.99) {echo "Your Total Contribution (EE) is P1,196.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 12249.99) {echo "Your Total Contribution (EE) is P1,248.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 12749.99) {echo "Your Total Contribution (EE) is P1,300.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 13249.99) {echo "Your Total Contribution (EE) is P1,352.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 13749.99) {echo "Your Total Contribution (EE) is P1,404.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 14249.99) {echo "Your Total Contribution (EE) is P1,456.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 14749.99) {echo "Your Total Contribution (EE) is P1,508.<br>This amount will be credited to your SSS Account.";}
elseif ($a <= 30000.00) {echo "Your Total Contribution (EE) is P1,560.<br>This amount will be credited to your SSS Account.";}
elseif ($a > 30000) {echo "You reached the maximum!<br>Your Total Contribution (EE) is P1,560.<br>This amount will be credited to your SSS Account.";}


}


if ($b == 'employed') {
    employed($a, $b); //Pass the variables into the function from the outside.
}
elseif ($b == 'SE') {
    sevmofw($a, $b);
}
elseif ($b == 'VM') {
    sevmofw($a, $b);
}
elseif ($b == 'OFW') {
    sevmofw($a, $b);
}


?>

Answer 1

I would actually suggest that you don't really need PHP for this application.

PHP is a scripting language that operates on a web server. PHP can only execute code when someone requests the php file from the web-server. This can be done synchronously (like when you submit the form by pressing submit) or asynchronously (like when you use the AJAX pattern, which uses javascript to request the page from the server).

PHP is great when you need to interact with other resources on the server, like files or a database. In your code above you just have a little bit of logic, based on which you want to display something on the page.

You can easily accomplish this by moving all of the logic into javascript. JavaScript runs in the user's webbrowser after a page has loaded, so it can change the page without sending a request back to the server.

PHP can accomplish your goal. But javascript is a more natural fit if you don't want the page refresh.

It'll look something like this (though the code can be made much shorter too):

<script>
function processForm(){
    var membershiptype = document.getElementById('membershiptype').options[document.getElementById('membershiptype').selectedIndex].value;
    if(membershiptype == 'employed'){
        employed();
    }else{
        sevmofw();
    }
}
function employed() {
    //get the value from the form
    var sal = document.getElementById('salarytext').value;
    var message =  "Type in your Salary to see the results.";
if (sal <= 1249.99) {message = "Your Employer's (ER) Contribution is P80.70.<br>Your Contribution (EE) is P33.30.<br>Total amount credited to your SSS Account is P114.00";}
elseif (sal <= 1749.99) {message = "Your Employer's (ER) Contribution is P116.00.<br>Your Contribution (EE) is P50.00.<br>Total amount credited to your SSS Account is P166.00";}
elseif (sal <= 2249.99) {message = "Your Employer's (ER) Contribution is P151.30.<br>Your Contribution (EE) is P66.70.<br>Total amount credited to your SSS Account is P218.00";}
elseif (sal <= 2749.99) {message = "Your Employer's (ER) Contribution is P186.70.<br>Your Contribution (EE) is P83.30.<br>Total amount credited to your SSS Account is P270.00";}
elseif (sal <= 3249.99) {message = "Your Employer's (ER) Contribution is P222.00.<br>Your Contribution (EE) is P100.00.<br>Total amount credited to your SSS Account is P322.00";}
elseif (sal <= 3749.99) {message = "Your Employer's (ER) Contribution is P257.30.<br>Your Contribution (EE) is P116.70.<br>Total amount credited to your SSS Account is P374.00";}
elseif (sal <= 4249.99) {message = "Your Employer's (ER) Contribution is P292.70.<br>Your Contribution (EE) is P133.30.<br>Total amount credited to your SSS Account is P426.00";}
elseif (sal <= 4749.99) {message = "Your Employer's (ER) Contribution is P328.00.<br>Your Contribution (EE) is P150.00.<br>Total amount credited to your SSS Account is P478.00";}
elseif (sal <= 5249.99) {message = "Your Employer's (ER) Contribution is P363.30.<br>Your Contribution (EE) is P166.70.<br>Total amount credited to your SSS Account is P530.00";}
elseif (sal <= 5749.99) {message = "Your Employer's (ER) Contribution is P398.70.<br>Your Contribution (EE) is P183.30.<br>Total amount credited to your SSS Account is P582.00";}
elseif (sal <= 6249.99) {message = "Your Employer's (ER) Contribution is P434.00.<br>Your Contribution (EE) is P200.00.<br>Total amount credited to your SSS Account is P634.00";}
elseif (sal <= 6749.99) {message = "Your Employer's (ER) Contribution is P469.30.<br>Your Contribution (EE) is P216.70.<br>Total amount credited to your SSS Account is P686.00";}
elseif (sal <= 7249.99) {message = "Your Employer's (ER) Contribution is P504.70.<br>Your Contribution (EE) is P233.30.<br>Total amount credited to your SSS Account is P738.00";}
elseif (sal <= 7749.99) {message = "Your Employer's (ER) Contribution is P540.00.<br>Your Contribution (EE) is P250.00.<br>Total amount credited to your SSS Account is P790.00";}
elseif (sal <= 8249.99) {message = "Your Employer's (ER) Contribution is P575.30.<br>Your Contribution (EE) is P266.70.<br>Total amount credited to your SSS Account is P842.00";}
elseif (sal <= 8749.99) {message = "Your Employer's (ER) Contribution is P610.70.<br>Your Contribution (EE) is P283.30.<br>Total amount credited to your SSS Account is P894.00";}
elseif (sal <= 9249.99) {message = "Your Employer's (ER) Contribution is P646.00.<br>Your Contribution (EE) is P300.00.<br>Total amount credited to your SSS Account is P946.00";}
elseif (sal <= 9749.99) {message = "Your Employer's (ER) Contribution is P681.30.<br>Your Contribution (EE) is P316.70.<br>Total amount credited to your SSS Account is P998.00";}
elseif (sal <= 10249.99) {message = "Your Employer's (ER) Contribution is P716.70.<br>Your Contribution (EE) is P333.30.<br>Total amount credited to your SSS Account is P1,050.00";}
elseif (sal <= 10749.99) {message = "Your Employer's (ER) Contribution is P752.00.<br>Your Contribution (EE) is P350.00.<br>Total amount credited to your SSS Account is P1,102.00";}
elseif (sal <= 11249.99) {message = "Your Employer's (ER) Contribution is P787.30.<br>Your Contribution (EE) is P366.70.<br>Total amount credited to your SSS Account is P1,154.00";}
elseif (sal <= 11749.99) {message = "Your Employer's (ER) Contribution is P822.70.<br>Your Contribution (EE) is P383.30.<br>Total amount credited to your SSS Account is P1,206.00";}
elseif (sal <= 12249.99) {message = "Your Employer's (ER) Contribution is P858.00.<br>Your Contribution (EE) is P400.00.<br>Total amount credited to your SSS Account is P1,258.00";}
elseif (sal <= 12749.99) {message = "Your Employer's (ER) Contribution is P893.30.<br>Your Contribution (EE) is P416.70.<br>Total amount credited to your SSS Account is P1,310.00";}
elseif (sal <= 13249.99) {message = "Your Employer's (ER) Contribution is P928.70.<br>Your Contribution (EE) is P433.30.<br>Total amount credited to your SSS Account is P1,362.00";}
elseif (sal <= 13749.99) {message = "Your Employer's (ER) Contribution is P964.00.<br>Your Contribution (EE) is P450.00.<br>Total amount credited to your SSS Account is P1,414.00";}
elseif (sal <= 14249.99) {message = "Your Employer's (ER) Contribution is P999.30.<br>Your Contribution (EE) is P466.70.<br>Total amount credited to your SSS Account is P1,466.00";}
elseif (sal <= 14749.99) {message = "Your Employer's (ER) Contribution is P1,034.70.<br>Your Contribution (EE) is P483.30.<br>Total amount credited to your SSS Account is P1,518.00";}
elseif (sal <= 30000.00) {message = "Your Employer's (ER) Contribution is P1,090.00.<br>Your Contribution (EE) is P500.00.<br>Total amount credited to your SSS Account is P1,590.00";}
elseif (sal > 30000) {message = "You reached the maximum!<br>Your Employer's (ER) Contribution is P1,090.00.<br>Your Contribution (EE) is P500.00.<br>Total amount credited to your SSS Account is P1,590.00";}

document.getElementById('message').innerText = message;
}

function sevmofw() {
    //get the value from the form
    var sal = document.getElementById('salarytext').value;
    var message =  "Type in your Salary to see the results.";
if (sal <= 1249.99) {message = "Your Total Contribution (EE) is P104.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 1749.99) {message = "Your Total Contribution (EE) is P156.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 2249.99) {message = "Your Total Contribution (EE) is P208.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 2749.99) {message = "Your Total Contribution (EE) is P260.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 3249.99) {message = "Your Total Contribution (EE) is P312.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 3749.99) {message = "Your Total Contribution (EE) is P364.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 4249.99) {message = "Your Total Contribution (EE) is P416.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 4749.99) {message = "Your Total Contribution (EE) is P468.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 5249.99) {message = "Your Total Contribution (EE) is P520.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 5749.99) {message = "Your Total Contribution (EE) is P572.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 6249.99) {message = "Your Total Contribution (EE) is P624.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 6749.99) {message = "Your Total Contribution (EE) is P676.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 7249.99) {message = "Your Total Contribution (EE) is P728.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 7749.99) {message = "Your Total Contribution (EE) is P780.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 8249.99) {message = "Your Total Contribution (EE) is P832.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 8749.99) {message = "Your Total Contribution (EE) is P884.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 9249.99) {message = "Your Total Contribution (EE) is P936.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 9749.99) {message = "Your Total Contribution (EE) is P988.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 10249.99) {message = "Your Total Contribution (EE) is P1,040.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 10749.99) {message = "Your Total Contribution (EE) is P1,092.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 11249.99) {message = "Your Total Contribution (EE) is P1,144.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 11749.99) {message = "Your Total Contribution (EE) is P1,196.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 12249.99) {message = "Your Total Contribution (EE) is P1,248.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 12749.99) {message = "Your Total Contribution (EE) is P1,300.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 13249.99) {message = "Your Total Contribution (EE) is P1,352.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 13749.99) {message = "Your Total Contribution (EE) is P1,404.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 14249.99) {message = "Your Total Contribution (EE) is P1,456.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 14749.99) {message = "Your Total Contribution (EE) is P1,508.<br>This amount will be credited to your SSS Account.";}
elseif (sal <= 30000.00) {message = "Your Total Contribution (EE) is P1,560.<br>This amount will be credited to your SSS Account.";}
elseif (sal > 30000) {message = "You reached the maximum!<br>Your Total Contribution (EE) is P1,560.<br>This amount will be credited to your SSS Account.";}

document.getElementById('message').innerText = message;
}
</script>

<form method="POST">
Salary: <input id="salarytext" type="text" name="salary" onkeypress="return isNumberKey(event)"><br>
Membership Type:
<select name="membershiptype">
        <option value="employed">Employed</option>
        <option value="SE">Self Employed</option>
        <option value="VM">Voluntary Member</option>
        <option value="OFW">OFW</option>
</select>

<br/>

<input type="button" value="submit" onClick="processForm();"/>

</form>

<div class="SSSContributionComputation" id="message"></div>