Auto submit form information without page reload

Question

I have a form with a bunch of number 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 submit 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.

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 total sum would be automatically updated, thus not having to reload?

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

PHP part

    <?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;

?>

Form part

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

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

    <span id="sBP">Small</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountSmallBP" placeholder="Antal"/>
    </div>

    <span id="mP">Medium</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountMedBP" placeholder="Antal"/>
    </div>

    <span id="lBP">Large</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountLargeBP" placeholder="Antal"/>
    </div>

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

    <span id="sBP">Small</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountSmallWP" placeholder="Antal"/>
    </div>

    <span id="mP">Medium</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountMedWP" placeholder="Antal"/>
    </div>

    <span id="lBP">Large</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountLargeWP" placeholder="Antal"/>
    </div>

    <span id="xlBP">X-Large</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountXLWP" placeholder="Antal"/>
    </div>
</div>
</div>
</div>

<div class="row">
<div class="col-xs-6">
<div class="bsShirtDesign">
    <span id="bpShirtOformT">Bla Stribet</span><br>

    <span id="sBP">Small</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountSmallBS" placeholder="Antal"/>
    </div>

    <span id="mP">Medium</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountMedBS" placeholder="Antal"/>
    </div>

    <span id="lBP">Large</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountLargeBS" placeholder="Antal"/>
    </div>

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

    <span id="sBP">Small</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountSmallBT" placeholder="Antal"/>
    </div>

    <span id="mP">Medium</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountMedBT" placeholder="Antal"/>
    </div>

    <span id="lBP">Large</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountLargeBT" placeholder="Antal"/>
    </div>

    <span id="xlBP">X-Large</span>
    <div id="firstName">
        <input type="number" id="amount" name="amountXLBT" placeholder="Antal"/>
    </div>
</div>
</div>
</div>

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

</form>

Answer 1

You don't need a server-side script for this kind of processing. Just prevent that the form is submitted with:

<button type="button">Button</button>

Then, using javascript, retrieve the value of each form and perform calculations.

//Gets the value
var value = document.getElementById('myid')
//Repeat that last line until all values are retrieved
...
//Make your calculations
var result = value + value2 //... etc

//Display your result
document.getElementById('resultid').textContent = result;

Although, if you are going to sum a lot of elements, it might be better to give the same class to those elements, so you can do this:

var elements = document.getElementsByClassName('myclassname');
var sum = 0;

for (var i=0, max=elements.length; i < max; i++) {
    sum = sum + parseInt(elements.item(i).textContent);
}

UPDATE

To add an event listener to every input you can iterate over every element or you could associate a listener to a parent element like this:

document.getElementById('myParentElement').addEventListener('input',   function() {
 return update();
}, false);

And you should throw all the code that retrieves the values from the inputs, perform the calculations and updates the DOM in the update() function, which will get called every time an input changes.

Answer 2

First things first, you have the id "amount" on all of your inputs. This will not work, an id can only be used once per page. So, figure out a convention to make these id's unique. Like id='field1-id' or something. Also, remove the action and method attributes from your form tag. They'll be unneeded at this point.

Then you can use jQuery and an AJAX call to do what you are looking for. Something like:

$("#submitValues").bind('click', function(e){
    var formData[];

    $("#orderForm").each('input[^="-id"]', function(){
         formData.push($(this).val());
    });

   $.ajax({
      url: 'index.php',
      data: formData
   }).success(function(response){
       $("totalAmount").val(response.returnedTotalAmount);
       $("totalPrice").val(response.returnedTotalPrice);
   }).fail(function(response){
      /* do something else */
   });

 e.preventDefault();
 });

Mind you this code is untested, and very hastily written but it should give you the general idea of how to accomplish what you're after.