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>

此处输入提交仅在单击时才设置值？如果我尝试将所有提交的buttion 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搜索。否则你会进行搜索。

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/（基于Jonathan's小提琴）。

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函数获取输入值

5 个答案: