通过名称和值使用 json 数据填充表单
Posted
技术标签:
【中文标题】通过名称和值使用 json 数据填充表单【英文标题】:populate form with json data via name and value 【发布时间】:2020-06-29 15:58:33 【问题描述】:以下是我如何使用name
属性和值捕获我的网络表单的值并将其保存为 JSON。
如何使用name
和value
以相同格式从捕获的JSON 数据中重新填充表单。 (上下文:我将存储保存的 json,稍后调用它以重新填充所述表单)
我将值保存为 JSON 的代码:
$.fn.serializeObject = function()
var o = ;
var a = this.serializeArray();
$.each(a, function()
if (o[this.name] !== undefined)
if (!o[this.name].push)
o[this.name] = [o[this.name]];
o[this.name].push(this.value || '');
else
o[this.name] = this.value || '';
);
return o;
;
$(function()
$('form#saveTemp').submit(function()
alert(JSON.stringify($('form').serializeObject()));
return false;
);
);
其中一个jsfiddle。
【问题讨论】:
请注意,Stack Snippets 将允许人们在不离开 Stack Overflow 的情况下运行代码... 【参考方案1】:在jquery.serialize
概念的帮助下检查我已经用于我的项目的这个
概念:
-
您可以使用
value
。但是对于某些无法访问的情况值,请改用data-value
如果您需要具有特殊操作的特殊类,请使用 elem.hasClass
方法检查
$.fn.serializeObject = function()
var arr = $(this).find('input,textarea,select').map(function(a, elem)
if ($.trim($(elem).attr('name')))
if ($(elem).is('input[type=radio]') || $(elem).is('input[type=checkbox]'))
if ($(elem).is(':checked'))
return (
[$(elem).attr('name')]: $(elem).attr('data-value') ? $.trim($(elem).attr('data-value')) : $.trim($(elem).val())
);
else
if ($(elem).is('input[type=checkbox]'))
return (
[$(elem).attr('name')]: ""
);
else if ($(this).hasClass('datepicker'))
return (
[$(elem).attr('name')]: ($(elem).val().trim() ? $(elem).val().toString().split('-').reverse().join('-') : "")
);
else
return (
[$(elem).attr('name')]: $(elem).attr('data-value') ? $.trim($(elem).attr('data-value')) : $.trim($(elem).val())
);
).get();
arr = arr.reduce((a, b) => (a[Object.keys(b)[0]] = Object.values(b)[0], a), );
return arr;
$(function()
$('form#saveTemp').submit(function()
alert(JSON.stringify($('form').serializeObject()));
return false;
);
);
form
line-height: 2em;
p
margin: 5px 0;
h2
margin: 10px 0;
font-size: 1.2em;
font-weight: bold
#result
margin: 10px;
background: #eee;
padding: 10px;
height: 40px;
overflow: auto;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="saveTemp">
<div id='polygon-styles' class='clear' data-bind="visible:polygonFeature">
<div class="left">
<div class="marg clear of-h">
<div class="w100 left">
<label>Style Name</label>
</div>
<div class="left">
<input id='style-name' class='w150' type="text" data-text-field="name" data-value-field="value" name="styleName">
</div>
</div>
<div class="marg clear of-h">
<div class="w100 left">
<label>Fill Type</label>
</div>
<div class="left">
<select id='style-type' class='w150' data-role="dropdownlist" data-bind="source:pgFillTypes,value:pgFillType" data-text-field="name" data-value-field="value" name="fillType">
</select>
</div>
</div>
<div class="marg clear of-h">
<div class="w100 left">
<label>Fill Color</label>
</div>
<div class="left">
<input class="w100" data-role="colorpicker" data-bind="value:pgFillColor,enabled:pgFillColActive" name="fillColor">
</div>
</div>
<div class="marg clear of-h">
<div class="w100 left">
<label>Transparency</label>
</div>
<div class="left">
<input type='number' class='w100' data-role="numerictextbox" data-format="p" data-min="0" data-max="1" data-step="0.1" data-bind="value:pgFillTrans,enabled:pgFillTransActive" name="fillTrans" />
</div>
</div>
</div>
<div class="left">
<div class="marg clear of-h">
<div class="w100 left">
<label>Outline Type</label>
</div>
<div class="left">
<select id='polygon-outline-style-type' class='w150' data-role="dropdownlist" data-bind="source:plTypes,value:pgOutlineType" data-text-field="name" data-value-field="value" name="outlineType">
</select>
</div>
</div>
<div class="marg clear of-h">
<div class="w100 left">
<label>Outline Width</label>
</div>
<div class="left">
<input type='number' class='w100' data-role="numerictextbox" data-format="n" data-min="1" data-bind="value:pgOutlineWidth" name="outlineWidth" />
</div>
</div>
<div class="marg clear of-h">
<div class="w100 left">
<label>Outline Color</label>
</div>
<div class="left">
<input class="w100" data-role="colorpicker" data-bind="value:pgOutlineColor" name="outlineColor">
</div>
</div>
<button class="save-temp-btn" input type="submit" value="submit">Save as Template</button>
<div class="left">
<div class="marg clear of-h">
<div class="w100 left">
<label>Apply Shared Template</label>
</div>
<div class="left">
<select id='polygon-shared-templates' class='w150' data-role="dropdownlist" data-bind="" data-text-field="name" data-value-field="value">
</select>
</div>
</div>
</div>
</div>
</div>
<button type="submit" id="populateForm">Populate
</button>
</form>
【讨论】:
谢谢!但是我只是运行它,输入了一些值->点击“另存为模板”->删除了值,然后点击->“填充”按钮,它没有填充。 设置填充按钮type='submit'
。并以与save as template
按钮相同的形式包装
谢谢.. 更改仍然没有填充它
是的,它仍然没有填充......但感谢您的回复,无论如何+1
我从你的 sn-p 直接在 SO 上面运行它!以上是关于通过名称和值使用 json 数据填充表单的主要内容,如果未能解决你的问题,请参考以下文章
javascript 收集输入字段数据并使用key作为输入名称和值作为输入值构建json。提供HTML表单作为参数
jQuery ajax - serializeArray() 方法
express-graphql 解析器参数在解析器中为空,但 info variableValues 填充了名称和值