从Javascript中的文本和下拉菜单中获取HTML输入

Fetching HTML input from text and drop down menu in Javascript?

本文关键字：获取 HTML 下拉菜单 输入 文本 Javascript      更新时间：2023-09-26

我想为用户提供两种输入机制——文本输入和使用元素的下拉菜单。输入值是用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;
        }

select元素和text input元素都有相同的ID。使它们唯一，并对JS中的每个元素进行一次调用。另外，去掉select元素中的onsubmit事件处理程序属性。

相关文章：