Auto submit form information without page reload
<p>I have a form with a bunch of <code>number</code> fields, all these fields serves the purpose to be added to each other through php. The only problem is that for the numbers to actually be submitted and make the php function work, I have to click the <code>submit</code> button which reloads the page. While this actually does work it is a bit annoying, that it has to reload and  at the same time it removes the numbers from the actual form, so the user can't see where he/she has entered their numbers. </p>

<p>I know it is possible in some way to make it submit automatically, but is it possible to make the php function get the form information every time a user enters something, so that the new <code>total sum</code> would be automatically updated, thus not having to reload?</p>

<p>I have my php and html in the same script, but for the case of this question I have split them into two parts. </p>

<h2>PHP part</h2>

<pre><code>    &lt;?php

$amount_s_bp = $_POST['amountSmallBP'];
$amount_m_bp = $_POST['amountMedBP'];
$amount_l_bp = $_POST['amountLargeBP'];
$amount_xl_bp = $_POST['amountXLBP'];
$amount_s_wp = $_POST['amountSmallWP'];
$amount_m_wp = $_POST['amountMedWP'];
$amount_l_wp = $_POST['amountLargeWP'];
$amount_xl_wp = $_POST['amountXLWP'];
$amount_s_bs = $_POST['amountSmallBS'];
$amount_m_bs = $_POST['amountMedBS'];
$amount_l_bs = $_POST['amountLargeBS'];
$amount_xl_bs = $_POST['amountXLBS'];
$amount_s_bt = $_POST['amountSmallBT'];
$amount_m_bt = $_POST['amountMedBT'];
$amount_l_bt = $_POST['amountLargeBT'];
$amount_xl_bt = $_POST['amountXLBT'];
$shirt_price = 150;

$amount_total = $amount_s_bp + $amount_m_bp + $amount_l_bp + $amount_xl_bp + $amount_s_wp + $amount_m_wp + $amount_l_wp + $amount_xl_wp + $amount_s_bs + $amount_m_bs + $amount_l_bs + $amount_xl_bs + $amount_s_bt + $amount_m_bt + $amount_l_bt + $amount_xl_bt;
$price_total = $amount_total * $shirt_price;

?&gt;
</code></pre>

<h2>Form part</h2>

<p>As you can see I have a bunch of <code>number</code> inputs and then at the end I have a "total" area where the total sum should be displayed using <code>&lt;?php echo $price_total; ?&gt;</code> and <code>&lt;?php echo $amount_total; ?&gt;</code>.</p>

<pre><code>&lt;form action="index.php" method="post" id="orderForm" onsubmit="return checkCheckBoxes(this);"&gt;
&lt;div class="row"&gt;
&lt;div class="col-xs-6"&gt;
&lt;div class="bpShirtDesign"&gt;
    &lt;span id="bpShirtOformT"&gt;Sort Polka&lt;/span&gt;&lt;br&gt;

    &lt;span id="sBP"&gt;Small&lt;/span&gt;
    &lt;div id="firstName"&gt;
        &lt;input type="number" id="amount" name="amountSmallBP" placeholder="Antal"/&gt;
    &lt;/div&gt;

    &lt;span id="mP"&gt;Medium&lt;/span&gt;
    &lt;div id="firstName"&gt;
        &lt;input type="number" id="amount" name="amountMedBP" placeholder="Antal"/&gt;
    &lt;/div&gt;

    &lt;span id="lBP"&gt;Large&lt;/span&gt;
    &lt;div id="firstName"&gt;
        &lt;input type="number" id="amount" name="amountLargeBP" placeholder="Antal"/&gt;
    &lt;/div&gt;

    &lt;span id="xlBP"&gt;X-Large&lt;/span&gt;
    &lt;div id="firstName"&gt;
        &lt;input type="number" id="amount" name="amountXLBP" placeholder="Antal"/&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-xs-6"&gt;
&lt;div class="wpShirtDesign"&gt;
    &lt;span id="bpShirtOformT"&gt;Hvid Polka&lt;/span&gt;&lt;br&gt;

    &lt;span id="sBP"&gt;Small&lt;/span&gt;
    &lt;div id="firstName"&gt;
        &lt;input type="number" id="amount" name="amountSmallWP" placeholder="Antal"/&gt;
    &lt;/div&gt;

    &lt;span id="mP"&gt;Medium&lt;/span&gt;
    &lt;div id="firstName"&gt;
        &lt;input type="number" id="amount" name="amountMedWP" placeholder="Antal"/&gt;
    &lt;/div&gt;

    &lt;span id="lBP"&gt;Large&lt;/span&gt;
    &lt;div id="firstName"&gt;
        &lt;input type="number" id="amount" name="amountLargeWP" placeholder="Antal"/&gt;
    &lt;/div&gt;

    &lt;span id="xlBP"&gt;X-Large&lt;/span&gt;
    &lt;div id="firstName"&gt;
        &lt;input type="number" id="amount" name="amountXLWP" placeholder="Antal"/&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
&lt;div class="col-xs-6"&gt;
&lt;div class="bsShirtDesign"&gt;
    &lt;span id="bpShirtOformT"&gt;Bla Stribet&lt;/span&gt;&lt;br&gt;

    &lt;span id="sBP"&gt;Small&lt;/span&gt;
    &lt;div id="firstName"&gt;
        &lt;input type="number" id="amount" name="amountSmallBS" placeholder="Antal"/&gt;
    &lt;/div&gt;

    &lt;span id="mP"&gt;Medium&lt;/span&gt;
    &lt;div id="firstName"&gt;
        &lt;input type="number" id="amount" name="amountMedBS" placeholder="Antal"/&gt;
    &lt;/div&gt;

    &lt;span id="lBP"&gt;Large&lt;/span&gt;
    &lt;div id="firstName"&gt;
        &lt;input type="number" id="amount" name="amountLargeBS" placeholder="Antal"/&gt;
    &lt;/div&gt;

    &lt;span id="xlBP"&gt;X-Large&lt;/span&gt;
    &lt;div id="firstName"&gt;
        &lt;input type="number" id="amount" name="amountXLBS" placeholder="Antal"/&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-xs-6"&gt;
&lt;div class="btShirtDesign"&gt;
    &lt;span id="bpShirtOformT"&gt;Bla Tattersall&lt;/span&gt;&lt;br&gt;

    &lt;span id="sBP"&gt;Small&lt;/span&gt;
    &lt;div id="firstName"&gt;
        &lt;input type="number" id="amount" name="amountSmallBT" placeholder="Antal"/&gt;
    &lt;/div&gt;

    &lt;span id="mP"&gt;Medium&lt;/span&gt;
    &lt;div id="firstName"&gt;
        &lt;input type="number" id="amount" name="amountMedBT" placeholder="Antal"/&gt;
    &lt;/div&gt;

    &lt;span id="lBP"&gt;Large&lt;/span&gt;
    &lt;div id="firstName"&gt;
        &lt;input type="number" id="amount" name="amountLargeBT" placeholder="Antal"/&gt;
    &lt;/div&gt;

    &lt;span id="xlBP"&gt;X-Large&lt;/span&gt;
    &lt;div id="firstName"&gt;
        &lt;input type="number" id="amount" name="amountXLBT" placeholder="Antal"/&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
&lt;div class="col-md-3"&gt;
&lt;/div&gt;
&lt;div class="col-md-6"&gt;
&lt;div class="bgTotals"&gt;
&lt;input type="submit" value="Submit" id="submitValues"&gt;
&lt;span id="totalAmount" class="h3"&gt;I alt antal = &lt;/span&gt;&lt;?php echo $amount_total; ?&gt;&lt;br&gt;
&lt;span id="totalPrice" class="h3"&gt;I alt pris =  &lt;/span&gt; &lt;?php echo $price_total; ?&gt;&lt;span&gt; DKK&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-md-3"&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;/form&gt;
</code></pre>