时间戳

首页 > 解决方案 > 由 mysql 下拉列表填充的 Concat php 输入字段

javascript - 由 mysql 下拉列表填充的 Concat php 输入字段

问题描述

我正在尝试连接当用户从客户下拉列表中进行选择并导致地址行也更改（自动填充）时自动填充的城市、州和邮政编码输入字段。

我已经尝试了以下帖子中提出的所有建议，但它们都没有奏效，因为它们都没有“接受”的答案：

使用存储变量连接多个 HTML 文本输入，连接 html 中的两个文本字段，以及如何使用 javascript 从输入中连接字符串？

这是我当前显示输入框的代码，但其中没有显示任何值。当我开始工作时，我打算“隐藏”城市、州、邮政编码输入，以便页面上只显示连接的输入行。

echo '<input style="float:left; margin-left:182px; margin-top:-6px; border:0px; background:none; box-shadow:none;" type="text" id="city" name="city" readonly="readonly" value="">';
            echo '<input style="float:left; border:0px; margin-top:-6px; background:none; box-shadow:none;" type="text" id="state" name="state" readonly="readonly" value="">';
            echo '<input style="float:left; border:0px; margin-top:-6px; background:none; box-shadow:none;" type="text" id="zip" name="zip" readonly="readonly" value="">';
            echo '<input type="text" id="custAdd" name="custAdd">';


<script>
   $("custAdd").change(function(){
    document.getElementById('custAdd').value = 
    document.getElementById('city').value + ', ' + 
    document.getElementById('state').value + ' ' + 
    document.getElementById('zip').value;
 };
</script>

提前感谢您的时间和您可以提供的任何建议。

标签： javascripthtmllogicstring-concatenation

解决方案

在@Greg Schmidt 的帮助和数小时的不同场景测试后，我能够连接城市、州和邮政编码输入字段。问题是由于地址输入字段也被自动填充，它不会触发 onchange 事件。最终起作用的是将 concat 代码添加到选择字段的 onchange 代码中。这是工作代码：

PHP：

$ddlquery2 = "SELECT * FROM everyone WHERE rolename='Customer' ORDER BY first_name ASC";
        $ddlresult2 = mysqli_query($dbc, $ddlquery2) or die("Bad SQL: $ddlquery2");
        echo 'Customer (select one): <select type="text" class="dropdown" name="custid" id="customerID" size="1" onchange="popaddress()">';
        echo '<option value=""></option>';
        while($ddlrow2=mysqli_fetch_array($ddlresult2, MYSQLI_ASSOC)){
        echo "<option value='".$ddlrow2['id']."'  data-address='".$ddlrow2['address']."' data-city='".$ddlrow2['city']."' data-state='".$ddlrow2['state']."'  data-zip='".$ddlrow2['zip']."'>" . $ddlrow2['first_name'] .' ' .$ddlrow2['last_name']. "</option>";
        } //End while statement
        echo "</select>";
        echo '<br>';
        echo '<input style="float:left; margin-left:185px; margin-top:3px; border:0px; background:none; box-shadow:none;" type="text" id="custaddress" name="address" readonly="readonly" value="" onchange="concatloc()">';
        echo "<br >";

        echo '<input style="float:left; margin-left:185px; margin-top:-7px; border:0px; background:none; box-shadow:none;" type="text" id="custAdd" readonly="readonly" value="">';
        echo '<input type="hidden" id="custcity" name="city" value="">';
        echo '<input type="hidden" id="custstate" name="state" value="">';
        echo '<input type="hidden" id="custzip" name="zip" value="">';

查询：

<script>
$('#customerID').change(function() {
    selectedOption = $('option:selected', this);
    $('input[id=custaddress]').val( selectedOption.data('address') );
    $('input[id=custcity]').val( selectedOption.data('city') );
    $('input[id=custstate]').val( selectedOption.data('state') );
    $('input[id=custzip]').val( selectedOption.data('zip') );

    document.getElementById('custAdd').value = 
    document.getElementById('custcity').value + ', ' + 
    document.getElementById('custstate').value + ' ' + 
    document.getElementById('custzip').value;
 });
</script>

我希望这对尝试连接输入字段的其他人有所帮助。另外一条建议...即使在同一个文件中复制和粘贴代码也要小心。当我最初将原始城市、州和邮政编码输入设置为 type="hidden" 时，它们仍然出现在页面上。我必须手动输入这些行才能使“隐藏”命令起作用。

推荐阅读