Odinovsky Odinovsky - 2 months ago 6
HTML Question

SerializeObject and SerializeArray doesn't show on console.log

My JSFiddle here

I know there has been loads of posts about this here in SO but I'm wondering why these (SerializeObject/Serialize/SerializeArray()) doesn't show on my console.log after onclick.

HTML:

<form action="#" method="post" id="testform" name="testform">
<input class="input_rid" type="text" name="rid" id="rid" value="" placeholder="rid" required>
<input class="input_recipient_id" type="text" name="recipient_id" id="recipient_id" value="" placeholder="recipient_id" required>
<select class="select_eml" name="email_type" id="email_type" required>
<option value="" selected="selected" disabled="disabled">
Email type
</option>
<option value="Body">Body</option>
<option value="Body & Attachment">Body & Attachment</option>
<option value="Link">Link</option>
<option value="Internal Attachment">Internal Attachment</option>
<option value="External Attachment">External Attachment</option>
</select>
<select class="select_tcb" name="to_cc_bcc" id="to_cc_bcc">
<option value="" selected="selected" disabled="disabled">
To_CC_BCC
</option>
<option value="to">To</option>
<option value="cc">CC</option>
<option value="bcc">BCC</option>
</select>
<input class="input_sd" type="date" name="start_dte" id="start_dte" value="" placeholder="start_dte" required>

<input class="input_ed" type="date" name="end_dte" id="end_dte" value="" placeholder="end_dte">
<input class="button small radius right inline" type="button" onclick="return test();" value="Save to Console Log">

</form>


JS:

$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
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 test() {
var v = $("#testform").serializeObject();
console.log(v);
console.log($("#testform").serialize());
console.log($("#testform").serializeArray());
}

Answer

The problem here is that the test function is declared inside a window load scope and when you click on that button the interpreter can't find the invoked function.

To get that example working, move the function declaration outside the $(window).on('load') scope or just declare it globally:

window.test = function() {
 var v = $("#testform").serializeObject();
 console.log(v);
 console.log($("#testform").serialize());
 console.log($("#testform").serializeArray());
}
Comments