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

时间:2014-10-28 04:42:16

标签: javascript forms text input drop-down-menu

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

1 个答案:

答案 0 :(得分:0)

select元素和文本输入元素都具有相同的ID。使它们独一无二,并为JS中的每个元素调用一次。另外,去掉select元素中的onsubmit事件处理程序属性。