SerializeObject和SerializeArray没有显示在console.log上

Question

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 1

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());
}