javascript - Choosing between uploading a file or entering a custom URL - HTML Forms -

i creating web form in users have option set custom profile picture. i'm trying create drop-down box gives option choose between uploading image or linking image url.

the option not selected should disabled, can't seem work.

---

here code:

html:

<form> choose profile picture:<br> <select>      <option onselect="upload()">upload image     <option onselect="link()">load url  </select><br>  <input type="file" id="filebrowse" accept="image/*"><br> <input type="url" id="enterurl" placeholder="enter in url." disabled> 

js:

function upload() {     document.getelementbyid("enterurl").disabled = true;     document.getelementbyid("filebrowse").disabled = false;  }  function link() {     document.getelementbyid("filebrowse").disabled = true;     document.getelementbyid("enterurl").disabled = false; } 

---

here jsfiddle code.

the problem onselect not valid event handler option element. you'll have use onchange

html

<form>     choose profile picture:<br>     <select id="profilepicturetype" onchange="onselectchange()">          <option value="1">upload image</option>         <option value="2">load url</option>      </select><br>      <input type="file" id="filebrowse" accept="image/*"><br>     <input type="url" id="enterurl" placeholder="enter in url." disabled="disabled">  </form> 

js

function onselectchange() {     var selectedvalue = document.getelementbyid("profilepicturetype").value;         selectedvalue == "1" ? upload() : link(); }  function upload() {     document.getelementbyid("enterurl").disabled = true;     document.getelementbyid("filebrowse").disabled = false;  }  function link() {         document.getelementbyid("filebrowse").disabled = true;     document.getelementbyid("enterurl").disabled = false; } 

demo

---

a short version of solution

function onselectchange() {     var selectedvalue = document.getelementbyid("profilepicturetype").value;         var upload = selectedvalue == "1";      document.getelementbyid("filebrowse").disabled = upload;     document.getelementbyid("enterurl").disabled = !upload;      }