Why is my JavaScript search function redirecting to "http://localhost:8090/?"?

Question

I am creating a webserver that, at the moment, is being hosted on http://localhost:8090. It consists of an HTML file, a server.js and a client.js file. I have managed to set up communication between the client and the server perfectly for my needs. My problem lies in that when I click on my search button, everything executes fine except for some reason it will redirect the page to 'http://localhost:8090/?' when I need it to stay on 'http://localhost:8090/' for it to dynamically update the HTML.

I have searched extensively and found nothing that is similar to my problem. I found this one question https://stackoverflow.com/a/2647601/5264986 but this will bring up a dialog box every time the page wants to go to a different address which is not what I need. I have gone through all my code and there is no redirect or href that points to this location. I have narrowed it down to this function in client.js:

function search(){

    var search = document.getElementById('txt_field').value; 

    fetch('/search', {
        headers: {text: search}
    })
        .then(response => response.json())
        .then(function(data) {

            // CODE HERE TO DYNAMICALLY UPDATE HTML

        })
        .catch(error => console.error(error));

}

and in my server all that happens for this is:

app.get('/search', function(req, res){

    var text = req.get('text');
    var url = 'https://api.spotify.com/v1/search?q=name:'+text+'&type=track';
    var content = httpGet(url);
    res.send(content);

});

where httpGet is an xmlhttprequest.

Edit

This is the html for the search button:

<button id="send_btn" class="btn btn-outline-secondary my-2 my-sm-0"><img src="./images/search.png" width="30"></button>

and in client.js this is what triggers it:

document.getElementById('send_btn').onclick = search;

End of edit

It sends content fine back to the client, but for some reason it then redirects to :8090/? which reloads the html file and overwriting the dynamic html. Any pointers in the right direction would be greatly appreciated.

You've not shared the HTML, so we don't have a full picture of what's happening. However, it looks very much like your search button submits a form via GET and you've not prevented the default behaviour? — Robin Zigmond, Apr 10 '19 at 16:49

Intervalia · Accepted Answer · 2019-04-10T17:29:15.343

Add a preventDefault to your event handler. I assume that the function search is getting called when you click on the button. If so then you need to pass in the event like below:

function search(evt){
  evt.preventDefault(); // <--
  var search = document.getElementById('txt_field').value; 

  fetch('/search', {
    headers: {text: search}
  })
    .then(response => response.json())
    .then(function(data) {

      // CODE HERE TO DYNAMICALLY UPDATE HTML

     })
     .catch(error => console.error(error));
}

preventDefault will tell the browser to not do the default action of the button, which is to submit the form.

So preventDefault lets the browser know that you do not want it to submit the form, thus preventing the redirect from happening.

Thank you so much! The preventDefault fixed it, and yes sorry I realised I hadn't included the HTML at first but then edited the original question and added it and the search() trigger — mr cul, Apr 10 '19 at 17:14

Why is my JavaScript search function redirecting to "http://localhost:8090/?"?

Edit

End of edit

1 Answers1