JavaScript：将function（this）更改为function（this.id）

Question

I have This javascript function for open kcfinder file manager url for textbox.

JS:

<script type="text/javascript">

function openKCFinder(field) {
    window.KCFinder = {
        callBack: function(url) {
            field.value = url;
            window.KCFinder = null;
        }
    };
    window.open("http://localhost/cms/kc/browse.php?type=video&dir=files/public", "kcfinder_textbox",
        "status=0, toolbar=0, location=0, menubar=0, directories=0, " +
        "resizable=1, scrollbars=0, width=800, height=600"
    );
}

</script>

HTML:

<input id="video" onclick="openKCFinder(this)" class="form-control" type="text" name="video" placeholder="add video"> // i need to change openKCFinder(this.id)

<input id="audio" onclick="openKCFinder(this)" class="form-control" type="text" name="video" placeholder="add video"> // i need to change openKCFinder(this.id)

now i need to change (this) to (this.id) for change type of open url . ie: if textbox/input id="video" Then type=video Or if textbox/input id="audio" , type=audio .

How to change this function for my need?

DEMO Kcfinder Textbox

Answer 1

You can do it this way:

<script type="text/javascript">

function openKCFinder(field) {
    window.KCFinder = {
        callBack: function(url) {
            field.value = url;
            window.KCFinder = null;
        }
    };
    if (field.id === 'video') {
        window.open("http://localhost/cms/kc/browse.php?type=video&dir=files/public", "kcfinder_textbox",
            "status=0, toolbar=0, location=0, menubar=0, directories=0, " +
            "resizable=1, scrollbars=0, width=800, height=600"
        );
    }
    else if (field.id === 'audio') {
        // open something else
    }
    else {
        // handle something unknown
    }
}

</script>

Or if you're sure about the ids, you could also do

window.open("http://localhost/cms/kc/browse.php?type=" + field.id + "&dir=files/public", "kcfinder_textbox",
    "status=0, toolbar=0, location=0, menubar=0, directories=0, " +
    "resizable=1, scrollbars=0, width=800, height=600"
);

You may also be interested in MDN's documentation of the HTMLInputElement , which describes the properties you have with this in field .