Javascript function parameter does not work

Question

In my html form I have 4 file input fields.

<input type="file" id="one" name="Title_image1" onchange="check_extension(one)"/>
<input type="file" id="one2" name="Title_image2" onchange="check_extension(one3)"/>
<input type="file" id="one3" name="Title_image3" onchange="check_extension(one4)"/>
<input type="file" id="one4" name="Title_image4" onchange="check_extension(one5)"/>

I want to check file extension on inputs using javascript.

My function

function check_extension($field_id)
{
    var allowed = {'jpg': 1, 'png': 1};
    var fileinput = document.getElementById("$field_id");

    var y = fileinput.value.split(".");
    var ext = y[(y.length) - 1];
    ext = ext.toLowerCase();

    if (allowed[ext]) {
        document.chooseF.confirm.disabled = false;
        return true;
    } else {
        alert("This is an unsupported file type. Supported files are: jpg,png");
        document.chooseF.confirm.disabled = true;
        return false;
    }
}

I am using the same function for all the input fields with fieldid as parameter, but it does not work.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

onchange="check_extension(one)"

Here one is the Node with the id "one", one is not the string "one"
document.getElementById("$field_id");

Even if $field_id is the id "one", "$field_id" is a different string
So getElementById("$field_id") will give you the node with id "$field_id", not the node with id "one".

Fixes

onchange="check_extension('one')"

and

document.getElementById($field_id)

Also I discourage naming string variables with a leading $

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 7, 2014 at 20:03

Volune

4,32924 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bulforce · Accepted Answer · 2014-09-07 20:00:57Z

0

change this:

<input type="file" id="one" name="Title_image1" onchange="check_extension(one)"/>

like so:

<input type="file" id="one" name="Title_image1" onchange="check_extension('one')"/>

Then change this:

function check_extension($field_id)
{
    var allowed = {'jpg': 1, 'png': 1};
    var fileinput = document.getElementById("$field_id");
....

like so:

function check_extension(field_id)
{
    var allowed = {'jpg': 1, 'png': 1};
    var fileinput = document.getElementById(field_id);
...

answered Sep 7, 2014 at 20:00

bulforce

1,0711 gold badge7 silver badges11 bronze badges

Collectives™ on Stack Overflow

Javascript function parameter does not work

2 Answers 2

Fixes

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Fixes

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related