[英]How to update JS Object for changes made in form data using JS?
我有一個 JS Object 如下。 每當表單元素發生任何更改時,我都想更新它。 但是由於名稱大括號"my_object[default][1][quick][position]"
不轉換為數組,所有輸入名稱都作為字符串附加。 我試圖完成的事情也在最后給出。
我有大約 100 個元素,包括輸入、select、收音機、復選框等。我正在尋找一種動態方法來更新 object 每當更新任何元素時。
HTML 表格元素
<div class="col-12">
<label class="card">
<input name="my_object[default][1][quick][position]" class="checkable" value="text-left" type="radio" checked>
<span class="my-details">
Left
</span>
</label>
</div>
JS OBJECT 待更新
<script>
var my_object ={
"default": {
"1": {
"data_src": "print1.jpg",
"quick": {
"a": "12",
"b": "22",
"position": "right"
},
"2": {
"data_src": "print2.jpg",
"quick": {
"a": "10",
"b": "20",
"position": "center"
}
}
}
};
</script>
我嘗試了什么
$("#submit_btn").click(function (e) {
e.preventDefault();
var formData = $("#myform").serializeArray();
$.each(formData, function () {
if (my_object[this.name]) {
if (!my_object[this.name].push) {
my_object[this.name] = [my_object[this.name]];
}
my_object[this.name].push(this.value || '');
}
});
});
var my_object ={ "default": { "1": { "data_src": "print1.jpg", "quick": { "a": "12", "b": "22", "position": "right" }, }, "2": { "data_src": "print2.jpg", "quick": { "a": "10", "b": "20", "position": "center" } } } }; function updateMe(ths){ eval($(ths).attr("data-jsonprop")+ "='" + $(ths).attr("value")+"'"); console.log(my_object); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-12"> <label class="card"> <input name="radio1" data-jsonprop='my_object["default"]["1"]["quick"]["position"]' class="checkable" value="text-left" type="radio" onchange="updateMe(this)"> <span class="my-details"> Left </span> </label> <label class="card"> <input name="radio1" data-jsonprop='my_object["default"]["1"]["quick"]["position"]' class="checkable" value="text-right" type="radio" onchange="updateMe(this)"> <span class="my-details"> Right </span> </label> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.