Javascript : Uncaught InvalidStateError: Failed to read the 'selectionDirection'

Question

I've got this error message :

Uncaught InvalidStateError: Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('hidden') does not support selection.

When I check the console, it says error in this code:

function simpan() {
    $.ajax({
        url: 'app/tblhasilsurvey/simpan',
        type: 'post',
        async: false,
        data: {
            cmd: window.cmd,
            id: window.id_hasilsurvey,
            id_daftar: window.id_daftar,
            id_jadwal: window.id_jadwal,
            //tblhasilsurvey_nobasurvey : $("#nomor_ba_survey").val(),
            nomor_izin : $("#nomor_izin").val(),
            tgl_izin : $("#tgl_izin").val(),
            pemilik_izin : $("#pemilik_izin").val(),
            lokasi : $("#lokasi").val(),
            kodekel : $("#kelurahan").val(),
            kodekec : $("#kecamatan").val(),
            tblhasilsurvey_tglbasurvey : $("#tgl_ba_survey").val(),
            tbldaftarrencanasurvey_koordinat : $("#lattitude_").val()+';'+$("#longitude_").val(), // (lattitude;longitude)
            tblhasilsurvey_fungsibangunan : $("#fungsi_bangunan").val(),
            tblhasilsurvey_uraianpermasalahan : $("#uraian_permasalahan").val(),
            tblizin_id : $("#tblizin_id").val()
        },
        success: function (data) {
            if(data=='success') {
                notifikasi('Sukses','Data Berhasil Disimpan', 'success');
                //window.location.reload();
            } else {
                notifikasi('Gagal','Data Gagal Disimpan', 'fail');
            }
        }
    });
    if( $("#lattitude_").val() !='' ) window.pos_lat = $("#lattitude_").val(); // jika koordinat terisi maka update posisi lattitude
    if( $("#longitude_").val() !='' ) window.pos_long = $("#longitude_").val(); // jika koordinat terisi maka update posisi longitude

    $("#peta-lokasi").slideDown(1000);
    initialize();
    $("html, body").animate({ scrollTop: $(document).height() }, 2500);
    return false;

    function refresh () {
        window.location.reload();
    }
}

Can someone explain me what happen here?

Answer 1

Somewhere in your HTML you have an <input type='hidden' /> which you are trying to add to your data obj, but you are probably adding the jQuery object and this message is likely getting thrown when the jQuery object is being stringified somewhere. Given most of your data object is built by explicitly calling .val() I'd guess the problem lies with one of these:

        cmd: window.cmd,
        id: window.id_hasilsurvey,
        id_daftar: window.id_daftar,
        id_jadwal: window.id_jadwal,

try commenting those out and see if your error goes away. If it does, then the problem can probably be solved by adding .val() to the end of the problematic line.

---

EDIT AND EXTENSION

(Apr 9, 2015) This answer has had 3 upvotes since I wrote it, all spread out in time, so I guess other people are hitting this error and finding this answer, so here is a more general explanation to help people out.

This error is thrown if you add the jQuery object representing a hidden input to a JS object, then try to serialise that JS object to JSON.

Demo reproducing the error in its simplest form:

http://jsfiddle.net/ptugva6t/2/

Using this HTML:

<input type="hidden" id="test1" value="test1_val" />

Then #test1 will trigger the error if we use this JS:

$(document).ready(function() {
    var data = {
        test1: $("#test1")
    }
    JSON.stringify(data)
});

whereas this will be OK:

$(document).ready(function() {
    var data = {
        test1: $("#test1").val()
    }
    JSON.stringify(data)
});

Whereas if you use a text input you won't hit this error, but you will likely hit other serialisation errors due to the complexity of the object you are trying to serialise!

---

UPDATE

(7 September 2016) It looks like this was only ever a Chrome bug and it has been fixed in a recent Chrome update. There is now no error at all in Chrome 52 and you can JSON.stringify a jquery object with no problem.

Firefox is also OK. Safari 9.1.1 still throws an error, though - a TypeError on JSON.stringify that can be fixed by adding the .val()

So there's a mini-project arising, to find the Chrome bug report and its fix, and report it to Safari.