使用Javascript函数获得输入值

Question

我已经用多个按钮编写代码，每个按钮都有不同的值。 我想在javascript函数中获取该值。

<form action="https://www.bing.com" method="get"> 
    <input class="input" type="text" name="q" id="field" autofocus> 
    <div class="buttons"> 
     <input type="submit" class="button" id="x1" name="x1" value="Bing"> 
     <input type="submit" class="button" id="x2" name="x2" value="Google"> 
     <input type="submit" class="button" id="x3" name="x3" value="Yahoo"> 
     <input type="submit" class="button" id="x4" name="x4" value="Duck"> 
     <input type="submit" class="button" id="x5" name="x5" value="Ask"> 
     <input type="submit" class="button" id="x6" name="x6" value="Aol."> 
    </div> 
    </form> 
</div> 

<script> 
    var form = document.querySelector('form'); 
    var input = document.getElementById('field'); 
    var x = document.getElementById('x1').value; 

    form.addEventListener('submit', function(ev) { 
    ev.preventDefault(); 

    if(x=="Bing") { 

    var redirect = 'https://google.com/search?q=' + input.value; } 

    window.location = redirect; 
    }); 
</script> 

这里输入提交设置值只有当它被点击右？如果我尝试将所有提交按钮标识为xx，那么我可以得到在该功能中单击的按钮。一旦点击相应的提交按钮，我想执行不同的重定向。 （多提交操作： 这个问题不重复，它是特定于JS，这种情况）

Answer 1

尝试这样的。适用于我

<input class="input" type="text" name="q" id="field" autofocus> 
    <div class="buttons"> 
     <input type="submit" class="button" id="x1" name="x1" value="Bing"> 
     <input type="submit" class="button" id="x2" name="x2" value="Google"> 
     <input type="submit" class="button" id="x3" name="x3" value="Yahoo"> 
     <input type="submit" class="button" id="x4" name="x4" value="Duck"> 
     <input type="submit" class="button" id="x5" name="x5" value="Ask"> 
     <input type="submit" class="button" id="x6" name="x6" value="Aol."> 
    </div> 

</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 


<script> 

$(".button").on("click", function(e){ 
e.preventDefault(); 
var x = $(this).attr("value"); 
var redirect = "" 
if (x=="Google") 
{ 

window.location = "https://google.com/search?q=" + $(".input").val(); 

} 

}); 

</script> 

展开if条件以获得更多搜索选项。

感谢

Answer 2

你可能会考虑以下几点：使按钮常规按钮<input type="button" ...。然后为每个按钮设置点击事件，以完成您想要的任何操作，例如$('#x1').on('click', function(){...});。如果在某个时候您想要提交表格，您始终可以使用$('#formid').submit()这将发送文本输入中的信息。

或许，这可能会有所帮助：http://jsfiddle.net/abalter/boohfpsu/4/

<form id="myform" action="https://www.bing.com" method="get"> 
    <input class="input" type="text" name="q" id="field" /> 
    <div class="buttons"> 
     <input type="button" class="mybutton" id="bing-button" name="x1" value="Bing"/> 
     <input type="button" class="mybutton" id="google-button" name="x2" value="Google"/> 
     <input type="button" class="mybutton" id="yahoo-button" name="x3" value="Yahoo"/> 
     <input type="button" class="mybutton" id="duck-button" name="x4" value="Duck"/> 
     <input type="button" class="mybutton" id="ask-button" name="x5" value="Ask"/> 
     <input type="button" class="mybutton" id="Aol-button" name="x6" value="Aol"/> 
    </div> 
</form> 

$(document).ready(function(){ 
    $('#bing-button').on('click', function(){ 
     alert("bing was clicked"); 
     alert("the value of the text input is " + $('#field').val()); 
     alert("I'm now going to submit the form"); 
     $('#myform').submit(); 
     alert('submitting the search'); 
     var search_string = "https://google.com/search?q=" + $('#field').val() + "\""; 
     alert("the search string is: " + search_string); 
     window.location.href = search_string; 
    }); 
}); 

如果您注释掉表单提交你做一个谷歌搜索。否则，你做一个bing搜索。

Answer 3

该脚本将无法按照您编写它的方式工作。以下是一些指导原则：

1. 处理提交按钮的单击事件。将其value存储在某处，例如在另一变量cache中说。
2. 在表单提交事件...获取上述值（cache.value），然后执行您的重定向逻辑...

编辑：

var form = document.querySelector('form'); 
var input = document.getElementById('field'); 
var cache = {}; //global to store value... 

var buttons = document.querySelectorAll('input.button'); 

for(var x = 0, j = buttons.length; x < j; x++){ 
    var i = buttons[x]; 

    i.addEventListener('click', function(){   
     cache.value = this.value;   
    }, false); 
} 

form.addEventListener('submit', function(ev) { 
    ev.preventDefault(); 
    console.log(cache.value); 
}); 

这不是做的最好办法它...但你会最终到达那里;）

http://jsfiddle.net/1btuez9v/1/（基于Jonathan's小提琴）。

Answer 4

你可以使用数据属性上的按键和点击更新表单操作...

<form action="https://www.bing.com" method="get"> 
    <input class="input" type="text" name="q" id="field" autofocus /> 
    <div class="buttons"> 
     <input type="submit" class="button" id="x1" name="x1" value="Bing" data-target="https://www.bing.com" /> 
     <input type="submit" class="button" id="x2" name="x2" value="Google" data-target="https://google.com/search?q=" /> 
    </div> 
</form> 
<script> 
var form = document.querySelector('form'); 
var input = document.getElementById('field'); 

var buttons = document.getElementsByClassName("button"); 
for(var i=0; i<buttons.length; i++) { 
    buttons[i].addEventListener("click", function(e) { 
     form.action = this.dataset.target; 
    }); 
} 

form.addEventListener('submit', function(ev) { 
    ev.preventDefault(); 
    console.log(form.action); 
}); 
</script> 

的jsfiddle - http://jsfiddle.net/1btuez9v/

Answer 5

试试下面的代码应该工作

var input = document.getElementById('field'); 
 

 

 
$('.button').click(function(ev){ 
 
    
 
    if(ev.target.value == "Google"){ 
 
     location = "https://google.com/search?q=" + input.value; 
 
    }//add more cases here with 'else if' 
 
    window.location=location; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="https://www.bing.com" method="get"> 
 
    <input class="input" type="text" name="q" id="field" autofocus> 
 
    <div class="buttons"> 
 
     <input type="submit" class="button" id="x1" name="x1" value="Bing"> 
 
     <input type="submit" class="button" id="x2" name="x2" value="Google"> 
 
     <input type="submit" class="button" id="x3" name="x3" value="Yahoo"> 
 
     <input type="submit" class="button" id="x4" name="x4" value="Duck"> 
 
     <input type="submit" class="button" id="x5" name="x5" value="Ask"> 
 
     <input type="submit" class="button" id="x6" name="x6" value="Aol."> 
 
    </div> 
 
    </form>