What is the reason behind JavaScript events causing a page refresh?

My code uses RegExp to search through an array of strings based on user input:

Clinica.prototype.pesquisarDoente = function ()
{
    var exp = document.getElementById("pesquisaInput").value;
    var lista = document.getElementById("listaDoentes");
    if (exp)
    {
        while (lista.firstChild)
        lista.removeChild(lista.firstChild);
        var patt = new RegExp(exp);
        var lenght = this.doentes.length
        for ( i = 0; i < length; i++)
        {
            if (patt.test(this.doentes[i].nome))
            {
                var option = document.createElement("option");
                option.appendChild(document.createTextNode(this.doentes[i].toString()));

                lista.appendChild(option);

            }
        }
    }

}

This functionality is called within an event:

var buttonPesquisa = document.createElement("input");
    buttonPesquisa.type = "submit";
    buttonPesquisa.value = "Search";
    buttonPesquisa.addEventListener('click', function () { cl.pesquisarDoente(this); });

However, when I click the button, it clears the select list and refreshes the page. Why does that happen?

Answer №1

The reason for the page appearing to refresh when you click a submit button is because the button triggers a submit event by default...

To prevent this behavior, you should use preventDefault() on the event.

Here's an example:

var searchButton = document.createElement("input");
    searchButton.type = "submit";
    searchButton.value = "Search";
    searchButton.addEventListener('click', function (e) { e.preventDefault(); searchFunction(this); });

Answer №2

Submit buttons are used to send form data.

When a form is submitted, the data is sent to the specified URI by the action attribute (or the current page if no action is specified) and the response is loaded as a new page.

Answer №3

Modify the button's type to 'button':

let searchButton = document.createElement("input");
    searchButton.type = "button";
    searchButton.value = "Search";
    searchButton.addEventListener('click', function () { myApp.searchPatient(this); });

Answer №4

Simply implement

var searchButton = document.createElement("button");
searchButton.type = "button";
// remaining code

This approach will prevent the page from automatically refreshing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Removing classes from multiple elements on hover and click in Vue 2

Can Vue be used to remove a class from an element? I am looking to remove the class when hovering over the element, and then add it back once the mouse is no longer on the text. Additionally, I want the class to be removed when the element is clicked. He ...

What is the best way to achieve a partial match using JQuery?

I'm experimenting with this $("ul.nav-tabs a:contains('profile')").parent().addClass("active") It does not function properly if I include Profile in the text. Is there a way to make it case insensitive? ...

What strategies can I employ to access data from an Ajax POST call beyond its original return function?

I am facing an issue with my jQuery Ajax POST call that runs a PHP script and retrieves data. The problem lies in accessing this data outside the success function. Even though I have declared a global variable components, it seems to lack scope within the ...

SVG: Altering the dy attribute has no impact on the overall height of the bounding rectangle for the parent text

We are striving to align a group of tspan elements both vertically and horizontally. However, the parent container is not taking into consideration dy values. This lack of consideration is leading to alignment issues. If you adjust the dy values in this ...

Error message "Error: listen EADDRINUSE" is reported by node.js when calling child_process.fork

Whenever the 'child_process.fork('./driver')' command is executed, an error occurs: Error: listen EADDRINUSE at exports._errnoException (util.js:746:11) at Agent.Server._listen2 (net.js:1156:14) at listen (net.js:1182:10) ...

Exploring the power of AngularJS in manipulating Google Maps polygons with the help of ng-repeat

I recently started using a Google Maps plugin specifically designed for AngularJS, which can be found at . My goal is to display polygons on the map, so my HTML code looks something like this: <google-map center="map.center" zoom="map.zoom" draggab ...

"Easily toggle the visibility of values in checkboxes and organize them into groups with the power of JavaScript

Hey there! I am currently working on a project that involves grouping checkboxes and hiding/unhiding their content based on user interaction. Essentially, when the page first loads, the "All CARS" checkbox will be checked by default. If I then check the "C ...

Does the AngularJS inject function operate synchronously?

Does the AngularJS inject method work synchronously? Here is an example: inject(function(_$compile_, _$rootScope_) { $compile = _$compile_; rootScope = _$rootScope_.$new(); }); ...

Is there a way to have two SVG files displayed on a single HTML page at the same time

Currently, I am facing an issue with my graphs. I have a line graph and a boxplot, but the boxplot is appearing below the line graph when I want it to be next to it. Any suggestions on how I can achieve this layout? Thank you! I attempted to use 2 differe ...

What could be the reason that a MUI component does not disappear when the display is set to none in the sx prop?

I'm attempting to construct a responsive side drawer using MUI's Drawer component in React, specifically leveraging MUI version 4.12.1. In the example provided on the mui.com website, they utilize the sx prop and pass an object with different di ...

Warning: npm is resolving peer dependency conflicts during the installation process

Upon running npm install for my React application, I encountered the following warnings in the logs. Despite that, the npm installation completed successfully and the dependencies were added under node_modules. My app even starts up without any issues. I ...

custom checkbox is not being marked as checked

I've been attempting to customize my checkboxes, following various tutorials without success. Despite trying multiple methods, I still can't get the checkboxes to check or uncheck. Here is the code I have so far: https://jsfiddle.net/NecroSyri/ ...

Displaying Well-Formatted XML in Angular2 Using Typescript

After receiving this XML string from the server: <find-item-command xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" find-method="Criteria" item-class="com" only-id="false" xsi:schemaLocation=""> <criteria> <criterion> <descripto ...

Should I use Mongoose schema methods or prototype functions?

I am curious about the functionality of functions and ES6 classes in relation to new objects created from a mongoose schema. I wonder if the functions are duplicated for each new object and what the best approach is when utilizing ES6 classes. To illustrat ...

Material-UI's JSS does not adhere to the justify content property

Having trouble aligning elements in my React app using material-ui 1.0 and its JSS solutions. The code I've written below should center justify, but it's not working no matter how I configure it. I suspect there might be a naming issue since mat ...

Creating JavaScript objects through function calls

let getBoxWidth = function() { this.width=2; }; alert(getBoxWidth.width); Hello there! Can you explain why the output is undefined in this scenario? ...

Unresponsive Radio Buttons in HTML

Have you ever encountered the issue where you can't seem to select radio buttons despite them having a confirmed name attribute? Here is an example of the HTML code: <div id="surveys-list" class="inline col-xs-12"><div> <div class="i ...

What is the best way to retrieve the initial cell from a row that the user is currently hovering over?

Is there a way to extract the first cell from a row when a user hovers over it and then clicks a specific key combination? (considering using jQuery) I have a table set up similarly where placing the mouse over a tr and pressing ctrl+c will copy the ID t ...

How to center items within a Toolbar using React's material-ui

I need help with implementing a toolbar on a page that contains three ToolbarGroup components: <Toolbar> <ToolbarGroup firstChild={true} float="left"> {prevButton} </ToolbarGro ...

Ensure that the loop is fully executed before proceeding with any additional code

Check out this code snippet I've been developing: let arrayB = []; for (let index = 0; index < res.length; index++) { let fooFound = false; const dynamicFoo = require(`./modules/${res[index]}`); rest.get(Routes.applicationCommands("BLA ...