Execute a search on an input field using javascript

Question

I'm trying to write a sanity test. Given:

<div id="txt-search-wrapper" class="pull-left non-action">
    <span class="search-widget"></span>
    <input type="text" class="search-widget" id="txt-search" placeholder="Search">
</div>

If I use either of these in the console, the text will be entered in the search box. If I manually click enter in the ui the search will be performed properly.

document.getElementById('txt-search').value='test'
$('#txt-search').val('test')

However, the following commands will fail to click and perform the search. I've tried to append \r\n to the text but to no avail. I've played around with keypress events too.

document.getElementById('txt-search').click()
 $('#txt-search').click()

See the following answers: http://stackoverflow.com/questions/1225798/javascript-programmatically-invoking-events http://stackoverflow.com/questions/2379949/how-to-invoke-click-event-from-javascript — Kolban, Nov 07 '14 at 02:45

score 0 · Answer 1 · answered Nov 07 '14 at 04:07

Excuse me if I'm misunderstanding your issue, but it looks like there are two separate, but related, issues at play.

First, .click()

Your jQuery is valid, but click() needs a handler if you want something to actually happen.

$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

[source: http://api.jquery.com/click/]

Second, HTML Forms

The input element doesn't actually have ability to perform a search. To do that, you'll need to build a form with a submit button.

See MDN's excellent documentation here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms

For a quick example, something like this:

<!-- A common form that includes input tags -->
<form action="getform.php" method="get">
    First name: <input type="text" name="first_name" /><br />
     Last name: <input type="text" name="last_name" /><br />
        E-mail: <input type="email" name="user_email" /><br />
<input type="submit" value="Submit" />
</form>

source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

Then you can call click on the submit input to run your search.

Hope that helps.

Execute a search on an input field using javascript

1 Answers1