javascript/jquery Search function does not look for any employee and only reloads page

Question

Searching for an employee but when clicking on the search button the page just reloads.

javascript code

 ncnk.initMemberDirectory = function() {
        var executeSearch = function() {
            var search = $('input#member-search').val();
            window.location = '/ncnk/member-directory/' + encodeURIComponent(search);
        };

        $('button.member-search').on('click', function(e) {
            executeSearch();
          });

        $('input#member-search').on('keypress', function(e) {
            if (e.which === 13) {
                executeSearch();
                return false;
            }
            
        });

HTML code:


<input type="text" id="member-search" placeholder="Search Members">
            <button type="submit" class="member-search" >SEARCH</button>

Does this answer your question? [prevent refresh of page when button inside form clicked](https://stackoverflow.com/questions/7803814/prevent-refresh-of-page-when-button-inside-form-clicked) — Ivar, Sep 26 '20 at 21:19
You are using a `submit` button so that's why the page refreshes. You want ` — Scott Marcus, Sep 26 '20 at 21:22

score 0 · Answer 1 · answered Sep 26 '20 at 21:21

0

window.location will trigger a reload if you do not have a frontend router catching it.

In you code, you have:

window.location = '/ncnk/member-directory/' + encodeURIComponent(search);

Which will load page to the url /ncnk/member-directory/<search text>

If you do not have a router (either frontend or backend) catching this URL, you will re-route without data.

It seems that your problem is in the Router side

answered Sep 26 '20 at 21:21

Itamar

1,601
1
10
23

thank you very much, I am currently using Drupal 7.73 vrs to maintain the site if that info is any helpful. Could you possibly elaborate more about the Router side and maybe guide me in the right direction, much appreciated. – Igiboi 26 Sep 26 '20 at 21:28

score 0 · Answer 2 · answered Sep 26 '20 at 21:21

you should add preventDefault function to the click function so that the button won't reload the page

$('button.member-search').on('click', function(e) {
        e.preventDefault();
        executeSearch();
      });

    $('input#member-search').on('keypress', function(e) {
        e.preventDefault();
        if (e.which === 13) {
            executeSearch();
            return false;
        }
        
    });

javascript/jquery Search function does not look for any employee and only reloads page

2 Answers2