JSFiddle - React, Tailwind, and code Playground
HTML
<form class="email-form" action="" method="PUT" data-remote="true" data-method="put">
<ul>
<li>
<label for="sEmail1">
<input type="text" id="sEmail1" name="emails[]" value="[email protected]"
placeholder="">
</label>
</li>
<li>
<label for="sEmail2">
<input type="text" id="sEmail2" name="emails[]" value="[email protected]"
placeholder="">
</label>
</li>
<li>
<label for="sEmail3">
<input type="text" id="sEmail3" name="emails[]" value="[email protected]"
placeholder="">
</label>
</li>
</ul>
<button type="submit">Continue</button>
</form>
JavaScript
$(function() {
//form to object
$.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;
};
$('form').on('submit', function() {
var serialized = $(this).serializeObject();
console.log(serialized);
console.log(JSON.stringify(serialized));
return false;
});
});