如何使用Javascript将数组中的数据设置为表单元素的值
如何使用Javascript将数组中的数据设置为表单元素的值
提问于 2020-02-05 01:19:39
现在我正在试着编辑。并希望当点击编辑按钮时。用户只能导航到原始输入表单，此时将预先填充当前的产品详细信息，可以在相同的表单中编辑这些详细信息并再次保存。
当点击编辑按钮时，将从database...and接收产品详细信息的数组，用户也会被重定向到正确的表单。我现在需要一些关于如何将接收到的数据插入到表单中，以便可以编辑的一些方向
$(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>
回答 2
Stack Overflow用户
发布于 2020-02-05 18:08:46
您可以使用下面的示例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>
Stack Overflow用户
发布于 2020-02-05 01:44:58
假设您有一个api端点api/admin/products
您可能希望在用户加载Product Details页面时发出请求。
仅使用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 (立即调用的函数表达式)，然后它将触发该请求来获取数据。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60062497
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号