Laravel-如何自动将表格中的文本输入的地址绑定到所选客户的ID上？

问题描述

这是在我的ordered.blade.php文件中。从本质上讲，我想使其到达从下拉列表中选择客户的位置，它会自动填充与客户ID绑定的地址。但是由于很难找到任何相关文档，因此我陷入了困境。将不胜感激。谢谢！

    <div class="form-group">
      <label for="customerId">Customer Name:</label>
      <select onchange="customerId(this.value)" name="customerId" class="form-control">
        <option>Choose A Customer</option>
        @foreach ($customers as $customer)
          <option name="customerId" id="customerId" value="{{$customer->id}}{{$customer->address}}">{{$customer->name}}</option>
        @endforeach
      </select>
    </div>

    <div class="form-group">
      <label for="shiptoAddress">Ship-To Address (Full Address):</label>
      <input name="shiptoAddress" class="form-control" id="shiptoAddress" placeholder="Ship-To Address">
    </div>

这是我在OrderController中用于创建新订单的函数：

    /*Create Order*/
    public function create( Request $data){
        $order = new Order;
        $order->customerId = $data->customerId;
        $order->save();
        return redirect('orders');
    }

解决方法

您似乎正在使用JavaScript函数，但此代码段未包含该函数，因此我更改了该函数以执行您的要求。如果它正在做某事，则可以将其添加到新功能中。

所以基本上我要做的第一件事是重新排列一些ID。您在一个循环内的选项标签上设置了一个ID，该ID将为每个客户创建具有相同ID的元素。

我接下来要做的是更改您为选项设置的值，因为它似乎试图存储多个值，所以我改用了整个客户对象（将其存储为字符串）。

<div class="form-group">
    <label for="customer-select">Customer Name:</label>
    <select id="customer-select" onchange="selectCustomer()" name="customer-select" class="form-control">
        <option value="default">Choose A Customer</option>
        @foreach ($customers as $customer)
            <option value="{{ $customer }}">{{$customer->name}}</option>
        @endforeach
    </select>
</div>

<div class="form-group">
    <label for="shiptoAddress">Ship-To Address (Full Address):</label>
    <input name="shiptoAddress" class="form-control" id="shiptoAddress" placeholder="Ship-To Address">
</div>

通过将整个客户对象设置为选项的值，如果将来需要对他们进行某些处理（即使用客户的ID来做某事），您将可以访问该客户的任何其他部分其他）。

现在，对于JavaScript，我使用了原始JavaScript（如果有的话，可以将其更改为jQuery）来获取Customer Select的值并将其应用于Address Input

然后，我使用JavaScript来获取您的select语句的值并将其设为输入字段的值。 JSON.parse(...)调用将客户字符串（如前所述）解析为可用的JavaScript对象。

<script>
    function selectCustomer() {
        let select = document.getElementById('customer-select');
        let ship_to_address = document.getElementById('shiptoAddress');

        if(select.value === 'default') {
            ship_to_address.value = '';
        } else {
            ship_to_address.value = JSON.parse(select.value).address;
        }
    }
</script>

将来，如果$customer->address中有多个键，则可以使用相同的方法为每个地址段设置不同的单独输入值。例如：

...
    let address = JSON.parse(select.value).address;
    street_1.value = address.street_1;
    city.value = address.city;
...