auto sum of the input field

[pioneerfm]

hello everyone, i need some help. i am a beginner in web programming. i am trying to make a php code which i will use to input the mark of the student. first three field will be those input mark. in next field i would like to show the ceil(sum) of first three field’s input. and in next one i would like to show the grade of the corresponding total mark. (0-39 = F, 40-44= E, 45-49= D, 50-54 = C-, 55-59 = C, 60-64 = C+, 65-69 = B-, 70–74 = B, 75-79 = B+, 80- 84 = A-, 85-89 = A, 90-100 = A+).
The problem is i want to show the total and grade before i submitting the form. is there any way to do this? another thing, is there any way to check the input value and prevent user to put wrong value (1st term=0-20, 2nd term=0-20, Final=60). please i need detail help.

Thanks

<form method="post" action="input_mark.php">
<table width="90%" align="center" border="0">

<?php
    include "db.php";

    $code=$_GET['code'];
    $program=$_GET['program'];

    $sub=mysql_query("select title from subject where code='$code'");
    $sub_t=mysql_fetch_array($sub);
    echo"<br /><h4 align=center>Cource Title: $sub_t[title]</h4><br />";
    echo "<input name=code type=hidden value=$code>";

    $reg=mysql_query("select id from registration where code='$code' and program='$program' and edit=0");
    $reg_id=mysql_fetch_array($reg);

    if(!$reg_id){
        echo "<tr>
        <td colspan=7 align=center><font color=red><br /><b>No any Student has been registred for this subject</b></font></td>
          </tr>";
    }
    else{
        echo"<tr>
        <td ><strong>ID</strong></td>
        <td ><strong>Name</strong></td>
          <td ><strong>1st Term (0 - 20)</strong></td>
          <td ><strong>2nd Term (0 - 20)</strong></td>
          <td ><strong>Final Term (0 - 60)</strong></td>
          <td ><strong>Total</strong></td>
          <td ><strong>Grade</strong></td>
          </tr>";
        $sql=mysql_query("select re.id, name, season from registration re, student st where re.id=st.id and code='$code' and edit=0");
        while($db=mysql_fetch_array($sql)){
            echo"<tr>
            <td><input name=id[$db[id]] type=hidden value=$db[id]>$db[id]</td>
            <td>$db[name]</td>
            <td><input name=1stterm[$db[id]] type=text ></td>
            <td ><input name=2ndterm[$db[id]] type=text ></td>
            <td ><input name=final[$db[id]] type=text ></td>
            <td ><input name=total[$db[id]] type=readonly value=""></td>
            <td ><input name=grade[$db[id]] type=readonly value=""></td>
            <input name=season type=hidden value=$db[season]>
            </tr>";
        }

        echo"<tr>
            <td colspan=7 align=center><input type=submit name=Submit value=Submit></td>
            </tr>";
    }
?>

</table>
</form>

[misson]

The problem is i want to show the total and grade before i submitting the form.

Since you want to perform processing client-side, you'll need to use a client side script. The only client-side language that's supported across browsers is Javascript, so that's what you'll have to write it in. JS libraries (such as jQuery, Prototype and MooTools) can make this very easy. Just make sure you re-do the processing server side, since user input is not to be trusted (there's another instance of this in your use of SQL, covered below).

another thing, is there any way to check the input value and prevent user to put wrong value (1st term=0-20, 2nd term=0-20, Final=60).

To restrict the data a user can enter in a form field, use an input mask. There are many existing ones available; a web search will turn them up.

<form method="post" action="input_mark.php">
<table width="90%" align="center" border="0">
<?php
    include "db.php";

DB access should be performed before you start outputting the form. If there's a problem, this will let you skip outputting the form. Also, DB access should be performed in a separate data access layer, isolating the details of data storage from the rest of the script. This is part of reducing coupling.

    $code=$_GET['code'];
    $program=$_GET['program'];

    $sub=mysql_query("select title from subject where code='$code'");
    $sub_t=mysql_fetch_array($sub);
    echo"<br /><h4 align=center>Cource Title: $sub_t[title]</h4><br />";
    echo "<input name=code type=hidden value=$code>";

    $reg=mysql_query("select id from registration where code='$code' and program='$program' and edit=0");
        [...]
        $sql=mysql_query("select re.id, name, season from registration re, student st where re.id=st.id and code='$code' and edit=0"); 

This is susceptible to SQL Injection (and HTML injection/XSS, for that matter) via $_GET['code'] and $_GET['program']. The mysql driver is very outdated, having been supplanted twice over. Switch to PDO and use prepared statements. If you need a tutorial, read "Writing MySQL Scripts with PHP and PDO."

To deal with HTML injection, sanitize the input using (e.g.) strip_tags or one of the filter functions before outputting it in HTML.

    $reg_id=mysql_fetch_array($reg);

    if(!$reg_id){
        echo "<tr>
        <td colspan=7 align=center><font color=red><br /><b>No any Student has been registred for this subject</b></font></td>
          </tr>"; 

<font>, <b> and <br /> are presentational elements. You should only use semantic elements, since HTML is for denoting document structure. Use CSS for style. Avoid <br /> if possible (it usually is; here, you can use margins or http://www.w3.org/TR/CSS2/box.html#padding-properties), and never use <font> or <b>.

        <td ><strong>ID</strong></td>
        <td ><strong>Name</strong></td>
          <td ><strong>1st Term (0 - 20)</strong></td>
          <td ><strong>2nd Term (0 - 20)</strong></td>
          <td ><strong>Final Term (0 - 60)</strong></td>
          <td ><strong>Total</strong></td>
          <td ><strong>Grade</strong></td>
          </tr>"; 

<strong> is a good element, since it's semantic, but here <th> would be better, since the data are headers for the table columns.

        while($db=mysql_fetch_array($sql)){
            echo"<tr>
            <td><input name=id[$db[id]] type=hidden value=$db[id]>$db[id]</td> 

HTML attribute values should always be quoted to be on the safe side (you can use single quotes if double quotes would require escaping). It will also make it easier should you ever wish to transition to XHTML (yeah, I know some people say it's dead), for which quotes in attributes are mandatory.

            <td>$db[name]</td>
            <td><input name=1stterm[$db[id]] type=text ></td>
            <td ><input name=2ndterm[$db[id]] type=text ></td>
            <td ><input name=final[$db[id]] type=text ></td>
            <td ><input name=total[$db[id]] type=readonly value=""></td>
            <td ><input name=grade[$db[id]] type=readonly value=""></td>
            <input name=season type=hidden value=$db[season]> 

Close all elements, including those <input>s. Only <td> or <th> can be children of a <tr> element; the hidden "season" element must be placed in one.

You could reorder the parts of the input field names as:

            <td>$db[name]<input name='grades[$db[id][season]' type='hidden' value='$db[season]' /></td>
            <td><input name='grades[$db[id]][1st]' /></td>
            <td ><input name='grades[$db[id]][2nd]' /></td>
            <td ><input name='grades[$db[id]][final]' /></td>
            <td ><input name='grades[$db[id]][total]' type='readonly' value=''></td>
            <td ><input name='grades[$db[id]][letter]" type='readonly' value=''></td> 

thus packaging the grades for each student in a particular season in their own arrays, which makes it easier to pass the data around within the form handler.


For more on form design, read:

• esellar's excellent post in the "Javascript form check for multiple row input" thread.
• Validating web forms
• Web Application Form Design
• Designing Web Forms – Label Placement & Primary vs. Secondary Actions