[英]Coverting array to object with same input name javascript
been trying all possible solution all night long and i couldn't find solution for my need and I still new learner in javascript整晚都在尝试所有可能的解决方案,但我找不到满足我需要的解决方案,而且我仍然是 JavaScript 的新手
Solution that i tried to convert my form data to object is我尝试将表单数据转换为对象的解决方案是
$('input.submit').click(function(e){
e.preventDefault();
var formData = $('form.anything').serializeArray();
console.log(formData);
});
the output of the array look like in the image link below数组的输出看起来像下面的图片链接
output of using serializeArray()使用 serializeArray() 的输出
And i was trying to convert it into an array of object using jquery.我试图使用 jquery 将其转换为对象数组。 Some of the ways that i found as below, but it did not give me the object format
我发现的一些方法如下,但它没有给我对象格式
$.fn.serializeObject = function() {
var stored_data = {};
var form_data = this.serializeArray();
$.each(form_data, function() {
if (stored_data[this.name]) {
if (!stored_data[this.name].push) {
stored_data[this.name] = [stored_data[this.name]];
}
stored_data[this.name].push(this.value || '');
} else {
stored_data[this.name] = this.value || '';
}
});
and the output that i get was this:我得到的输出是这样的:
using the serializeObject()使用 serializeObject()
output of the tried solution this output seems to be closed to the object format that i want.尝试解决方案的输出此输出似乎接近我想要的对象格式。
Hope the information is useful.希望信息有用。
Output Expected预期产出
[
cashin: [
0: {
name: [...],
amount: [...],
type: [...]
},
1: {
name: [...],
amount: [...],
type: [...]
}
],
cashout: [
0: {
name: [...],
amount: [...],
type: [...]
},
1: {
name: [...],
amount: [...],
type: [...]
}
]
]
Update Information更新资料
Here are the code of the form in the html这是html中表单的代码
<form id="cashin_form" class="anything" action="/cashins" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="xxxx">
<div id="cashin_form_item">
<div id="cashin_form-data" class="field remove-item cashin-form-data">
<label for="cashin_name">Name</label>
<input type="text" value="" name="cashin[name]" id="cashin_name">
<label for="cashin_amount">Amount</label>
<input type="number" name="cashin[amount]" id="cashin_amount">
<label for="cashin_type">Type</label>
<select name="cashin[type]" id="cashin_type"><option value="1">Recurring</option>
<option value="2">This Time Only</option></select>
<a href="#" class="remove-field btn-remove-customer">Remove Fields</a></div><div id="cashin_form-data" class="field remove-item cashin-form-data">
<label for="cashin_name">Name</label>
<input type="text" value="" name="cashin[name]" id="cashin_name">
<label for="cashin_amount">Amount</label>
<input type="number" name="cashin[amount]" id="cashin_amount">
<label for="cashin_type">Type</label>
<select name="cashin[type]" id="cashin_type"><option value="1">Recurring</option>
<option value="2">This Time Only</option></select>
<a href="#" class="remove-field btn-remove-customer">Remove Fields</a></div><div id="cashin_form-data" class="field remove-item cashin-form_last">
<!-- start input -->
<label for="cashin_name">Name</label>
<input type="text" value="" name="cashin[name]" id="cashin_name">
<label for="cashin_amount">Amount</label>
<input type="number" name="cashin[amount]" id="cashin_amount">
<label for="cashin_type">Type</label>
<select name="cashin[type]" id="cashin_type"><option value="1">Recurring</option>
<option value="2">This Time Only</option></select>
<a href="#" class="remove-field btn-remove-customer">Remove Fields</a><a href="#" id="add_item">Add Item</a></div></div>
<!-- end input -->
<br>
<label for="cashin_name">Name</label>
<input type="text" value="" name="cashout[name]" id="cashout_name">
<label for="cashout_amount">Amount</label>
<input type="number" name="cashout[amount]" id="cashout_amount">
<label for="cashout_type">Type</label>
<select name="cashout[type]" id="cashout_type">
<option value="1">Recurring</option>
<option value="2">This Time Only</option>
</select>
<div class="actions">
<input type="submit" name="commit" value="Submit Form" class="submit" data-disable-with="Submit Form">
</div>
</form>
the input block will increase accordingly when the user click on the Add Item button.当用户单击“添加项目”按钮时,输入块将相应增加。 But now the problem that i faced is to create object for every input because it has
cashin[...]
and cashout[...]
to send it to the server.但是现在我面临的问题是为每个输入创建对象,因为它有
cashin[...]
和cashout[...]
将它发送到服务器。
This code may help you.此代码可能对您有所帮助。
$('#cashin_form').on('submit', function(event) { event.preventDefault(); let formdata = $('#cashin_form').serializeArray(); let stored_data = { cashin: [], cashout: [] }; let temp_cashin_object = {}; let temp_cashout_object = {}; $.each(formdata, (key, obj) => { if(obj.name !== 'authenticity_token') { switch(obj.name) { case 'cashin[name]': temp_cashin_object['name'] = obj.value; break; case 'cashin[amount]': temp_cashin_object['amount'] = obj.value; break; case 'cashin[type]': temp_cashin_object['type'] = obj.value; stored_data.cashin.push(temp_cashin_object); temp_cashout_object = {}; break; case 'cashout[name]': temp_cashout_object['name'] = obj.value; break; case 'cashout[amount]': temp_cashout_object['amount'] = obj.value; break; case 'cashout[type]': temp_cashout_object['type'] = obj.value; stored_data.cashout.push(temp_cashout_object); temp_cashout_object = {}; break; default: break; } } }); console.log(stored_data); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="cashin_form" class="anything" action="/cashins" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="xxxx"> <div id="cashin_form_item"> <div id="cashin_form-data" class="field remove-item cashin-form-data"> <label for="cashin_name">Name</label> <input type="text" value="" name="cashin[name]" id="cashin_name"> <label for="cashin_amount">Amount</label> <input type="number" name="cashin[amount]" id="cashin_amount"> <label for="cashin_type">Type</label> <select name="cashin[type]" id="cashin_type"><option value="1">Recurring</option> <option value="2">This Time Only</option></select> <a href="#" class="remove-field btn-remove-customer">Remove Fields</a></div><div id="cashin_form-data" class="field remove-item cashin-form-data"> <label for="cashin_name">Name</label> <input type="text" value="" name="cashin[name]" id="cashin_name"> <label for="cashin_amount">Amount</label> <input type="number" name="cashin[amount]" id="cashin_amount"> <label for="cashin_type">Type</label> <select name="cashin[type]" id="cashin_type"><option value="1">Recurring</option> <option value="2">This Time Only</option></select> <a href="#" class="remove-field btn-remove-customer">Remove Fields</a></div><div id="cashin_form-data" class="field remove-item cashin-form_last"> <!-- start input --> <label for="cashin_name">Name</label> <input type="text" value="" name="cashin[name]" id="cashin_name"> <label for="cashin_amount">Amount</label> <input type="number" name="cashin[amount]" id="cashin_amount"> <label for="cashin_type">Type</label> <select name="cashin[type]" id="cashin_type"><option value="1">Recurring</option> <option value="2">This Time Only</option></select> <a href="#" class="remove-field btn-remove-customer">Remove Fields</a><a href="#" id="add_item">Add Item</a></div></div> <!-- end input --> <br> <label for="cashin_name">Name</label> <input type="text" value="" name="cashout[name]" id="cashout_name"> <label for="cashout_amount">Amount</label> <input type="number" name="cashout[amount]" id="cashout_amount"> <label for="cashout_type">Type</label> <select name="cashout[type]" id="cashout_type"> <option value="1">Recurring</option> <option value="2">This Time Only</option> </select> <div class="actions"> <input type="submit" name="commit" value="Submit Form" class="submit" data-disable-with="Submit Form"> </div> </form>
Output输出
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.