具有数量价格和总JavaScript计算的动态php和html表单

Question

So, I have form fields and a table that adjusts depending on how many results.

The form has name, qty, price and total price for each column.

The php and sql in a loop obviously this can make the list bigger or smaller depending on how many products are in the database at the time.

I am not sure how to go about this. I know how to calculate form fields that are static but what about ones that are in a php loop and i dont know how many form fields there will be everytime as this changes when products are added into the database or removed.

So my html and php is:

    <div id="table-advanced" class="row">
       <div class="col-lg-12">
           <div class="portlet">
              <div class="portlet-header">
                    <div class="caption">Product Ordering For <?echo $service_name; ?></div>
               <div class="portlet-body">
               </div>
               <div class="table-responsive mtl">
                    <table class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                       <th><a href="view-customers.php?sortby=name">Franchise</a></th>
                       <th><a href="view-customers.php?sortby=company_name">QTY</a></th>
                       <th><a href="view-customers.php?sortby=email">Price Each</a></th>
                       <th><a href="view-customers.php?sortby=email">Price Total</a></th>
                       </tr>
                    <tr>
                       </tr>
                       </thead>
                    <tbody>
                    <tr class="odd gradeA">

<?
    //connecting to server and creating link to database
    $link = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
    $UserID1 = ($_SESSION['UserID']);
    echo "<div style='float: right;'>";
    $dbh = mysql_connect ("$dbhost", "$dbuser", "$dbpass") or die ('Database connection failed because: ' . mysql_error());
    mysql_select_db ("nfw_leads");
    $page = $_GET['page'];
    if(!$page || $page == 0 || !is_numeric($page)){
        $page = 1;
    }
    $limit = '600';
    class paginate{
        function init($limit, $page){
            $UserID1 = ($_SESSION['UserID']);
            $service_id = trim($_GET['service_id']);
            $query1 = mysql_query("SELECT * FROM nfw_inventory WHERE stoc_department_id = '$service_id'");
            $UserID1 = ($_SESSION['UserID']);
            $total_pages = ceil(mysql_num_rows($query1)/$limit);
            $prev = '<a href="?page=' . ($page-1) . '" class="btn btn-danger">Prev&nbsp; <li class="fa fa-arrow-left"></li></a> ';
            $next = '<a href="?page=' . ($page+1) . '" class="btn btn-danger">Next&nbsp; <li class="fa fa-arrow-right"></li></a> ';

            //<a href="#" class="btn btn-danger">Danger
            //                              &nbsp;<i class="fa fa-search"></i></a>

            if($page <= 1){
                $page = 1;
                $prev = '';
            }
            elseif($page >= $total_pages){
                $page = $total_pages;
                $next = '';
            }
            if($page > 2){
                $prev = '<a href="?page=1" class="btn btn-danger">First&nbsp; <li class="fa fa-mail-reply"></li></a> ' . $prev;
            }
            if($page < ($total_pages - 1)){
                $next = $next . '<a href="?page=' . $total_pages . '" class="btn btn-danger">Last&nbsp; <li class="fa fa-mail-forward"></li></a> ';
            }
            $start = ($limit*($page-1));
            $UserID1 = ($_SESSION['UserID']);
            $service_id = trim($_GET['service_id']);
            $query2 = mysql_query("SELECT * FROM nfw_inventory WHERE stoc_department_id = '$service_id'");
            $times_done=0;
            while($row = mysql_fetch_array($query2)) {
                if($times_done=='5'){
                    $content .= '';
                    $times_done=1;
                }
                else{
                    $times_done++;
                }
                $content .= "<tr><td> " . $row['stoc_desc'] . "</td><td><div class='input-icon'><i class='fa fa-times'></i><input type='text' name='take4' id='take4' placeholder='0' value='$take4answer' onKeyUp='calcfunc_1()' class='form-control'/></div></td><td><div class='input-icon'><i class='fa fa-usd'></i><input type='text' name='take4' id='take4' placeholder='0.00' value='" . $row['stoc_retail_price'] . "' onKeyUp='calcfunc_1()' class='form-control' readonly/></div></td><td><div class='input-icon'><i class='fa fa-usd'></i><input type='text' name='take4' id='take4' placeholder='0.00' value='" . $row['stoc_retail_price'] . "' onKeyUp='calcfunc_1()' class='form-control' readonly/></div></td>$activeallow";
            }
            return $content;
        }
    }
    $class = &new paginate;
    echo $class->init($limit, $page); 
?>
</tr>
</tbody>
</table>

So where $content is down the bottom. thats where it loops out the form fields which has name, qty, price, total price.

Question is, how would i go about having it so they can add each other up.

after i work that part out, there will be a static "order total" field outside the loop down the bottom where all the total price columns add up and go into it.

Really got my stumped on how to do this.

Answer 1

Seeing how this question doesn't have any answer yet:

I suggest, giving the input fields an array-name. In a PHP loop, this looks like this:

for($i = 0; $i < 5; ++$i)
    echo "<input name='DynamicField[]'>Field Nr $i</input><br />";

The important thing here is the [].

After submitting the form, you can fetch all dynamic fields by querying $_POST (or $_GET)

$dynamicFields = $_POST["DynamicField"];

This will give you all the fields, indexed in the order as they appeared in the original file. (So Field Nr. 0 has the index 0 etc.)

As for JS, you can use getElementsByName.

var dynamicFields = document.getElementsByName("DynamicField[]");

This will give you an array of references to the dynamic fields, ready for you to use. Please be advised that entering a specific index into the brackets will break the JS implementation.