Извлечение ввода HTML из текста и выпадающего меню в Javascript?

Question

Я хочу предоставить пользователям два механизма ввода - текстовое вхождение и выпадающее меню с помощью элемента. Входное значение выбирается в javascript. (без использования php).

Я могу сделать каждый метод работы, но не одновременно.

Это, вероятно, фундаментальный вопрос, но может ли кто-нибудь объяснить, как мне нужно настроить обработчики событий, а также значение для каждого входа, чтобы сделать эту работу?

<form name="myform" onsubmit="return userInput()"> 
    <select id="myVal" onchange="userInput()" onsubmit="return userInput()"> 
     <option>Select a country</option> 
     <option value="All Countries">All Countries </option> 
     <option value="Austrailia">Austrailia</option> 
     <option value="Korea">Korea </option> 
     <option value="Austria">Austria </option> 
     <option value="United States of America">United States of America  
     </option> 
     <option value="Japan">Japan</option> 
     <option value="Canada">Canada </option> 
     <option value="India">India</option> 
    </select> 


     <!-- <input name="Submit" type="submit" value="Add to list" > --> 
     <input type="text" id="myVal" placeholder="Add some text&hellip;"> 

</form> 

// Javascript code where I fetch user input. 

    function userInput(event){ 
       userinput = document.getElementById("myVal").value 
      // console.log(userinput) 
       // console.log(document.getElementById("myVal").value) 
      //draw(document.getElementById("myVal").value) 
      d3.select('svg').remove(); 
      main(); 
      console.log("Main has been called") 
      // draw(document.getElementById("myVal").value) 
      return false; 
     } 

Answer 1

И ваш элемент выбора, и ваш элемент ввода текста имеют одинаковый идентификатор. Сделайте их уникальными и сделайте один вызов для каждого элемента вашего JS. Кроме того, избавиться от атрибута обработчика события onsubmit в элементе select.