CODEWITHSUNDEEP
javascriptjquery
rob.m
rob.m

Reputation: 10611

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?

Upvotes: 0

Views: 352

Answers (2)

zer00ne
zer00ne

Reputation: 44118

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>

Upvotes: 3

scazzy
scazzy

Reputation: 978

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.

Upvotes: 0

Related Questions