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