将表单和按钮链接到javascript命令

Question

我正在尝试制作一个简单的表单和按钮。 我在这里链接到JS小提琴

<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）。 任何帮助将不胜感激，谢谢！

Answer 1

$('#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/

Answer 2

您想使用.val（）而不是.text（），因为文本获取2个标记之间的值<div>here is some text</div>而val获取值<input value="some value"/>

Answer 3

要获取输入字段的值，请使用.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;
});

演示

Answer 4

EzPz！ 这是一个非常简单的任务。 首先，由于使用jQ建立按钮的click事件，因此可以删除属性type="submit" 或OR （ _推荐 ），在表单的Submit上创建事件。 如果是我，我将为表单添加ID并使用表单提交，这样您就无需对按钮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>