Can't target input[type=file] with multiple forms on page with javascript

Question

I have several dynamic forms on a page that each have a file input... How do I do I target the correct file input using $(this) in javascript?

Here is my form

<form enctype="multipart/form-data" action="category_manage.php" method="post">
<div class="plus-button-container">
    <input id="upfile" name="photo" type="file" onchange="submitFormAfterImageCheck();"/>
</div>
<input type="hidden" name="sml_image" value="sml_image" />
</form>

And here is my javascript function

function submitFormAfterImageCheck() {
    var formSubmit = $(this).closest("form");
    var file = $(this).closest('input[type=file]').val();
    alert(file);
}
//gives me undefined

I also tried this that works, but only for the first form ...

function submitFormAfterImageCheck() {
    var formSubmit = $(this).closest("form");
    var file = $('input[type=file]').val();
    alert(file);
}

I think I need something like this, but this gives me undefined

var file = $(this).find('input[type=file]').val();

You are using jQuery, use jQuery to bind the events, inline events are bad practice. — epascarello
– epascarello, Commented Mar 6, 2014 at 0:03
just use the form that you resolved as the context for the file selector: var file = $('input[type=file]', formSubmit).val(); — Darren Kopp
– Darren Kopp, Commented Mar 6, 2014 at 0:10

Arun P Johny · Accepted Answer · 2014-03-06 00:03:01Z

2

Since you have an inlined event handler, inside the event handler this does not refer to the changed element.

One easy solution is to pass the changed element as an parameter to the event handler like

<input id="upfile" name="photo" type="file" onchange="submitFormAfterImageCheck(this);"/>

then

function submitFormAfterImageCheck(el) {
    var formSubmit = $(el).closest("form");
    var file = $(el).val();
    alert(file);
}

Note: Since you are using jQuery it is better to use jQuery based event handlers instead of inlined ones

answered Mar 6, 2014 at 0:03

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

Musa · Accepted Answer · 2014-03-06 00:06:53Z

0

The way you have it submitFormAfterImageCheck is executing with the global object(window) as this.
I'd suggest separating code logic from the markup with jQuery event handlers.

<form enctype="multipart/form-data" action="category_manage.php" method="post">
<div class="plus-button-container">
    <input id="upfile" name="photo" type="file" onchange="submitFormAfterImageCheck();"/>
</div>
<input type="hidden" name="sml_image" value="sml_image" />
</form>
<script>
function submitFormAfterImageCheck() {
    var formSubmit = $(this).closest("form");
    var file = $(this).val();
    alert(file);
}
$('input[type="file"]').on('change', submitFormAfterImageCheck);
</script>

answered Mar 6, 2014 at 0:06

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Comments

iandotkelly · Accepted Answer · 2014-03-06 00:36:14Z

0

<input id="upfile" name="photo" type="file" onchange="submitFormAfterImageCheck(this);"/>

and :

function submitFormAfterImageCheck(source) { 
    alert($(source).val());
}

edited Mar 6, 2014 at 0:36

iandotkelly

9,1548 gold badges50 silver badges68 bronze badges

answered Mar 6, 2014 at 0:13

أنيس بوهاشم

9407 silver badges6 bronze badges

Collectives™ on Stack Overflow

Can't target input[type=file] with multiple forms on page with javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related