CODEWITHSUNDEEP
javascripthtmlwebinput
Yashwant Kumar
Yashwant Kumar

Reputation: 11

Hide submit button until a file has been chosen through pure JavaScript

I want to show the submit button only after a file is selected. I can do this with jQuery but I have not used jQuery in any part of the page so to avoid some spaces I need this to be done through pure JavaScript.

<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="uploadfile" id="pimage"/> 
<input type="submit" name="submit" value="Confirm">
</form>

Upvotes: 0

Views: 321

Answers (1)

Artyom
Artyom

Reputation: 46

const form = document.querySelector('form');
const submitButton = form.querySelector('[type="submit"]');
const inputFile = form.querySelector('[type="file"]');

inputFile.addEventListener('change', () => {
    submitButton.style.display = inputFile.files.length ? '' : 'none';
});
<form action="" method="POST" enctype="multipart/form-data">
  <input type="file" name="uploadfile" id="pimage"/> 
  <input type="submit" name="submit" value="Confirm" style="display: none">
</form>

Upvotes: 1

Related Questions