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>

这里的input submit只有在被点击的时候才会设置值对吗？如果我尝试将所有提交按钮 ID 命名为 xx，那么我可以获得在函数中单击的按钮。单击相应的提交按钮后，我想执行不同的重定向。（多个提交操作：这个问题不是重复的，是JS和这种情况特有的）

Answer 1

您可以考虑以下方法：将按钮设为常规按钮 <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;
    });
});

如果您注释掉提交的表单，您将进行 google 搜索。否则，您将进行 bing 搜索。

Answer 2

脚本将无法按照您编写的方式运行。以下是一些准则：

处理提交按钮的点击事件。将其 value 存储在某个地方，例如另一个变量 cache.
在表单的提交事件中...检索上述值 (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/ (based on fiddle).

Answer 3

您可以在按钮上使用数据属性并在单击时更新表单操作...

<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 4

这样试试。适合我

    <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 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>

Javascript 获取输入值的函数

Javascript function to get input value

html

javascript

forms

jquery

button