下拉列表到JavaScript数组以填充文本框

时间:2015-03-04 14:43:38

标签: javascript php jquery mysql arrays

我正在尝试在工作表系统表单上显示一个MySQL表,我在下拉列表中显示客户详细信息,然后一旦选中,应在主表单上填写字段。

我知道人们倾向于使用AJAX,但这是用于连接到移动设备的平板电脑上,并希望尽可能少地询问服务器。

因为我已经从SQL中获取了详细信息以显示下拉列表,我认为我可以使用它。我找到了原始代码:

  

http://board.phpbuilder.com/showthread.php?10372137-RESOLVED-How-do-I-populate-multiple-text-boxes-from-a-dropdown-(I-can-populate-1-text-box!)

但我也希望显示不在下拉列表中的项目。有人说它有效,但我学到的东西越多,我就看不出来了,因为它正在构建的数组似乎不是JavaScript格式。

我有下拉工作,并且它使用名称填充JavaScript数组但我无法弄清楚如何使用数组在字段中显示。

它似乎是数组中使用的命名索引。我可以在使用普通静态数组时显示一个测试数组,但我已将它们注释掉了,但是当我尝试使用数组上的名称时,我会得到未定义的错误。

<html>
<head>

<script type="text/javascript"> 




    <?php

      include_once 'includes/db_connect.php';

        $query1 = "SELECT * FROM customer";
            $result1 =($mysqli-> query($query1));


        // build javascript array building an object


        // build javascript array
          while($row=mysqli_fetch_array($result1)){ 
          echo 'customer['.$row['customer_id'].'] = new Array(';
          echo 'customer['.$row['customer_id'].'][customer_id] = "'.$row['customer_id'].'";';
          echo 'customer['.$row['customer_id'].'][post_code] = "'.$row['post_code'].'";';
          echo 'customer['.$row['customer_id'].'][company_name] = "'.$row['company_name'].'");';
        }

        ?> 

    </script>


</head>

<body>

    <form name="customerform" form id="customerform"> 
<p>


    <select name="customerselect" id="customerselect" onChange="showname()"> 
        <option value="">Select customer</option> 

        <?php
            $query1 = "SELECT * FROM customer";
            $result1 =($mysqli-> query($query1));

            // build javascript array
            while($row=mysqli_fetch_array($result1)){ 
                echo'<option value="'.$row['customer_id'].'">'.$row['forename'].'">'.$row['surname'].'">'.$row['customer_name'].'</option>';
            }           

                        ?>
        </select>
</p>
<p>
<input type="text" name="cust" value="" id="cust" />

<input type="text" name="cust" value="" id="customerselected" />
<input type="text" name="post_code" value="" id="post_code" />
</p>
<p>update
  <input type="button" name="update" id="update" value="update" onClick="showname()">

<p>&nbsp;</p>
<p>
  <input name="submit" type="submit" id="submit" value="submit" />
</p> 
    </form>


</body>

<script>    

        //var customer = Array();
        var customer = Array();
        //This below is a test multi dimensional Array which does work. //
        //customer['CCS'] = Array[{forename:'Robert', surname:'Grain', company:'HOMS'}];

    function showname() {


        //this var takes the result of the selected drop down list and shows the correct part of the array.
        var customerselected = document.getElementById('customer');
        customername = customerselected.value;

        // this does work but not from the array just fills the details up
        document.customerform.customerselected.value = customername;

        // the next part takes the selected dropdown data and calls for the correct place in the array
        // document.getElementById("cust").value = customer['CCS'][0];
        // document.getElementById("cust").value = customer[CCS]["forename"] ;
        // (customer[''][forename]);
         document.customerform.post_code.value = customer[customerselect]["post_code"];


    }

    window.onload=function() {
        showname();
    } 

</script>
</html>

这是资源管理器在控制台中的源代码。来自JavaScript数组。

</body>
</html>customer[118] = new Array(customer[118][customer_id] = "118";customer[118][post_code] = "L37 4RG";customer[118][company_name] = "jc knight");customer[119] = new Array(customer[119][customer_id] = "119";customer[119][post_code] = "DE56 7HG";customer[119][company_name] = "farm Customer giles");customer[122] = new Array(customer[122][customer_id] = "122";customer[122][post_code] = "LE67 8FH";customer[122][company_name] = "a test company"); 

此下拉列表也会创建:

 <select name="customerselect" id="customer" onChange="showname()"> 
        <option value="">Select customer</option> 

        <option value="118">John">Knight"></option><option value="119">Bill">Giles"></option><option value="122">Robert">Grain"></option>       </select>
</p>

也许我应该将代码移到JavaScript数组的HTML底部,尽管我不确定在需要时是否会初始化它,因为它首先运行了HTML。我不确定事情的顺序是否正确。

我收到的错误会在我更改下拉列表后立即显示,并显示以下内容:

      document.customerform.post_code.value = customer['customerselect'][post_code];
}

X 'post_code' is undefined

Error I recieve

我认为在显示我的数组时,我的文档。值是错误的吗?

2 个答案:

答案 0 :(得分:0)

而不是希望一个常数在这里起作用。 而是尝试以下作为替代:

    // build javascript array
    while($row=mysqli_fetch_array($result1)){ ?>
      var customer["<?=$row['customer_id']?>"] = [];
      customer["<?=$row['customer_id'];?>"]['customer_id'] = "<?=$row['customer_id'];?>";
      customer["<?=$row['customer_id'];?>"]['post_code'] = "<?=$row['post_code'];?>";
      customer["<?=$row['customer_id'];?>"]['company_name'] = "<?=$row['company_name'];?>";
    <? }

答案 1 :(得分:0)

感谢smftre。最后我选择了jquery和ajax。而且我认为它已经得到了最好的打算,因为我最初试图使代码在带宽上尽可能高效,因为系统是要使用的,但是ajax似乎是有原因的标准并且运行良好。