rob.m rob.m - 29 days ago 17
Javascript Question

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

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

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>

Comments