Question

我对使用javascript比较陌生，与php结合使用时遇到问题。

我正在创建一个预算计算器，允许用户从菜单中选择项目（例如电影票）。我创建了一个包含常用商品及其相关价格列表的数据库，并且正在使用php将此信息传递到我的网站中。

我在网上找到了一个javascript函数，可以在用户选择更多项目时对用户的总支出进行小计。因此，当用户选中某项旁边的复选框时，小计会在页面底部自动更新。

为了确保安全，我正在运行php查询，该查询将信息打印在单独的页面上，并使用include（）函数将其包含在主页上。

我遇到的问题是，当我运行仅包含php代码并在该页面上包含javscript函数的页面时，它可以正常工作，但是，当它包含在主页中时，它将无法工作。

这里是我正在使用的小计表格版本的演示-https://www.dyn-web.com/tutorials/forms/checkbox/group.php

// html

<html>
   <!-- submenu for transport-->
<button class="collapsible">Transport</button>
  <div class="content" >
    <!-- further submenu for public transport -->
            <button class="collapsible" > Public Transport</button>
     <div class="content">
        <table class="auto-style2" style="width: 96%">
        <tbody class="auto-style2">     
         <tr>
               <td style="width: 353px; height: 26px;">&nbsp;</td>
           <td style="height: 26px">
           <div class ='row1'>€</div></td>
         </tr>
            <?php
               include('publictransport.php');
             ?> 

        </tbody>        
        </table>
    </div>  
</html>

// php

<?php
//This is publictransport.php
//establish connection
include('detail.php');
##query information
$q  = 'SELECT name,price FROM expenditure WHERE sub_category = "public_transport"';
$result = $db->query($q);
$num_results = mysqli_num_rows($result);
echo "<form action='' method='post' class='demoForm' id='demoForm'><div id = 'transport'>";
while($row = mysqli_fetch_row($result))
{
    //loop and print out information in html format
    echo "<tr>";
    echo "<td class = 'firstcolumn'>", $row[0] ,"</td>";  
    echo "<td class = 'row1'>",  $row[1],"</td>";
    echo "<td class ='row1'> <div id='ck-button'> <label> <input type='checkbox'";
    echo "value = '". $row[1]."'><span> + </span></label></div></td></tr>";
}

echo "</div><p><label>Total: $ <input type='text' name='total' class='num' size='6' value='0' readonly='readonly'/></label></p>";
echo "</form>";
?>

// java描述

<script>
// call onload or in script segment below form
function attachCheckboxHandlers() {
// get reference to element containing transport checkboxes
var el = document.getElementById('transport');
// get reference to input elements in transport container element
var types = el.getElementsByTagName('input');

// assign updateTotal function to onclick property of each checkbox
for (var i=0, len=types.length; i<len; i++) {
    if ( types[i].type === 'checkbox' ) {
        types[i].onclick = updateTotal;
    }
 }

}

// called onclick of transport checkboxes

function updateTotal(e) {

// 'this' is reference to checkbox clicked on

var form = this.form;

// get current value in total text box, using parseFloat since it is a 
string

var val = parseFloat( form.elements['total'].value );

// if check box is checked, add its value to val, otherwise subtract it

if ( this.checked ) {
    val += parseFloat(this.value);
} else {
    val -= parseFloat(this.value);
}

// format val with correct number of decimal places
// and use it to update value of total text box

form.elements['total'].value = formatDecimal(val);
}

// format val to n number of decimal places
// modified version of Danny Goodman's (JS Bible)

function formatDecimal(val, n) {
n = n || 2;
var str = "" + Math.round ( parseFloat(val) * Math.pow(10, n) );
while (str.length <= n) {
    str = "0" + str;
}
var pt = str.length - n;
return str.slice(0,pt) + "." + str.slice(pt);
}

// in script segment below form

attachCheckboxHandlers();

</script>

问题是在主页上，javascript没有找到复选框。复选框数组的值“类型”的长度应为4。在publictransport.php页面上，其长度为4，而在主页上，它返回一个空数组。

任何帮助将非常感激和我是新来的JavaScript我可能没有解释的最佳途径的问题！

Answer 1

<div>标签在<tbody>中是不允许的，因此呈现的HTML与预期的HTML不同。

这是Firefox 65呈现HTML的方式

请注意，firefox只是完全忽略了<form>和<div>标签，并将<tr>的2个父级放在了上面。

最简单的修补方法是完全删除<form>和<div>标签，然后将id = 'transport'放在<tr>上，这样JS应该可以。

如果需要该表格，则应这样放置

<html>
   <!-- submenu for transport-->
<button class="collapsible">Transport</button>
  <div class="content" >
    <!-- further submenu for public transport -->
            <button class="collapsible" > Public Transport</button>
     <div class="content">
        <table class="auto-style2" style="width: 96%">
        <tbody class="auto-style2">     
         <tr>
               <td style="width: 353px; height: 26px;">&nbsp;</td>
           <td style="height: 26px">
           <div class ='row1'>€</div></td>
         </tr>
         <tr>
           <td>
            <?php
               include('publictransport.php');
             ?> 
           </td>
         </tr>
        </tbody>        
        </table>
    </div>  
</html>

然后在publictransport.php中的<table>内添加一个<div id='transport'>

Javascript函数可在一页上运行，但不能包含在主页上

1 个答案: