CODEWITHSUNDEEP
javascriptjqueryhtml
John
John

Reputation: 47

How to give the same behavior of an input hidden and of a custom label

How to give the same behavior of a file type input button with style = "display: none;" To a custom label? That is, the label and the input can have the same actions even though the input is hidden. Below my html code:

<label for="model1" class="uploadFile">File...</label>
<input id="model1" type="file" name="model1" class="model1" style="display:none;" required="true"  />

Upvotes: 1

Views: 158

Answers (1)

Kaddath
Kaddath

Reputation: 6151

it is quite easy with jQuery:

$('#model1Label').on('click', function(){
    $('#model1').triggerHandler('click');
    
    //seems not to work consistently on chrome (only for file inputs?)
    //$('#model1').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="model1Label" for="model1" class="uploadFile">File...</label>
<input id="model1" type="file" name="model1" class="model1" style="display:none;" required="true"  />

EDIT: as suggested by SKSpall, modified the trigger function for a weird behaviour on at least chrome

Upvotes: 1

Related Questions