如何使用 Javascript 将数组中的数据设置为表单元素的值答案

【问题标题】：How to set data from an array as the values of form elements using Javascript如何使用 Javascript 将数组中的数据设置为表单元素的值
【发布时间】：2020-02-04 17:19:38
【问题描述】：

我正在处理产品页面，我使用表单输入产品并将其保存到数据库中。现在我正在尝试进行编辑。并希望在点击编辑按钮时。只是这次用户被导航到原始输入表单，它将预先填写当前的产品详细信息，可以在同一个表单中编辑并再次保存。

当点击编辑按钮时，从数据库中接收到一个产品详细信息数组......并且用户也被重定向到正确的表单。我现在需要一些关于如何将接收到的数据插入表单以便对其进行编辑的指导

$(document).on('click', '#edit_btn', function () {
    console.log('Edit button is working');
    const productId = $(this).parent().children('.product_id').attr('id');
    const product = getProductFromList(productId);

    console.log('selected product');
    console.log(product);
    //since products with variants  have no price attahced,
    if (product.price) {
        //Navigate to the product without variance page.
        window.location.href = 'index.php';
    } else {
        //Navigate to the product with variance page.
        window.location.href = 'pwv.php';
    }

});

创建表单的html

     <form method="POST" name="admin_form"
                                        action='https://baby-arcade debug.herokuapp.com/api/admin/products/create'
                                        id="admin_form" onsubmit="">
                                        <div class="form-row">
                                            <div class="form-group col-md-5">
                                                <!-- product_name_input -->
                                                <label for="inputProdcutName">Product Name</label>
<input type="name" class="form-control" name="name" id="inputproductname" placeholder="Enter Product Name">                                                <!--product_name_input-->
                                            </div>
                                            <div class="col-md-3">
                                                <!-- price input -->
                                                <div class="form-group">
    <label for="inputPrice">Price</label>
    <input type="text" class="form-control" name="price" id="inputPrice" placeholder="12000 (without comas)">
</div>                                                <!--price input-->
                                            </div>
                                            <div class="col-md-2">
                                                <!-- start select shop -->
                                                <div id="Shops-container"></div>
                            <script id="ShopsTemplate" type="text/x-handlebars-template">
                                <div class="form-group">
                                <label for="exampleFormControlSelect2">Select shop</label>

                                <select class="form-control" name="shops" id="shops" required>

                                    {{#each this}}
                                    <option value="{{id}}"> {{name}} </option>
                                    {{/each}}
                                </select>
                            </div>
                            </script>                                                <!--endselect shop -->
                                            </div>
                                            <div class="col-md-1">
                                                <!-- qty input -->
                                                <div class="form-group">
    <label for="inputPrice">Qty</label>
    <input type="number" class="form-control" name="qty" id="qty" placeholder="10">
</div>                                                <!-- qty input -->
                                            </div>
                                            <div class="col-md-1">
                                                <!-- discount -->
                                                <div class="form-group">
    <label for="inputPrice">Discount</label>
    <input type="number" class="form-control" name="discount" id="inputDiscount" placeholder="10">
</div>                                                <!-- discount -->
                                            </div>
                                            <div class="col-md-2">
                                                <!-- start select shop -->
                                                <div id="Shops-container"></div>
                            <script id="ShopsTemplate" type="text/x-handlebars-template">
                                <div class="form-group">
                                <label for="exampleFormControlSelect2">Select shop</label>

                                <select class="form-control" name="shops" id="shops" required>

                                    {{#each this}}
                                    <option value="{{id}}"> {{name}} </option>
                                    {{/each}}
                                </select>
                            </div>
                            </script>                                                <!--endselect shop -->
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-12">
                                                <!-- desc input -->
                                                <label for="inputPassword4">Description</label>
<textarea class="form-control" name="description" id="exampleFormControlTextarea1" rows="3"
    data-="this is a desc"></textarea>                                                <!--desc input -->
                                            </div>
                                            <div class="col-md-12">
                                                <!-- start category select -->
                                                <div id="cats-container"></div>
                            <script id="catsTemplate" type="text/x-handlebars-template">
                                <div class="form-group">
                                <label for="exampleFormControlSelect1" class="fbc_label">Select one or multiple categories</label>


                                <select multiple="multiple" multiple class="form-control" name="category"
                                    id="product_category" required>
                                    <!-- <option value="0">Select category.</option> -->
                                    {{#each this}}
                                    <option value="{{id}}">{{name}}  </option>
                                    {{/each}}
                                </select>
                            </div>
                            </script>                                                <!-- end category select -->
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <!-- image select -->
                                            <div class="form-group col-md-6">
                                                <label for="exampleFormControlFile1">Upload image product</label>
                                                <input type="file" id="imageUrls" name="imageUrls"
                                                    accept="image/jpg"><br><br>
                                                <ul id="urlList">
                                                </ul>
                                                <div class="row">
                                                    <div class="col-md-4 mb-2 pb-2 ml-2">
                                                        <div class="progress" id="progress">
                                                            <div class="progress-bar progress-bar-striped"
                                                                role="progressbar" style="width: 0%;" aria-valuenow="25"
                                                                aria-valuemin="0" aria-valuemax="100" id="progress_bar">
                                                                <span class="progress_bar_Text">0%</span></div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12"><button type="button" onclick="handleImg()"
                                                            class="btn btn-primary3">Upload</button></div>
                                                    <br />
                                                    <br />

                                                </div>
                                                <!-- <p id="data"></p> -->
                                            </div>
                                            <div class="form-group col-md-6">
                                                <!-- radio buttons -->
                                                <div class="cntr">
    <label for="rdo-1" class="btn-radio">
        <input type="radio" id="rdo-1" name="big-item">
        <svg width="20px" height="20px" viewBox="0 0 20 20">
            <circle cx="10" cy="10" r="9"></circle>
            <path
                d="M10,7 C8.34314575,7 7,8.34314575 7,10 C7,11.6568542 8.34314575,13 10,13 C11.6568542,13 13,11.6568542 13,10 C13,8.34314575 11.6568542,7 10,7 Z"
                class="inner"></path>
            <path
                d="M10,1 L10,1 L10,1 C14.9705627,1 19,5.02943725 19,10 L19,10 L19,10 C19,14.9705627 14.9705627,19 10,19 L10,19 L10,19 C5.02943725,19 1,14.9705627 1,10 L1,10 L1,10 C1,5.02943725 5.02943725,1 10,1 L10,1 Z"
                class="outer"></path>
        </svg>
        <span>Small Item</span>
    </label>
    <label for="rdo-2" class="btn-radio">
        <input type="radio" id="rdo-2" name="big-item">
        <svg width="20px" height="20px" viewBox="0 0 20 20">
            <circle cx="10" cy="10" r="9"></circle>
            <path
                d="M10,7 C8.34314575,7 7,8.34314575 7,10 C7,11.6568542 8.34314575,13 10,13 C11.6568542,13 13,11.6568542 13,10 C13,8.34314575 11.6568542,7 10,7 Z"
                class="inner"></path>
            <path
                d="M10,1 L10,1 L10,1 C14.9705627,1 19,5.02943725 19,10 L19,10 L19,10 C19,14.9705627 14.9705627,19 10,19 L10,19 L10,19 C5.02943725,19 1,14.9705627 1,10 L1,10 L1,10 C1,5.02943725 5.02943725,1 10,1 L10,1 Z"
                class="outer"></path>
        </svg>
        <span>Big Item</span>
    </label>
</div>                                                <!-- end radio btns -->
                                            </div>
                                            <!-- end image select -->
                                        </div>
                                        <button type="submit" name="submit" class="btn btn-primary2 btn-lg">
                                            Save
                                        </button>
                                    </form>

【问题讨论】：

是否有更多关于您如何存储这些数据的详细信息？很难按原样回答这个问题。一种方法是，您可以在加载产品详细信息页面时从数据库中请求此数据
这是一个如何存储数据的示例baby-arcade-debug.herokuapp.com/api/admin/products
是的，需要更多信息。您是否正在寻找如何将“产品”中的数据放入 index.php 或 pwv.php？如果这是您要查找的内容，您可以尝试查询字符串或本地存储。
是的，我正在研究如何将“产品”中的数据转换为 index.php 或 pwv.php 中的表单……我对 Js 非常陌生，所以不太确定如何去做它
@Kyle 我如何将这些值添加到表单中？

标签： javascript html arrays json

【解决方案1】：

您可以使用下面的示例 JS 函数。这个功能可以扩展。目前它只支持元素值可以用value设置的值。

var data = {
  name: "prod1",
  price: 500
}

populateForm(data, "admin_form");

function populateForm(obj, formName) {
  var form = document.querySelector("form[name=\"" + formName + "\"]");

  for (var key in obj) {
    var inputs = form.querySelectorAll("[name=\"" + key + "\"]"); // You can use querySelector if you will be certain there is only one element with the same name and ignore the loop.
    
    if (inputs) {
      for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        //You will have to check the tagname and type of the input since some inputs set their values differently
        input.value = obj[key];
      }
    }
  }
}

<form method="POST" name="admin_form" action='https://baby-arcade debug.herokuapp.com/api/admin/products/create' id="admin_form" onsubmit="">
  <div class="form-row">
    <div class="form-group col-md-5">
      <!-- product_name_input -->
      <label for="inputProdcutName">Product Name</label>
      <input type="name" class="form-control" name="name" id="inputproductname" placeholder="Enter Product Name">
      <!--product_name_input-->
    </div>
    <div class="col-md-3">
      <!-- price input -->
      <div class="form-group">
        <label for="inputPrice">Price</label>
        <input type="text" class="form-control" name="price" id="inputPrice" placeholder="12000 (without comas)">
      </div>
      <!--price input-->
    </div>
    <div class="col-md-2">
      <!-- start select shop -->
      <div id="Shops-container"></div>
      <script id="ShopsTemplate" type="text/x-handlebars-template">
        <div class="form-group">
          <label for="exampleFormControlSelect2">Select shop</label>

          <select class="form-control" name="shops" id="shops" required>

            {{#each this}}
            <option value="{{id}}"> {{name}} </option>
            {{/each}}
          </select>
        </div>
      </script>
      <!--endselect shop -->
    </div>
    <div class="col-md-1">
      <!-- qty input -->
      <div class="form-group">
        <label for="inputPrice">Qty</label>
        <input type="number" class="form-control" name="qty" id="qty" placeholder="10">
      </div>
      <!-- qty input -->
    </div>
    <div class="col-md-1">
      <!-- discount -->
      <div class="form-group">
        <label for="inputPrice">Discount</label>
        <input type="number" class="form-control" name="discount" id="inputDiscount" placeholder="10">
      </div>
      <!-- discount -->
    </div>
    <div class="col-md-2">
      <!-- start select shop -->
      <div id="Shops-container"></div>
      <script id="ShopsTemplate" type="text/x-handlebars-template">
        <div class="form-group">
          <label for="exampleFormControlSelect2">Select shop</label>

          <select class="form-control" name="shops" id="shops" required>

            {{#each this}}
            <option value="{{id}}"> {{name}} </option>
            {{/each}}
          </select>
        </div>
      </script>
      <!--endselect shop -->
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-12">
      <!-- desc input -->
      <label for="inputPassword4">Description</label>
      <textarea class="form-control" name="description" id="exampleFormControlTextarea1" rows="3" data-="this is a desc"></textarea>
      <!--desc input -->
    </div>
    <div class="col-md-12">
      <!-- start category select -->
      <div id="cats-container"></div>
      <script id="catsTemplate" type="text/x-handlebars-template">
        <div class="form-group">
          <label for="exampleFormControlSelect1" class="fbc_label">Select one or multiple categories</label>


          <select multiple="multiple" multiple class="form-control" name="category" id="product_category" required>
            <!-- <option value="0">Select category.</option> -->
            {{#each this}}
            <option value="{{id}}">{{name}} </option>
            {{/each}}
          </select>
        </div>
      </script>
      <!-- end category select -->
    </div>
  </div>
  <div class="form-row">
    <!-- image select -->
    <div class="form-group col-md-6">
      <label for="exampleFormControlFile1">Upload image product</label>
      <input type="file" id="imageUrls" name="imageUrls" accept="image/jpg"><br><br>
      <ul id="urlList">
      </ul>
      <div class="row">
        <div class="col-md-4 mb-2 pb-2 ml-2">
          <div class="progress" id="progress">
            <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" id="progress_bar">
              <span class="progress_bar_Text">0%</span></div>
          </div>
        </div>
        <div class="col-md-12"><button type="button" onclick="handleImg()" class="btn btn-primary3">Upload</button></div>
        <br />
        <br />

      </div>
      <!-- <p id="data"></p> -->
    </div>
    <div class="form-group col-md-6">
      <!-- radio buttons -->
      <div class="cntr">
        <label for="rdo-1" class="btn-radio">
        <input type="radio" id="rdo-1" name="big-item">
        <svg width="20px" height="20px" viewBox="0 0 20 20">
            <circle cx="10" cy="10" r="9"></circle>
            <path
                d="M10,7 C8.34314575,7 7,8.34314575 7,10 C7,11.6568542 8.34314575,13 10,13 C11.6568542,13 13,11.6568542 13,10 C13,8.34314575 11.6568542,7 10,7 Z"
                class="inner"></path>
            <path
                d="M10,1 L10,1 L10,1 C14.9705627,1 19,5.02943725 19,10 L19,10 L19,10 C19,14.9705627 14.9705627,19 10,19 L10,19 L10,19 C5.02943725,19 1,14.9705627 1,10 L1,10 L1,10 C1,5.02943725 5.02943725,1 10,1 L10,1 Z"
                class="outer"></path>
        </svg>
        <span>Small Item</span>
    </label>
        <label for="rdo-2" class="btn-radio">
        <input type="radio" id="rdo-2" name="big-item">
        <svg width="20px" height="20px" viewBox="0 0 20 20">
            <circle cx="10" cy="10" r="9"></circle>
            <path
                d="M10,7 C8.34314575,7 7,8.34314575 7,10 C7,11.6568542 8.34314575,13 10,13 C11.6568542,13 13,11.6568542 13,10 C13,8.34314575 11.6568542,7 10,7 Z"
                class="inner"></path>
            <path
                d="M10,1 L10,1 L10,1 C14.9705627,1 19,5.02943725 19,10 L19,10 L19,10 C19,14.9705627 14.9705627,19 10,19 L10,19 L10,19 C5.02943725,19 1,14.9705627 1,10 L1,10 L1,10 C1,5.02943725 5.02943725,1 10,1 L10,1 Z"
                class="outer"></path>
        </svg>
        <span>Big Item</span>
    </label>
      </div>
      <!-- end radio btns -->
    </div>
    <!-- end image select -->
  </div>
  <button type="submit" name="submit" class="btn btn-primary2 btn-lg">
                                            Save
                                        </button>
</form>

【讨论】：

嗨，@Marius.. 谢谢，就其本身而言，这是可行的，但由于单击所有产品页面上的编辑按钮而无法使其正常工作...导航自己的作品，你的代码自己的作品，如何连接它们？

【解决方案2】：

假设您有一个 api 端点 api/admin/products

您可能希望在用户加载“产品详细信息”页面时发出请求。

仅使用 JS 的此类请求示例如下：

const http = new XMLHttpRequest()

http.open("GET", `${YOUR_API_ENDPOINT}`)
http.send()

http.onload = () => console.log(http.responseText)

这里有更多关于如何使用 XMLHttpRequest API 的详细信息，还有更新的 fetch 语法（我没有亲自使用过，所以我不想给出这个答案）。

通常情况下，像 AngularJS 这样的库可以通过处理应用程序的MVC (Model View Controller) 让您的生活更轻松，您可以在其中定义多个页面路由，然后添加逻辑来处理传递到该页面的数据。这将帮助您处理诸如等待数据加载，然后将数据填充到正确位置等事情。

使用您当前的实现，您可能会添加一个在加载index.php 时运行的 IIFE（立即调用函数表达式），然后它会触发该请求以获取数据。

【讨论】：

我已经成功获取数据，甚至将其记录在控制台中。我不知道如何在正确的表单元素中插入表单以使用户能够编辑它