placeholder with picture load why i cant use input button?

Question

I would like to change my code that it work for form as button will enable validation currently so for any button in form i will create a input type = "button".

I'm currently studying this code where it allow me to change picture and load picture however i am not allow to use input to button as the picture will not load and result error. Here the example of how it look like.

I would like to use input type for button still as I cant use button since this is inside a form where if i click on a button tag it will appear with validation.

I have try changing the code to:

<input for="file" type="button" style="margin-left: 45px; height: 30px;" value="Select Image" style="cursor: pointer;">

But after that it don't allow me to select pic or load:

This is what the code look like:

var loadFile = function(event) {
    var image = document.getElementById('output');
    image.src = URL.createObjectURL(event.target.files[0]);
};

<p>
    <input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;">
</p>

<p>
    <img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" id="output" width="200" height="200" style="border-radius: 50%;" />
</p><br/>

<label for="file" style="cursor: pointer; padding-left: 3px; padding-top: 1px; position: static; margin-left: 45px; height: 30px;">Select Image</label>

Is there a way for me to use input for button?

You can find the answer here https://stackoverflow.com/questions/2920076/html-css-how-to-add-image-icon-to-input-type-button — seantsang, Dec 21 '21 at 17:08
Are you asking how to open the hidden file dialogue when you click on the image? — Barmar, Dec 21 '21 at 17:10

score 0 · Answer 1 · answered Dec 21 '21 at 17:56

0

You could "redirect" the click from the image to the input like this:

$("#output").click((e)=>{
   $('#file').click();
})

(I didn't test it)

answered Dec 21 '21 at 17:56

MoPaMo

517
6
24

where do i put this at ? – Flow Dec 21 '21 at 17:58
Somewhere in your code... (This is jQuery though, so you'd need to change it if you wanted Vanilla JS) – MoPaMo Dec 21 '21 at 20:52
yea i was looking at jquery earlier there some similar one i have tested it work but some is weird prolly i update – Flow Dec 22 '21 at 01:55
What is weird ? – MoPaMo Dec 22 '21 at 06:17
hi thanks is fix already with the jquery solve with my team member – Flow Dec 22 '21 at 06:20

placeholder with picture load why i cant use input button?

1 Answers1