0

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?

3
  • 1
    A button doesn't have a submit event. Really not enough details given here to understand how this is supposed to work. Is there a form and if so how is it submitted? Need to provide a minimal reproducible example and better explanation of what this other submit is supposed to do
    – charlietfl
    Nov 6, 2016 at 18:34
  • A value maybe comes from a data-attribute?
    – rob.m
    Nov 6, 2016 at 19:35
  • Ok, see update - snippet 3, the data attribute is hardcoded...is that useful?
    – zer00ne
    Nov 6, 2016 at 19:59

2 Answers 2

3

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>

6
  • thanks but i don't want an input text but to get the serach term value from the submit button
    – rob.m
    Nov 6, 2016 at 18:49
  • Search term value of button? Where is this hidden value coming from?
    – zer00ne
    Nov 6, 2016 at 18:53
  • There isn't that's why i have asked. Maybe the question isn't clear but i did say i wanted to get the value from a button not an input and i would like this button to be external to the execution code. Otherwise i would just remove the keyup and i'd be fine but i need what i've asked. Thanks a lot tho :)
    – rob.m
    Nov 6, 2016 at 19:33
  • The value of button comes from...the sky? Does this value change? Is this value constant? What determines the value of said button? When you want to submit...do mean the submit event of a form?
    – zer00ne
    Nov 6, 2016 at 19:36
  • 1
    My bad, I over think things, happy coding, sir. :)
    – zer00ne
    Nov 6, 2016 at 20:18
0

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.