DevLiv DevLiv - 27 days ago 13
jQuery Question

Auto submit form information without page reload

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

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.

Comments