Linking form and button to javascript command

Question

I am trying to make a simple form and button work. I have linked to a JS Fiddle here View JS Fiddle here

<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);
});

I want to be able to enter "nba" without the quotation marks and click the search button, then have a new window which generates the following link http://espn.go.com/nba/statistics . The first part and the last part of all the urls will be the same, it's just the middle that changes (nba, nfl, mlb). Any help would be greatly appreciated, thanks!

Answer 1

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

You need val() property, since input is in question, not text(). https://jsfiddle.net/1c93pqj0/2/

Answer 2

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

Answer 3

To get the value of an input field, use .val() . .text() is for the text in a DOM element.

Clicking on the submit button submits the form by default, which reloads the page and kills the script. You need to return false from the event handler to prevent this.

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

DEMO

Answer 4

EzPz! This is a very simple task. First of all though, since you're using jQ to establish your button's click event, you can either drop the attribute type="submit" , OR ( _recommended ), create your event on the form's submit. If it were me, I'd id the form and use the forms submit, so that you don't need any alters to your button type="submit" and enter key can still be used in search box to submit the form.

Also, you're trying to .text on an input. Input's have value . In jQuery you can get or set that value by calling .val() instead.

The code:

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