由 mysql 下拉列表填充的 Concat php 输入字段答案

【问题标题】：Concat php input fields that are populated by a mysql dropdown由 mysql 下拉列表填充的 Concat php 输入字段
【发布时间】：2018-05-12 03:12:03
【问题描述】：

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

我已经尝试了以下帖子中提出的所有建议，但没有一个有效，因为没有一个得到“接受”的答案：

Concatenate multiple HTML text inputs with stored variable、Concatenate two text fields in html 和 How to concat strings from inputs with 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>

提前感谢您抽出宝贵时间以及您可以提供的任何建议。

【问题讨论】：

当你使用 jQuery 访问一个 DOM 元素时，你需要给它一个有效的选择器。要按 ID 进行选择，请输入 #，后跟相关 ID。因此，要访问custAdd 输入，您需要使用$("#custAdd")，而不是$("custAdd")。
其次，通过在输入上调用change 函数，您表明您希望在输入更改时调用提供的处理程序（您的内部函数）。因此，您在这里所说的是，当custAdd 输入发生更改时（例如，通过用户输入），该值应更改为城市、州和邮政编码的值。这肯定不是你想要的。
从您的描述中不太清楚，但您似乎希望有一个可见的输入，其中有人可以输入带有逗号的地址，并设置（最终隐藏的）城市、州和邮政编码输入？如果是这样，那么您要查找的不是串联。
@Greg Schmidt 感谢您指出 jQuery 中我的 ID 中缺少的 #。我很抱歉没有更清楚我的意图。现在，当在客户下拉列表中进行选择时，地址、城市、州和邮政编码输入字段会自动填充。我现在需要发生的是，当该地址输入感知到自动填充的文本更改了它时，我希望其他 3 个输入字段（城市、州、zip 也已由下拉菜单自动填充）连接。如果这是在单独的输入字段中，或者它们是否可以按原样连接，对我来说并不重要，无论哪种方法有效。
这三个字段是否只会作为一个整体发生变化，即如果一个字段发生变化，您知道其他两个字段也会发生变化？

标签： javascript html logic string-concatenation

【解决方案1】：

您还缺少更改函数末尾的右括号）

【讨论】：

谢谢你。不幸的是，它仍然没有显示任何内容。

【解决方案2】：

根据 cmets 中的讨论，您似乎想要做的是在其他字段之一发生更改时更新组合字段，无论哪一个都没有关系。所以：

$("#city").change(function(){

或#state 或#zip，应该没关系。

【讨论】：

是的，我也是这么想的。该地址与其他三个一起更新，这就是为什么我将 onchange 函数放在它的末尾，但由于某种原因，当地址更改时 concat 似乎不起作用。事实上，该 custAdd 输入框中没有任何文本（城市、州或邮编）出现。你知道这是什么原因造成的吗？我更新了代码以反映您和 Dustin Hammack 建议的更改。也许程序没有识别地址何时发生变化，从而导致 onchange 没有被激活？
这是更新后的代码（抱歉，我不知道如何在评论中更好地格式化它）：
您仍然在此处将#custAdd 显示为change 调用的目标。根据我的回答，应该是#city。
这些字段中的任何内容都可能不会触发 onchange 事件。
就是这样，@Greg Schmidt。 onchange 事件没有被触发。非常感谢你坚持我并试图帮助解决这个问题。我真的很感谢你的坚持。

【解决方案3】：

在@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" 时，它们仍然出现在页面上。我必须手动输入这些行才能使“隐藏”命令起作用。

【讨论】：