javascript - 我的 html 输入标签采用数组。我无法从 javascript 中检索它们

Question

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Order</title>

下面根据选中的复选框计算总数，并给出一个确认框。显示总数。不管这个总数显示为 0。

        <script type="text/javascript">
         function validate()
           {
              var x,y,i,j,p=0;
        j=parseInt(document.getElementById('loopcount').value);
              document.write(j);
        for (i=1;i<=j;i++)
        {
            document.write(i);
               if(document.getElementsByName('itemCode['+i+']').checked==true){
                x=parseFloat( document.getElementsByName('quantity['+i+']').value);
                document.write(x);
                y=parseFloat( document.getElementsByName('price['+i+']').value);
                document.write(y);
        p+=x*y;
                }
        }

    var conf=confirm("The total amount is:"+ p);

              if(conf==true){
                  header("Location:userHome.php");
              }
              else{
                  header("Location:orderveggies.php");
              }

        }


    </script>
    </head>

此代码将 mysql 中的数据显示为复选框。我的问题在于采用数组的输入标签的命名

    <body>
        <form name="myForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" onsubmit="validate()">
        <table align="center" border="0">
            <tr>

                <th>item Code</th>
                <th>Vegetable</th>
                <th>Price/KG</th>
                <th>Quantity</th>
            </tr>


             <?php

             $db=  mysqli_connect('localhost','root','','ourveggies')
                            or die("Error!Could not connect to the database");
                    $query="select itemCode,itemName,price from veggies";
                    $result=mysqli_query($db,$query)
                            or die("Error in query".mysqli_error($db));
                    $count=mysqli_num_rows($result);
                    while($row= mysqli_fetch_array($result)){?>
                        <tr>
                        <td><input type="checkbox" name="itemCode[]" value="<?php echo $row['itemCode']; ?>"/><?php echo $row['itemCode']; ?></td>
                        <td><?php echo $row['itemName']; ?></td>
                        <td><input type="hidden"  name="price[]" value="<?php echo $row['price']; ?>"/><?php echo $row['price']; ?></td>
                        <td><select name="quantity[]">
                                <option value="0.00">--Quantity--</option>
                                <option value="0.100">100 gm</option>
                                <option value="0.250">250 gm</option>
                                <option value="0.500">500 gm</option>
                                <option value="1">1 Kg</option>
                                <option value="2">2 Kg</option>
                                <option value="3">3 Kg</option>
                                <option value="4">4 Kg</option>
                                <option value="5">5 Kg</option>

                            </select></td>
                        </tr>

                  <?php  }?>
                    <input type="hidden" id="loopcount" name="loopcount" value="<?php echo $count; ?>"/>

            <tr>
                <td><input type="submit" name="order" value="order" /></td>
            </tr>
        </table>
        </form>
    </body>
</html>

score 0 · Accepted Answer

document.getElementsByName() 返回一个数组，而不是单个元素。试试这个：document.getElementsByName('itemCode[]')[i].checked。并以 0 开始你的循环！

for (i=0;i<j;i++)
{
    document.write(i);
    if(document.getElementsByName('itemCode[]')[i].checked==true){
        x=parseFloat( document.getElementsByName('quantity[]')[i].value);
        document.write(x);
        y=parseFloat( document.getElementsByName('price[]')[i].value);
        document.write(y);
        p+=x*y;
    }
}

score 0 · Accepted Answer

My answer was getting a little long winded so here is one with more detail on your actual problems: I have put comments next to the lines of code that I think are causing your confusion.

    <script type="text/javascript">
     function validate()
       {
          var x,y,i,j,p=0;
          j=parseInt(document.getElementById('loopcount').value);
          document.write('j='+j);    // make your debugging messages more meaningful -S
    for (i=1;i<=j;i++)
    {
           document.write('i='+i);      // make your debugging messages more meaningful -S
           if(document.getElementsByName('itemCode['+i+']').checked==true)
           {
                //getElementsByName returns an array: replace them with getElementByName -S
                x=parseFloat( document.getElementByName('quantity['+i+']').value);
                document.write('x='+x);   // make your debugging messages more meaningful  
                y=parseFloat( document.getElementByName('price['+i+']').value);
                document.write('y='+y);   // make your debugging messages more meaningful
                p+=x*y;
            }
    }

var conf=confirm("The total amount is:"+ p);

          if(conf==true){
              header("Location:userHome.php");
          }
          else{
              header("Location:orderveggies.php");
          }

    }


</script>
</head>

Then for your PHP:

blah blah blah
while($row= mysqli_fetch_array($result)){?>
    <tr>
    <td>
         <input 
           type="checkbox" 
           name="itemCode[<?php echo $row['itemCode']; ?>]"  //Do this. seriously otherwise everything will have the same name -S
           value="<?php echo $row['itemCode']; ?>"/>
         <?php echo $row['itemCode']; ?>
    </td>
    <td>
         <?php echo $row['itemName']; ?>
    </td>
    <td>
         <input 
              type="hidden"  
              name="price[<?php echo $row['itemCode']; ?>]"  //Im assuming here you want to know what price belongs to what item -S
             value="<?php echo $row['price']; ?>"/>
         <?php echo $row['price']; ?>
    </td>

    etc etc

There are loads of bugs in your code. Please update your code to get rid of the problems I have pointed out, then we might be able to make some progress.

score 0 · Accepted Answer

name="itemCode[]"

这意味着 name="itemCode[]" 而不是 name="itemCode[anything at all]"

尝试这个：

<td><input 
        type="checkbox" 
        name="itemCode[<?php echo $row['itemCode']; ?>]"
        etc etc
</td>

getElementsByName 也返回一个数组

或者（使用 ids 而不是名称）：

<td><input 
        type="checkbox" 
        id="itemCode[<?php echo $row['itemCode']; ?>]"
        etc etc
</td>

然后在javascript中：

document.getElementById('itemCode['+i+']')

如果您仍然难以理解，请在浏览器中使用 firebug 或类似的东西来检查输出的 html。您一直在为所有输入提供相同的名称

javascript - 我的 html 输入标签采用数组。我无法从 javascript 中检索它们

3 回答 3

Related

Reference