output result calculate instantly php - php

Question

I have a code here...the thing that i want is to calculate the total instantly and show in the textbox without clicking the action button.
code:
<?php
include('include/connect.php');
if(isset($_POST['enter']))
{
$name = $_POST['name'];
$score1 = $_POST['optA'];
$score2 = $_POST['optB'];
$score3 = $_POST['optC'];
$score4 = $_POST['optD'];
$total1 = $_POST['total'];
$total = ($score1 + $score2 + $score3 + $score4);
mysql_query("INSERT INTO score (name,score1,score2,score3,score4,total) VALUE ('$name','$score1','$score2','$score3','$score4','$total')");
echo "succesful";
}
else
{
echo "you fail to execute!";
}
?>
code:
<form method="post" action="index.php">
<input type="text" name="name" />
<input type="radio" name="optA" value="1" />1
<input type="radio" name="optA" value="2" />2
<input type="radio" name="optA" value="3" />3<br>
<input type="radio" name="optB" value="1" />1
<input type="radio" name="optB" value="2" />2
<input type="radio" name="optB" value="3" />3<br>
<input type="radio" name="optC" value="1" />1
<input type="radio" name="optC" value="2" />2
<input type="radio" name="optC" value="3" />3<br>
<input type="radio" name="optD" value="1" />1
<input type="radio" name="optD" value="2" />2
<input type="radio" name="optD" value="3" />3
<input type="text" name="total" value="<?php echo $total ?>" />
<input type="submit" value="enter" name="enter" />
</form>

Answer 1

PHP is executed before the content reaches the browser, so no elements will be loaded, so you cannot access them. It is a server-side language, not client-side; therefore you cannot do this. An example of something client-side is Javascript. However, you can create a HTML element and set its attributes, then echo it onto the page.

Answer 2

You'll have to use JavaScript in some form or another to not have to post the answer back to the server and wait for a response.
Here's how you can do it in JQuery.
function calculateTotal() {
var total = 0;
$('form input:radio:checked').each(function () {
total = total + parseInt($(this).val());
});
$('form [name=total]').val(total);
return false;
}
In your HTML you'll need to change your submit button to something else like this:
<span onclick="calculateTotal()">Enter</span>