將表單和按鈕鏈接到javascript命令

我試圖做一個簡單的窗體和按鈕的工作。我已經連接到JS小提琴這裏View JS Fiddle here 將表單和按鈕鏈接到javascript命令

<form> 
<input type="text" class="form-control" id="search" placeholder="enter sport"> 
<button type="submit" id="WFFsearch">Search</button> 
</form> 

$('#WFFsearch').on('click', function() { 
    var searchInput = $('#search').text(); 
    var url = "http://espn.go.com/" + searchInput + "/statistics"; 
    window.open(url); 
});

我希望能夠進入「NBA」不帶引號，然後點擊搜索按鈕，然後有其生成以下鏈接http://espn.go.com/nba/statistics一個新窗口。所有網址的第一部分和最後部分將是相同的，它只是中間的變化（nba，nfl，mlb）。任何幫助將不勝感激，謝謝！

來源

2015-08-21 DashDingo

EZPZ！這是一項非常簡單的任務。首先，由於您使用jQ來建立按鈕的單擊事件，因此您可以刪除屬性type="submit",或（_建議的），在窗體的提交中創建您的事件。如果是我，我需要填寫表格並使用表格提交，以便您不需要對您的按鈕進行任何更改type="submit"和輸入鍵仍然可以在搜索框中使用提交表單。

此外，您正嘗試在輸入上輸入.text。輸入有value。在jQuery中，您可以通過調用.val()代替或設置。

的代碼：

$('#frmGetStats').on('submit', function (e) { 
 
    e.preventDefault(); 
 
    var searchInput = $('#search').val(), 
 
     url = "http://espn.go.com/" + searchInput + "/statistics", 
 
     win = window.open(url); 
 
    alert("In this sandbox, new windows don't work. \nHowever you can see the link is \n[" + url + "]"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form id="frmGetStats"> 
 
    <input type="text" class="form-control" id="search" placeholder="enter sport"> 
 
    <button id="WFFsearch" type="submit">Search</button> 
 
</form>

來源

2015-08-21 22:02:28 SpYk3HH

$('#WFFsearch').on('click', function() { 
    var searchInput = $('#search').val(); 
    var url = "http://espn.go.com/" + searchInput + "/statistics"; 
    window.open(url); 
});

您需要val（）屬性，因爲輸入有問題，而不是text（）。 https://jsfiddle.net/1c93pqj0/2/

來源

2015-08-21 21:55:32 sinisake

你想使用.VAL（）代替的.text（）作爲文本得到2個標籤<div>here is some text</div>和Val得到值<input value="some value"/>

來源

2015-08-21 21:56:17 keja

爲了得到一個輸入字段的值，使用.val()之間的值。 .text()用於DOM元素中的文本。

點擊提交按鈕會默認提交表單，重新加載頁面並殺死腳本。你需要從事件處理程序中的return false來防止這種情況。

$('#WFFsearch').on('click', function() { 
    var searchInput = $('#search').val(); 
    var url = "http://espn.go.com/" + searchInput + "/statistics"; 
    window.open(url); 
    return false; 
});

DEMO

來源

2015-08-21 21:58:11 Barmar

將表單和按鈕鏈接到javascript命令

回答

相關問題