File upload click simulation button triggers form

Question

I'm creating a gallery that allows the uploader to upload an image/multiple images at a time. As a default, one file input is displayed with a text input for the corresponding image description.

I also have another button which simulates the file input being clicked for aesthetical purposes. Upon clicking this button, the file browser triggers but the form in which the file inputs are placed seems to submit?

<button id="new-dialogue">add image</button>
<form action="action.php" method="post" enctype="multipart/form-data">
    <div class="create-upload">
        <!-- SECTION REPEATED WITH DIFFERENT IDS AS #NEW-DIALOGUE CLICKED -->
        <div class="upload">
            <input class="image-upload" type="file" id="input1" name="file[]"/>
            <button class="btn-select" id="1">select file</button>
            <input id="desc" type="text" name="desc[]"/>
        </div>
       <!-- SECTION --> 
    </div>
</form>

with JavaScript

$('document').ready(function() {
var i = 1;
$('#new-dialogue').click(function() {
    i++
    if(i >= 6) {

    } else {
        $('.create-upload').append('<div class="upload"><input class="image-upload" type="file" id="input' + i + '" name="file[]"/><button class="btn-select" id="file' + i + '">select file</button><input id="desc" type="text" name="desc[]"/></div>');
        $('.image-upload').imgPreview();
    }
});
$('.btn-select').click(function () {
    var id = this.id;
    $('input#input' + id).click();
});
});

@fonini Why does the form trigger when the button used to trigger file selection is clicked. — JoshMc
– JoshMc, Commented Sep 2, 2013 at 22:40

Brock Hensley · Accepted Answer · 2013-09-02 22:39:37Z

2

Put type='button' to disable the button from acting as a submit type.

<button class="btn-select" id="file1" type='button'>select file</button>

answered Sep 2, 2013 at 22:39

Brock Hensley

3,6652 gold badges31 silver badges47 bronze badges

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

Collectives™ on Stack Overflow

File upload click simulation button triggers form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related