How to trigger a submit and get a value from the clicked button?

Question

I want to be able to click a button "wiki", get its value and run the search. I currently have this which starts searching as soon as you start typing.

<input id="searchterm" />
<button id="search">search</button>
<div id="results"></div>

$("#searchterm").keyup(function(e) {
    var q = $("#searchterm").val();
    $.getJSON("http://it.wikipedia.org/w/api.php?callback=?", {
        srsearch: q,
        action: "query",
        list: "search",
        format: "json"
    }, function(data) {
        $("#results").empty();
        $("#results").append("<p>Results for <b>" + q + "</b></p>");
        $.each(data.query.search, function(i, item) {
            $("#results").append("<div><a href='http://it.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + item.title + "</a><br>" + item.snippet + "<br><br></div>");
        });
    });
});

I would like to run the search after clicking an external button like:

<button class="wiki" type="submit" value="myValueSearchTerm">Wiki</button>

I know I can use:

$('.wiki').trigger('submit');

Yet how do I stop the current search, wait for the .wiki button interaction and search for its value?

Answer 1

UPDATE

OP requests that instead of a text input that a button with an arbitrary value be placed there instead. (see Snippet 3).

---

Register click event to #search button instead of the #searchterm (see Snippet 1). or Register change event to #searchterm instead of keyup.

SNIPPET 1

 $("#search").on('click', function(e) { var q = $("#searchterm").val(); $.getJSON("http://it.wikipedia.org/w/api.php?callback=?", { srsearch: q, action: "query", list: "search", format: "json" }, function(data) { $("#results").empty(); $("#results").append("<p>Results for <b>" + q + "</b></p>"); $.each(data.query.search, function(i, item) { $("#results").append("<div><a href='http://it.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + item.title + "</a><br>" + item.snippet + "<br><br></div>"); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="searchterm" /> <button id="search">search</button> <div id="results"></div> 

SNIPPET 2

 $("#searchterm").on('change', function(e) { var q = $("#searchterm").val(); $.getJSON("http://it.wikipedia.org/w/api.php?callback=?", { srsearch: q, action: "query", list: "search", format: "json" }, function(data) { $("#results").empty(); $("#results").append("<p>Results for <b>" + q + "</b></p>"); $.each(data.query.search, function(i, item) { $("#results").append("<div><a href='http://it.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + item.title + "</a><br>" + item.snippet + "<br><br></div>"); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="searchterm" /> <button id="search">search</button> <div id="results"></div> 

SNIPPET 3

 $("#wiki").on('click', function(e) { var q = $(this).data('subject'); $.getJSON("http://it.wikipedia.org/w/api.php?callback=?", { srsearch: q, action: "query", list: "search", format: "json" }, function(data) { $("#results").empty(); $("#results").append("<p>Results for <b>" + q + "</b></p>"); $.each(data.query.search, function(i, item) { $("#results").append("<div><a href='http://it.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + item.title + "</a><br>" + item.snippet + "<br><br></div>"); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id='wiki' data-subject='whatever'>Search for:</button> <output id='results'></output> 

Answer 2

Remove the onkeyup event, this will stop the auto searching functionality.

Change $("#searchterm").keyup(function(e) {

to $("#search").click(function(e) { This will search only when you click the Search button.

or $("#wiki").click(function(e) { (considering wiki is a button)

Also, you cannot use 'submit' event on '.wiki' button unless it's part of a form.