Console not printing contents of input field

Question

I am trying to have my console print the contents of an input field with a type of file. However, it's not doing this. It's actually behaving as though a form is being submitted, although there is no action attached to the form at this time. Can anyone explain why I'm unable to get the value of the desired field?

js

$("#submit").on("click", function(){
    var image = $("#dept_image").val();
    console.log(image);
})

html

<form enctype="multipart/form-data" method="post" id="departments" class="view">
    <fieldset>
        <label for="dept_name">Department Name:</label>
        <input type="text" name="dept_name" id="dept_name" />
    </fieldset>
    <fieldset>
        <label for="dept_image">Image:</label>
        <input type="file" name="dept_image" id="dept_image" />
    </fieldset>
    <button name="submit" id="submit">Submit</button>
</form>

You have to prevent default behaviour of submit button. And you must change name attribute of submit button to something different than `submit` — A. Wolff, Nov 05 '14 at 18:47
BTW, to get files of input file, use property `files` of DOM node, not value — A. Wolff, Nov 05 '14 at 18:51
@Scimonster Because of this e.g: http://stackoverflow.com/questions/833032/submit-is-not-a-function-in-javascript — A. Wolff, Nov 05 '14 at 18:55
@Robert you can use: `$("#dept_image").get(0).files` or `$("#dept_image")[0].files` or `document.getElementById('dept_image').files` or `$("#dept_image").prop("files")` — A. Wolff, Nov 05 '14 at 18:56
When I do that, I get the console log of `FileList[File]`. How do I see the path text? — , Nov 05 '14 at 18:59
JavaScript does not have access to the file's path. What are you needing it for @Robert? — Jay Blanchard, Nov 05 '14 at 19:01

score 0 · Answer 1 · answered Nov 05 '14 at 18:49

Prevent the default action by capturing the event and acting on it -

$("#submit").on("click", function(event){
    event.preventDefault(); // prevents the default action of the submit
    var image = $("#dept_image").val();
    console.log(image);
})

Nothing will be console logged from the submitting page because you are 'leaving' it to load a 'new' page (even though it is itself). Now you can ad AJAX to the function to do whatever submission action you would care to.

Console not printing contents of input field

1 Answers1